Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MediaStream を利用した画像処理 2つのパターン
Search
tetter
December 08, 2023
0
380
MediaStream を利用した画像処理 2つのパターン
We Are JavaScripters! @43rd 2023/12/08
登壇資料
tetter
December 08, 2023
Tweet
Share
More Decks by tetter
See All by tetter
WebRTC と Wasm の関係を振り返ってみた
tetter27
0
230
WebRTC でスマートカメラを開発するチュートリアルやってみた
tetter27
0
450
TPAC 2023 のトピック厳選紹介
tetter27
0
390
WebRTC の現状と未来
tetter27
1
2k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
102
6k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Happy Clients
brianwarren
97
6.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
A Tale of Four Properties
chriscoyier
156
23k
Making Projects Easy
brettharned
115
5.9k
4 Signs Your Business is Dying
shpigford
180
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Visualization
eitanlees
143
15k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Scaling GitHub
holman
458
140k
Transcript
MediaStream を利用した画像処理 2つのパターン tetter We Are JavaScripters! @43rd 08, Dec,
2023
自己紹介 2 NAME: - tetter @tttr_mt tetter27 2017 2018 2022/11
前職 (通信事業会社) Android (Java) 〃 EdgeAI (Python) NTTコミュニケーションズ株式会社 WebRTC (JS など) CARRIER: FEATURES: - ブラウザ上での AI、画像処理などに興味あり - WebRTC Meetup 運営
映像・音声の取得 3 - ブラウザでデバイスから映像・音声を取得するには getUserMedia() - 取得した映像・音声は MediaStream に入る Track
(映像) Track (音声) MediaStream await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
MediaStream の活用方法の一例 * 4 - WebRTC API を使用すればそのまま相手へ送信できる - 画像処理をするなら一旦
Canvas へ出力するのが一般的 Track (映像) Track (音声) MediaStream <canvas> WebRTC ctx.drawImage() RTCPeerConnection.addTrack() elem.srcObject <video> *) 他にもファイル操作などが可能
処理した映像を送信する場合 5 - Canvas で画像処理してから、再び MediaStream へ入れる - 一連のループは requestAnimationFrame()
を活用 画像処理 (Canvas) WebRTC Track (映像) Track (音声) MediaStream Track (映像) Track (音声) MediaStream requestAnimationFrame()
requestAnimationFrame() 問題点 6 - タブを切り替えると処理が停止してしまう! 画像処理 (Canvas) WebRTC Track (映像)
Track (音声) MediaStream Track (映像) Track (音声) MediaStream
対策 7 MediaStreamTrack Insertable MediaProcessing using Streams を使う (長い・・)
対策 8 Streams (API) を使った MediaStreamTrack に挿入可能な メディア処理の API 多分、
ということ
MediaStreamTrack Ins(略) を使用した画像処理 9 - MediaStream と Streams API でパイプラインを繋ぐことができる
- Streams API は流れてきたデータを次々と処理できる API - タブを切り替えてもバックグラウンドで動作可能! WebRTC Track (映像) Track (音声) MediaStream Track (映像) Track (音声) MediaStream 画像処理 Streams API MediaStreamTrackProcessor MediaStreamTrackGenerator *) 音声処理にも使用可能 画像処理 *
MediaStreamTrack Ins(略) の現状 10 - Chromium 系のみ対応中 MediaStreamTrackProcessor API MediaStreamTrackGenerator
API (実験的サポート)
疑問 11 Q. setInterval() + Worker を使うのは? A. MediaStream と同期できないので使い方によってはおすすめできない
- 特定のフレームを取得できないことがある - 同じフレームを複数回取得してしまうことがある
参考リンク - 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