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
920
Canvasで簡易背景ぼかしをやってみた
WebRTC Meetup #25 の発表資料です
mganeko
September 22, 2023
Tweet
Share
More Decks by mganeko
See All by mganeko
OpenAI RealTime API WebRTCモード - シグナリングとDataChannelの使い道 -
mganeko
0
140
WebCodecsの実装状況 / Status of WebCodecs
mganeko
0
1.4k
M1 Macと将棋AIとUSI
mganeko
1
1.3k
Small Tips to use Bun with WebSocket Server and WebAssembly Modules
mganeko
0
5.1k
Build Node.js–WASM/WASI tiny compiler with Node.js
mganeko
0
710
Node.js x Chrome headless for WebRTC MCU
mganeko
1
3.2k
Extend User Experience of WebRTC with Cool Sensor Devices
mganeko
0
660
Playing with OSS WebRTC SFU meidasoup (update for v1.2)
mganeko
0
840
Build WebRTC iOS Gateway on Browser
mganeko
0
1.2k
Other Decks in Technology
See All in Technology
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
3
250
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3k
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
extension 現場で使えるXcodeショートカット一覧
ktombow
0
200
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
180
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.8k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
実装で解き明かす並行処理の歴史
zozotech
PRO
1
300
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
240
AIが書いたコードをAIが検証する!自律的なモバイルアプリ開発の実現
henteko
1
320
いまさら聞けない ABテスト入門
skmr2348
1
190
Findy Team+のSOC2取得までの道のり
rvirus0817
0
300
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Producing Creativity
orderedlist
PRO
347
40k
Typedesign – Prime Four
hannesfritz
42
2.8k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
How to Think Like a Performance Engineer
csswizardry
27
2k
Rails Girls Zürich Keynote
gr2m
95
14k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
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/