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
Canvasで簡易背景ぼかしをやってみた
Search
mganeko
September 22, 2023
Technology
0
390
Canvasで簡易背景ぼかしをやってみた
WebRTC Meetup #25 の発表資料です
mganeko
September 22, 2023
Tweet
Share
More Decks by mganeko
See All by mganeko
WebCodecsの実装状況 / Status of WebCodecs
mganeko
0
770
M1 Macと将棋AIとUSI
mganeko
0
890
Small Tips to use Bun with WebSocket Server and WebAssembly Modules
mganeko
0
4.7k
Build Node.js–WASM/WASI tiny compiler with Node.js
mganeko
0
550
Node.js x Chrome headless for WebRTC MCU
mganeko
1
3k
Extend User Experience of WebRTC with Cool Sensor Devices
mganeko
0
520
Playing with OSS WebRTC SFU meidasoup (update for v1.2)
mganeko
0
650
Build WebRTC iOS Gateway on Browser
mganeko
0
1.1k
Playing with OSS WebRTC SFU meidasoup
mganeko
0
470
Other Decks in Technology
See All in Technology
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
170
プロンプトエンジニアリングでがんばらない-Agentic Workflow へ-近藤憲児
kenjikondobai
4
1k
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
590
The AI Revolution Will Not Be Monopolized: Behind the scenes
inesmontani
PRO
0
110
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
150
競技としてのKaggle、役に立つKaggle
yu4u
5
2k
LayerXにおけるLLMプロダクト開発の今までとこれから
layerx
PRO
1
440
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.8k
LangSmith入門―トレース/評価/プロンプト管理などを担うLLMアプリ開発プラットフォーム
os1ma
3
410
Building a RAG-poweredAI chat appwith Python and VS Code
pamelafox
0
110
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
A Tale of Four Properties
chriscoyier
151
22k
Into the Great Unknown - MozCon
thekraken
10
1k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Web Components: a chance to create the future
zenorocha
305
41k
Code Review Best Practice
trishagee
55
15k
Designing for humans not robots
tammielis
248
25k
4 Signs Your Business is Dying
shpigford
175
21k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Producing Creativity
orderedlist
PRO
337
39k
Transcript
Canvasで簡易背景ぼかしを やってみた WebRTC Meetup #25 2023.09.22 @massie_g / がねこまさし
背景ぼかし • Web会議ツールで必須の機能 ◦ AIを使って人の輪郭を抽出 ◦ 背景をぼかしたり、仮想背景に差し替えたりする ◦ 良いところ ▪
人が動いても、(ほぼ)追従する ◦ 辛いところ ▪ 結構マシンパワーが必要、ファンが唸ったりする • 原始的な背景ぼかしをやってみた ◦ 良いところ ▪ 軽い ▪ 作るのが手軽 ◦ 辛いところ … 人が頑張る
カメラ映像取得から、通信まで • navigator.mediaDevices.getUserMedia() で、映像/音声を取得 ◦ MediaStreamを取得、MediaStreamTrack (Video, Audio) をもつ •
RTCPeerConnectionのインスタンスを生成 • そのインスタンスに、 addTrack()でMediaStreamTrackを追加 • その後、シグナリングを行い通信を開始 navigator.mediaDevices.getUserMedia() MediaStream MediaStreamTrack MediaStreamTrack video audio RTCPeerConnection addTrack() addTrack()
映像の加工はCanvasで • 取得したカメラ映像(MediaStream)を<video>要素で表示 • drawImage()をつかって<canvas>要素に描画 ◦ ※requestAnimationFrame()を使って繰り返す • <canvas>要素から、captureStream()を使って映像(MediaStream)を取得 MediaStream
MediaStreamTrack MediaStreamTrack video audio RTCPeerConnection addTrack() <video> VideoElement <canvas> Canvas drawImage() captureStream() MediaStream MediaStreamTrack video addTrack() requestAnimationFrame()で繰り返す
背景の簡易ぼかし • まじめなぼかし処理ではなく • 縮小→拡大による簡易ぼかし video canvas workCanvas ※以前どこかの記事で見かけたやり方です。元ネタのページは忘れてしまいました
縮小、拡大で簡易ぼかし function drawMosaicBackground () { // モザイクのブロックのサイズ blockWidth, blockHeight をあらかじめ指定
// 縮小後の画像サイズ const smallWidth = video.videoWidth / blockWidth; const smallHeight = video.videoHeight / blockHeight; // 画像を縮小して描画 ctxWork.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, // src 0, 0, smallWidth, smallHeight //dest ); // 画像を再拡大 // zoomLeft, zoomTop, zoomWidth, zoomHeight は計算しておく ctx.drawImage(canvasWork, 0, 0, smallWidth, smallHeight, // src zoomLeft, zoomTop, zoomWidth, zoomHeight //dest ); }
Demo https://mganeko.github.io/webrtc_begins/background_mosaic.html
顔映像の切り抜き • 固定位置を切り抜く ◦ AIモデルは利用していないので、顔検出や追跡はできない ◦ 自分で頑張ってその位置に顔を持って行く video canvas
円形にくりぬいて描画 function drawClipedVideo() { ctx.save(); // コンテキストの情報を保存 /* -- 円を指定
--*/ // r:半径、円の中心(centerX, centerY) を指定しておく ctx.beginPath(); ctx.arc(centerX, centerY, r, 0, Math.PI * 2, false); ctx.clip(); // 画像を描画 // srcR, srcLeft, srcTop, srcWidth, srcHeight を計算しておく ctx.drawImage(video, srcLeft, srcTop, srcWidth, srcHeight, // src (left, top, width, height) centerX - r, 0, r * 2, r * 2, // dest (left, top, width, height) ); ctx.restore(); // コンテキストの情報を復元 }
Demo https://mganeko.github.io/webrtc_begins/camera_crop.html
合体 • 縮小→拡大による簡易ぼかし • 顔の切り抜き video canvas workCanvas
requestAnimationFrame()で連続描画 let requestId = null; // 描画開始 function startDraw() {
requestId = requestAnimationFrame(draw); } // 描画停止 function stopDraw() { if (requestId) { cancelAnimationFrame(requestId); requestId = null; } } // 描画 function draw() { drawMosaicBackground(); drawClipedVideo(); requestId = requestAnimationFrame(draw); }
Demo • video は display:none • workCanvasは OffScreenCanvasに • canvasもdisplay:none
https://mganeko.github.io/webrtc_begins/ https://mganeko.github.io/webrtc_begins/crop_mosaic.html https://mganeko.github.io/webrtc_begins/crop_mosaic_slim.html
Demo Skyway 経由の P2P通信 ※ファイルはローカル(未公開)
まとめ、注意点 • Canvasを使うと、映像を加工して、さらに映像として取り出すことができる ◦ Chrome/Edge, Firefox, Safariで利用可能 • AIモデルを使えば、人の輪郭も抽出できる ◦
例) body-segmentation ▪ https://github.com/tensorflow/tfjs-models/tree/master/body-segmentation • requestAnimationFrame() 利用時の注意 ◦ ブラウザのタブ/ウィンドウが完全に非表示になると ◦ → アニメーションイベントが発生しない ◦ → canvasへの描画が止まる ◦ → 映像が止まる • この欠点を回避するには、MediaStreamTrackProcessorが利用できる ◦ ※Chrome/Edgeのみ
参考 • GitHub でソースを見る ◦ https://github.com/mganeko/webrtc_begins ◦ camera_crop.html … カメラを丸く切り取る
◦ background_mosaic.html … 背景を簡易ぼかし ◦ crop_mosaic.html … カメラ切り抜きと背景ぼかしの合成 ◦ crop_mosaic_slim.html … 余計な要素を隠してすっきりさせたもの • GitHub Pages で試す ◦ https://mganeko.github.io/webrtc_begins/