iphoneでなんちゃってwebrtc

Copyright © NTT Communications Corporation. All right reserved.

WebRTC Meetup Tokyo #2

iPhone でなんちゃってWebRTC

NTT コミュニケーションズ先端 IP アーキテクチャセンタ小松健作2014 年 6 月 3 日


自己紹介

名前：小松健作所属： NTT communications

HTML5 の研究開発標準化活動（ W3C ）HTML5 の啓蒙・コミュニティ運営

Google Developer Expert (HTML5)


WebRTC Chat on SkyWay

4Copyright © NTT Communications Corporation. All right reserved.

Frequently Asked Question

“iPhone では動かないんですか？“

・・・


…

orz・・・


そんなあなたに Web Audio API + WebSocket

IE 気にしなきゃおっけー

確信犯


そんなあなたに Web Audio API + WebSocket (cont)

Audio api でPCM 取り出す

getUserMedia とか

WebSocketサーバー

Audio api でPCM データか

ら再生

WebSocketですが何か？

LT ネタでしょ？

♫

♫


getUserMedia は立派な WebRTC の機能です

( ´Д ｀ ) なにか ?確信犯


DEMO ちゃんと動くといいなぁ


もうちょい詳しく

getUserMedia()

MediaStreamSource

ScriptProcessor oscillator

ScriptProcessor

destinationNodestream オブジェクト

destinationNode

PCM（かるーく圧縮とか）

PCM（かるーくデコード）

WebSocket

赤いところがAudio API


注意点（ダメな例）

var src = ctx.createMediaStreamSource(stream);var proc = ctx.createScriptProcessor(256, 1, 1);proc.onaudioprocess = function(ev) { // PCM データをふがほげ}

src.connect(proc);proc.connect(ctx.destination);

FireFox 以外だと、音が割れるだの途中で止まるだの Android ではブツブツ切れるだのほんと困ったちゃんになっちゃう

残念な感じになっちゃ

うにゃ


動く書き方

var proc = ctx.createScriptProcessor(4096, 1, 1);proc.onaudioprocess = function(ev) { // PCM データをふがほげ}

$(“#hoge”).on(“click”, function(ev) { var src = ctx.createMediaStreamSource(stream); src.connect(proc); proc.connect(ctx.destination);});

• ScriptProcessor のバッファ値を 2048 以上• onaudioprocess は事前に設定しておく• connect(ctx.destination) は、ユーザーア

クションと連動させる

コールするタイミングが重要にゃ


今日の名言

バグは仕様！！

確信犯

iphoneでなんちゃってwebrtc

Technology