WebRTC Meetup Tokyo #1 のLTで発表した資料です。 http://atnd.org/events/49151 顔検出、WebAudio APIによる音声加工などもやっています。

1. Secret Talk をつくってみた
WebRTC Meetup Tokyo #1 LT
インフォコム株式会社
がねこまさし

2. Secret Talk?
• プライバシー保護を考慮したビデオ
チャット
– 顔を隠したい
– むしろ、顔以外を隠したい
• ※社内でデモしたときの要望。在宅勤務を想定
• ということで、社内Hackathonでつくりま
した
DEMO

3. マウスで
領域指定
領域を
相手に伝え
て
相手側で合
成
WebSocket 経由
領域反転領域と反転状態を
相手に伝える
WebSocket 経由

4. マスクの描画
• Canvasを使うのが格好良さそう
– <video>タグの上に、<canvas>タグを重ねる
– なぜか、<canvas>タグで上手くマウスイベン
トが撮れなかった…
– やり方が悪いのかもしれないが、調べず諦め
た

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

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

7. borderを個別に指定
• <div>×1
border-left border-left
border-top
border-bottom

8. 顔の位置を自動で検出したい
DEMO
http://www.smartjava.org/content/face-detection-using-html5-
javascript-webrtc-websockets-jetty-and-javacvopencv
この辺を参考にして ccv.js, face.js を利用

9. 顔の輪郭を自動検出
<video>
<canvas>
1. drawImage
2. ccv.detect_objects()
3. Set mask area

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

11. WebAudio API でできそう
DEMO
http://www.slideshare.net/aike/html5-conference-2013-web-audio-api
@aike1000 さんの「FFTでピッチチェンジャー」

12. WebAudio API & WebRTC
WebAudioAPI
FFT
ScriptProcessor
PeerConnectionMediaStream
MediaStream MediaStream
リモートへ

13. WebRTCをどんな風に使うか
は、
みなさんのアイデア次第で
す！
13

14. Thank you!
14
END