Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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-jav...
顔の輪郭を自動検出
<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 & WebRTC
WebAudioAPI
FFT
ScriptProcessor
PeerConnectionMediaStream
MediaStream MediaStream
リモートへ
WebRTCをどんな風に使うか
は、
みなさんのアイデア次第で
す!
13
Thank you!
14
END
Upcoming SlideShare
Loading in …5
×

Secret talk with WebRTC and WebAudio

973 views

Published on

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

Published in: Internet
  • Be the first to comment

Secret talk with WebRTC and WebAudio

  1. 1. Secret Talk をつくってみた WebRTC Meetup Tokyo #1 LT インフォコム株式会社 がねこまさし
  2. 2. Secret Talk? • プライバシー保護を考慮したビデオ チャット – 顔を隠したい – むしろ、顔以外を隠したい • ※社内でデモしたときの要望。在宅勤務を想定 • ということで、社内Hackathonでつくりま した DEMO
  3. 3. マウスで 領域指定 領域を 相手に伝え て 相手側で合 成 WebSocket 経由 領域反転領域と反転状態を 相手に伝える WebSocket 経由
  4. 4. マスクの描画 • Canvasを使うのが格好良さそう – <video>タグの上に、<canvas>タグを重ねる – なぜか、<canvas>タグで上手くマウスイベン トが撮れなかった… – やり方が悪いのかもしれないが、調べず諦め た
  5. 5. マスクの描画 • divを使うのが簡単さそう – <video>タグの上に、<div>タグを重ねる – マウスイベントは、<video>タグで処理する <video>タグ <div>タグ
  6. 6. 顔以外をマスクするには? • <div>×4 ? めんどくさい….
  7. 7. borderを個別に指定 • <div>×1 border-left border-left border-top border-bottom
  8. 8. 顔の位置を自動で検出したい DEMO http://www.smartjava.org/content/face-detection-using-html5- javascript-webrtc-websockets-jetty-and-javacvopencv この辺を参考にして ccv.js, face.js を利用
  9. 9. 顔の輪郭を自動検出 <video> <canvas> 1. drawImage 2. ccv.detect_objects() 3. Set mask area
  10. 10. 声も変えたい • 「音声は加工してあります」をやりたい
  11. 11. WebAudio API でできそう DEMO http://www.slideshare.net/aike/html5-conference-2013-web-audio-api @aike1000 さんの「FFTでピッチチェンジャー」
  12. 12. WebAudio API & WebRTC WebAudioAPI FFT ScriptProcessor PeerConnectionMediaStream MediaStream MediaStream リモートへ
  13. 13. WebRTCをどんな風に使うか は、 みなさんのアイデア次第で す! 13
  14. 14. Thank you! 14 END

×