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
760
Canvasで簡易背景ぼかしをやってみた
WebRTC Meetup #25 の発表資料です
mganeko
September 22, 2023
Tweet
Share
More Decks by mganeko
See All by mganeko
WebCodecsの実装状況 / Status of WebCodecs
mganeko
0
1.2k
M1 Macと将棋AIとUSI
mganeko
1
1.2k
Small Tips to use Bun with WebSocket Server and WebAssembly Modules
mganeko
0
5k
Build Node.js–WASM/WASI tiny compiler with Node.js
mganeko
0
660
Node.js x Chrome headless for WebRTC MCU
mganeko
1
3.2k
Extend User Experience of WebRTC with Cool Sensor Devices
mganeko
0
600
Playing with OSS WebRTC SFU meidasoup (update for v1.2)
mganeko
0
760
Build WebRTC iOS Gateway on Browser
mganeko
0
1.2k
Playing with OSS WebRTC SFU meidasoup
mganeko
0
560
Other Decks in Technology
See All in Technology
プルリクエストレビューを終わらせるためのチーム体制 / The Team for Completing Pull Request Reviews
nekonenene
1
240
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
750
どちらかだけじゃもったいないかも? ECSとEKSを適材適所で併用するメリット、運用課題とそれらの対応について
tk3fftk
2
240
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
230
Amazon Athenaから利用時のGlueのIcebergテーブルのメンテナンスについて
nayuts
0
110
データモデルYANGの処理系を再発明した話
tjmtrhs
0
210
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.5k
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
220
クラウド食堂とは?
hiyanger
0
120
事業を差別化する技術を生み出す技術
pyama86
2
440
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
510
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.8k
Embracing the Ebb and Flow
colly
84
4.6k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
We Have a Design System, Now What?
morganepeng
51
7.4k
Typedesign – Prime Four
hannesfritz
41
2.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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/