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
510
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
630
WebRTC でスマートカメラを開発するチュートリアルやってみた
tetter27
0
610
TPAC 2023 のトピック厳選紹介
tetter27
0
500
WebRTC の現状と未来
tetter27
1
2.3k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
It's Worth the Effort
3n
187
28k
How to Think Like a Performance Engineer
csswizardry
27
2k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
33
2.3k
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