Secret talk with WebRTC and WebAudio
Upcoming SlideShare
Loading in...5
×
 

Secret talk with WebRTC and WebAudio

on

  • 429 views

WebRTC Meetup Tokyo #1 のLTで発表した資料です。

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

Statistics

Views

Total Views
429
Views on SlideShare
367
Embed Views
62

Actions

Likes
0
Downloads
8
Comments
0

3 Embeds 62

https://gportal.in.infocom.co.jp 35
https://twitter.com 24
http://s.deeeki.com 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Secret talk with WebRTC and WebAudio Secret talk with WebRTC and WebAudio Presentation Transcript

  • 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 & WebRTC WebAudioAPI FFT ScriptProcessor PeerConnectionMediaStream MediaStream MediaStream リモートへ
  • WebRTCをどんな風に使うか は、 みなさんのアイデア次第で す! 13
  • Thank you! 14 END