secret talk with webrtc and webaudio

Secret Talk をつくってみたWebRTC Meetup Tokyo #1 LT

インフォコム株式会社がねこまさし

Secret Talk?

• プライバシー保護を考慮したビデオチャット– 顔を隠したい– むしろ、顔以外を隠したい• ※ 社内でデモしたときの要望。在宅勤務を想定

• ということで、社内 Hackathon でつくりました

DEMO

マウスで領域指定

領域を相手に伝え

て相手側で合

成

WebSocket 経由

領域反転領域と反転状態を相手に伝える

WebSocket 経由

マスクの描画• Canvas を使うのが格好良さそう– <video> タグの上に、 <canvas> タグを重ねる– なぜか、 <canvas> タグで上手くマウスイベン

トが撮れなかった…– やり方が悪いのかもしれないが、調べず諦め

た

マスクの描画• div を使うのが簡単さそう– <video> タグの上に、 <div> タグを重ねる– マウスイベントは、 <video> タグで処理する

<video> タグ

<div> タグ

顔以外をマスクするには？• <div>×4 ? めんどくさい… .

border を個別に指定• <div>×1

border-left border-left

border-top

border-bottom

顔の位置を自動で検出したい

DEMO

http://www.smartjava.org/content/face-detection-using-html5-javascript-webrtc-websockets-jetty-and-javacvopencv

この辺を参考にして ccv.js, face.js を利用

顔の輪郭を自動検出

<video>

<canvas>

1. drawImage

2. ccv.detect_objects()

3. Set mask area

声も変えたい• 「音声は加工してあります」をやりたい

WebAudio API でできそう

DEMO

http://www.slideshare.net/aike/html5-conference-2013-web-audio-api

@aike1000 さんの「 FFT でピッチチェンジャー」

WebAudio API & WebRTCWebAudioAPI

FFT ScriptProcessor

PeerConnectionMediaStream

MediaStream MediaStream

リモートへ

WebRTC をどんな風に使うかは、

みなさんのアイデア次第です！

13

Thank you!

14

END