Secret talk with WebRTC and WebAudio

784 views
706 views

Published on

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

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
784
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×