MediaStream を利用した画像処理 2つのパターン

We Are JavaScripters! @43rd 2023/12/08 登壇資料

Transcript

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