Slide 1
Slide 1 text
MediaStream を利用した画像処理
2つのパターン
tetter
We Are JavaScripters! @43rd
08, Dec, 2023
Slide 2
Slide 2 text
自己紹介 2
NAME:
- tetter
@tttr_mt tetter27
2017
2018
2022/11
前職 (通信事業会社) Android (Java)
〃 EdgeAI (Python)
NTTコミュニケーションズ株式会社 WebRTC (JS など)
CARRIER:
FEATURES:
- ブラウザ上での AI、画像処理などに興味あり
- WebRTC Meetup 運営
Slide 3
Slide 3 text
映像・音声の取得 3
- ブラウザでデバイスから映像・音声を取得するには getUserMedia()
- 取得した映像・音声は MediaStream に入る
Track (映像)
Track (音声)
MediaStream
await navigator.mediaDevices.getUserMedia({
video: true,
audio: true
})
Slide 4
Slide 4 text
MediaStream の活用方法の一例 * 4
- WebRTC API を使用すればそのまま相手へ送信できる
- 画像処理をするなら一旦 Canvas へ出力するのが一般的
Track (映像)
Track (音声)
MediaStream
WebRTC
ctx.drawImage()
RTCPeerConnection.addTrack()
elem.srcObject
*) 他にもファイル操作などが可能
Slide 5
Slide 5 text
処理した映像を送信する場合 5
- Canvas で画像処理してから、再び MediaStream へ入れる
- 一連のループは requestAnimationFrame() を活用
画像処理
(Canvas)
WebRTC
Track (映像)
Track (音声)
MediaStream
Track (映像)
Track (音声)
MediaStream
requestAnimationFrame()
Slide 6
Slide 6 text
requestAnimationFrame()
問題点 6
- タブを切り替えると処理が停止してしまう！
画像処理
(Canvas)
WebRTC
Track (映像)
Track (音声)
MediaStream
Track (映像)
Track (音声)
MediaStream
Slide 7
Slide 7 text
対策 7
MediaStreamTrack Insertable
MediaProcessing using Streams
を使う
(長い・・)
Slide 8
Slide 8 text
対策 8
Streams (API) を使った
MediaStreamTrack に挿入可能な
メディア処理の API
多分、
ということ
Slide 9
Slide 9 text
MediaStreamTrack Ins(略) を使用した画像処理 9
- MediaStream と Streams API でパイプラインを繋ぐことができる
- Streams API は流れてきたデータを次々と処理できる API
- タブを切り替えてもバックグラウンドで動作可能！
WebRTC
Track (映像)
Track (音声)
MediaStream
Track (映像)
Track (音声)
MediaStream
画像処理
Streams API
MediaStreamTrackProcessor MediaStreamTrackGenerator
*) 音声処理にも使用可能
画像処理
*
Slide 10
Slide 10 text
MediaStreamTrack Ins(略) の現状 10
- Chromium 系のみ対応中
MediaStreamTrackProcessor API MediaStreamTrackGenerator API
(実験的サポート)
Slide 11
Slide 11 text
疑問 11
Q. setInterval() + Worker を使うのは？
A. MediaStream と同期できないので使い方によってはおすすめできない
- 特定のフレームを取得できないことがある
- 同じフレームを複数回取得してしまうことがある
Slide 12
Slide 12 text
参考リンク
- requestAnimationFrameの泣き所をVideoTrackReader + αで解決する
(https://zenn.dev/mganeko/articles/videotrackreader)
- SkyWayで軽量なバーチャル背景を実現する方法
(https://note.com/skyway/n/ned76e8596d9c)
- 動作を確認するために今回作ったもの
- RequestAnimationFrame + WebRTC
- MediaStreamTrackProcessor/Generator + 色変換 + WebRTC
(https://github.com/tetter27/webrtc-color-processing)
12