iPhoneで、なんちゃってWebRTC（getUserMedia + Web Audio API + WebSocket）なLT資料ですー

1. Copyright © NTT Communications Corporation. All right reserved.
WebRTC Meetup Tokyo #2
iPhoneでなんちゃってWebRTC
NTTコミュニケーションズ
先端IPアーキテクチャセンタ
小松健作
2014年6月3日

2. Copyright © NTT Communications Corporation. All right reserved.
自己紹介
名前：小松健作
所属：NTT communications
HTML5の研究開発
標準化活動（W3C）
HTML5の啓蒙・コミュニティ運営
Google Developer Expert (HTML5)

3. Copyright © NTT Communications Corporation. All right reserved.
WebRTC Chat on SkyWay

4. Copyright © NTT Communications Corporation. All right reserved.
Frequently Asked Question
“iPhoneでは
動かないん
ですか？“
4
・・・

5. Copyright © NTT Communications Corporation. All right reserved.
…
5
・・・

6. Copyright © NTT Communications Corporation. All right reserved.
そんなあなたにWeb Audio API + WebSocket
6
IE気にしなきゃ
おっけー
確信犯

7. Copyright © NTT Communications Corporation. All right reserved.
そんなあなたにWeb Audio API + WebSocket (cont)
7
Audio apiで
PCM取り出す
getUser
Mediaとか
WebSocket
サーバー
Audio apiで
PCMデータか
ら再生
WebSocket
ですが何か？
LTネタで
しょ？
♫
♫

8. Copyright © NTT Communications Corporation. All right reserved.
getUserMediaは
立派なWebRTCの機能です
( ´Д｀)なにか?
8
確信犯

9. Copyright © NTT Communications Corporation. All right reserved.
DEMO
9
ちゃんと
動くといいなぁ

10. Copyright © NTT Communications Corporation. All right reserved.
もうちょい詳しく
10
getUserMedia()
MediaStreamSo
urce
ScriptProcessor oscillator
ScriptProcessor
destinationNodestreamオブジェクト
destinationNode
PCM
（かるーく圧縮とか）
PCM
（かるーくデコード）
赤いところが
Audio API

11. Copyright © NTT Communications Corporation. All right reserved.
注意点（ダメな例）
var src = ctx. (stream);
var proc = ctx. ( , 1, 1);
proc. = (ev) {
}
src. (proc);
proc. (ctx.destination);
11
FireFox以外だと、音が割れるだの途中で止まるだの
Android ではブツブツ切れるだのほんと困ったちゃ
んになっちゃう
残念な感じ
になっちゃ
うにゃ

12. Copyright © NTT Communications Corporation. All right reserved.
動く書き方
var proc = ctx. ( , 1, 1);
proc. = (ev) {
}
$(“#hoge”).on(“click”, function(ev) {
var src = ctx. (stream);
src. (proc);
proc. (ctx.destination);
});
12
• ScriptProcessorのバッファ値を2048以上
• onaudioprocessは事前に設定しておく
• connect(ctx.destination)は、ユーザーア
クションと連動させる
コールする
タイミング
が重要にゃ

13. Copyright © NTT Communications Corporation. All right reserved.
今日の名言
13
バグは
仕様！！
確信犯