![PC Chrome ? iOS Safari (2) Audio
6
getUserMedia()
MediaStream
Worker
WebSocket
(socket.io)
socket.io
Server
Worker a
WebSocket
(socket.io)
PC Chrome iOS Safari
WebAudio
ScriptProcessor [Float32Array]
MediaStreamAudioSourceNode
[Uint8Array]
compress
postMessage()
ArrayBuffer
(decompress)
WebAudio
6
AudioBufferSource
ArrayBuffer
decoceAudioData()
AudioDestinationNode
postMessage()](https://image.slidesharecdn.com/webrtcbuildiosgatewayonbrowser-170319072454/85/WebRTC-iOS-6-320.jpg)
![WebRTCとPCMU/PCMA
15
[FirefoxのSDP]
a=rtpmap:109 opus/48000/2
a=rtpmap:9 G722/8000/1
a=rtpmap:0 PCMU/8000
a=rtpmap:8 PCMA/8000
[ChromeのSDP]
a=rtpmap:111 opus/48000/2
a=rtcp-fb:111 transport-cc
a=fmtp:111 minptime=10;useinbandfec=1
a=rtpmap:103 ISAC/16000
a=rtpmap:104 ISAC/32000
a=rtpmap:9 G722/8000
a=rtpmap:0 PCMU/8000
a=rtpmap:8 PCMA/8000
a=rtpmap:106 CN/32000
a=rtpmap:105 CN/16000
a=rtpmap:13 CN/8000
a=rtpmap:126 telephone-event/8000](https://image.slidesharecdn.com/webrtcbuildiosgatewayonbrowser-170319072454/85/WebRTC-iOS-15-320.jpg)
![Sample from GitHub
var channels = 1, sampleRate = 44100, kbps = 128; // mono, 44.1kHz, 128kbps
var mp3encoder = new lamejs.Mp3Encoder(channels, sampleRate, kbps);
var sampleBlockSize = 1152; // better to use 576 * n
var samples = new Int16Array(44100); // 1sec sample
var mp3Data = [];
for (var i = 0; i < samples.length; i += sampleBlockSize) {
sampleChunk = samples.subarray(i, i + sampleBlockSize);
var mp3buf = mp3encoder.encodeBuffer(sampleChunk);
if (mp3buf.length > 0) { mp3Data.push(mp3buf); }
}
var mp3buf = mp3encoder.flush(); //finish writing mp3
if (mp3buf.length > 0) { mp3Data.push(new Int8Array(mp3buf)); }
18](https://image.slidesharecdn.com/webrtcbuildiosgatewayonbrowser-170319072454/85/WebRTC-iOS-18-320.jpg)
![MCUサ`バ`叨の碧MみAudio
24
RTCPeerConnection A
MediaStream
AudioContext .
createMediaStreamSource()
で伏撹
MediaStreamAudioSourceNode MediaStreamAudioSourceNode
MediaStreamAudioSourceNode
ScriptProcessor
栽撹┷亘磽
Worker
WebSocket
(socket.io)
MP3
[Uint8Array]
[Uint16Array]
[Flaoat32Array]
lamejs
to iOS](https://image.slidesharecdn.com/webrtcbuildiosgatewayonbrowser-170319072454/85/WebRTC-iOS-24-320.jpg)
![MCUサ`バ`叨の碧Mみ阪h鮫も辛嬬
25
MediaStream
(Video A+B+C+D)
<canvas>タグ 塘佚喘のものを旋喘
Web Audio API
MediaStream
(Audio A+B+C)
h鮫喘に個めて
videoTracks[] MediaStreamTrack
MediaStreamTrackaidioTracks[]
MediaStream
仟しく伏撹
MediaStream.addTrack()
で弖紗
MediaStream.addTrack()
で弖紗
MediaRecorder
WebM](https://image.slidesharecdn.com/webrtcbuildiosgatewayonbrowser-170319072454/85/WebRTC-iOS-25-320.jpg)
ブラウザでWebRTC - iOSゲ`トウェイ恬ってみた
- 1. WebRTC Meetup Tokyo #14 ブラウザでiOSゲ`トウェイ恬ってみた Build WebRTC - iOS Gateway on Browser 2017.03.23 インフォコム幄塀氏芙 がねこまさし @massie_g 1
- 2. 徭失B初 ? がねこまさし / @massie_g ? インフォコム幄塀氏芙 に侭奉 C 室g{砲班臘擇任寮喘を容Mするチ`ム ? WebRTC Meetup Tokyo スタッフの匯繁 ? WebRTC Beginners Tokyo vの匯繁 ? WebRTC秘T2016を HTML5Experts.jpにBdしてました C https://html5experts.jp/series/webrtc2016/ 2
- 3. 書晩のお} ? iOS のブラウザでは、まだWebRTCが聞えない C WebkitではWebRTC鬉Mんでいる徨。が、Safariに秘るかはApple肝及 ? でも、書ある室gを聞って、o尖やりコミュニケ`ションできる C Canvas, Web Audio, WebSocket を旋喘 ? 枠佩しているみを パクって 返云にしてgF C 咄蕗 @leader22 仝WebAudioでなんちゃってWebRTC々 ? http://leader22.github.io/slides/webaudio_tokyo-1/ C 鮫顳 @voluntas 仝WebRTC SFU Sora ノススメ々のスナップショットC嬬 ? https://gist.github.com/voluntas/0d6621d15947a24e710b0610093a5d20 3
- 4. DEMO ? PC Chrome ?? iOS Safari C ぱくたそ の亟寔を聞わせていただいています C https://www.pakutaso.com ? ソ`スコ`ド C https://github.com/mganeko/webrtcexpjp/tree/master/gateway ? ちょっと火廷な何蛍もありますが´ C kの亟寔が貧返くQえない 4
- 5. PC Chrome ? iOS Safari (1) Video 5 getUserMedia() MediaStream <video> <canvas> Blob JPEB setInterval() drawImage() toBlob() Worker WebSocket (socket.io) Blob JPEB socket.io Server postMessage() Worker WebSocket (socket.io) ArrayBuffer postMessage() ArrayBuffer <img> Blob createObjectURL() PC Chrome iOS Safari
- 6. PC Chrome ? iOS Safari (2) Audio 6 getUserMedia() MediaStream Worker WebSocket (socket.io) socket.io Server Worker a WebSocket (socket.io) PC Chrome iOS Safari WebAudio ScriptProcessor [Float32Array] MediaStreamAudioSourceNode [Uint8Array] compress postMessage() ArrayBuffer (decompress) WebAudio 6 AudioBufferSource ArrayBuffer decoceAudioData() AudioDestinationNode postMessage()
- 7. PC Chrome ? iOS Safari : Image 7 <img> toDataURL () Worker WebSocket (socket.io) DataURL socket.io Server postMessage() <img> <img> <img> <canvas> drawImage() DataURL toBlob () <img> DataURL img.src Worker WebSocket (socket.io) postMessage() DataURL iOS SafariPC Chrome
- 8. 宥佚デ`タ楚のp沙 ? TCPの宥佚では、訳周がしくなると、どんどんW决がk伏 C 云栖はリアルタイム啌顱咄蕗宥佚には音鬚 C なるべく宥佚に噫薦ができるよう、デ`タ楚のpが駅 ? 鮫 240x180 / 庵 C RGBのRAW´ 240x180x24bit = 1 Mbit, 129 kb C PNG ´ s760 kbit, 96 kb C JPEG ´ s110 kbit, 14 kb C ★恷K議に、2昼に1指に ´ 56 kbit/sec 8
- 10. 宥佚デ`タ楚のp災蕗 10 ? サンプリング巓襖方はプラットフォ`ム卆贋─ブラウザ卆贋ではない C 44.1kHz (Mac) ○ こちらの箭で麻 C 48kHz (Windows, Linux, iOS) ? Rs C WebAudio 圷デ`タ´44.1kHz 〜 32bitg方 = 1411 kbps C 16bit リニアPCM 晒 ´ 44.1kHz 〜 16bit屁方 = 705 kbps ? ☆CDは44.1kHz 〜16bit 〜 2ch(Stereo) = 1411 kbps C サンプリング巓襖方を磯蛍の22 kHz に ´ 350 kbps C μ-law Rs 22kHz, 8bit屁方 ´ 175 kbps ? ☆G.711 は 8kHz, 8bit屁方 ´ 64kbps C mp3 Rs ´ 36 kbps を峺協
- 12. μ-law アルゴリズム ? 咄蕗Rsアルゴリズム、掲辛剃 ? サンプル輝たりのビット方をp ´ 書指は 8bit ? IPの G.711 ｸ颪琶垢錣譴襯▲襯乾螢坤 C G.711では、サンプリング巓襖方は 8kHz ★ 64kbps ? Wikipedia ? https://ja.wikipedia.org/wiki/%CE%9C-law%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0 C 臼アメリカと晩云のデジタル宥佚システムでμ-law聞喘 ´ PCMU C ヨ`ロッパでは貌のA-lawアルゴリズムを聞喘 ´ PCMA ? WiFiでは聞えなくはないが、LTEではまだキツイRs音怎 ? 歌深WebAudioで圻兵議な咄蕗Rsをやってみた C http://qiita.com/massie_g/items/49183a03b015b9ea27eb C ソ`ス https://github.com/mganeko/webrtcexpjp/blob/master/tool/mulow.html 12
- 13. μ-law アルゴリズムでは方を旋喘 13 リニアPCM 砦云議な8粁A 方歳，気ひ瑤蕨犬く、寄きい咄は間く
- 14. μ-law アルゴリズム 14 μ = 2558ビット
- 15. WebRTCとPCMU/PCMA 15 [FirefoxのSDP] a=rtpmap:109 opus/48000/2 a=rtpmap:9 G722/8000/1 a=rtpmap:0 PCMU/8000 a=rtpmap:8 PCMA/8000 [ChromeのSDP] a=rtpmap:111 opus/48000/2 a=rtcp-fb:111 transport-cc a=fmtp:111 minptime=10;useinbandfec=1 a=rtpmap:103 ISAC/16000 a=rtpmap:104 ISAC/32000 a=rtpmap:9 G722/8000 a=rtpmap:0 PCMU/8000 a=rtpmap:8 PCMA/8000 a=rtpmap:106 CN/32000 a=rtpmap:105 CN/16000 a=rtpmap:13 CN/8000 a=rtpmap:126 telephone-event/8000
- 16. オマケG.722 ? サンプリング巓襖方 16kHz、48, 56, 64kbps ? ADPCM (adaptive differential pulse code modulation) ? Rsのアルゴリズム┐燭屬鵑海鵑文个牽 C 念のサンプルとの餓蛍 ? 弌さい､砲覆蠅笋垢 C 餓蛍を方議に燕F ? 弌さい餓蛍はかく ? 寄きい餓蛍はおおざっぱに 16 リニアPCM ADPCM ケ`タイWatch ケ`タイ喘Zの児A岑Rより http://k-tai.watch.impress.co.jp/cda/article/keyword/2936.html
- 17. lamejsによるMP3Rs ? より咄蕗デ`タをRsするためにMP3を旋喘 ? lamejs C https://github.com/zhuker/lamejs ? ストリ`ミングではなく、俳れのMP3デ`タを伏撹 ? 秘薦は 16bit 屁方の塘双 C チャネル┘好謄譽/モノ、サンプルレ`ト を峺協辛嬬 ? Rs瘁は8bit屁方の塘双 C ビットレ`ト(kbps)を峺協辛嬬 C 和泙△蝪 22kHz の栽 >= 32kbps 、 24kHzの栽 >= 36kbpsぐらい 17
- 18. Sample from GitHub var channels = 1, sampleRate = 44100, kbps = 128; // mono, 44.1kHz, 128kbps var mp3encoder = new lamejs.Mp3Encoder(channels, sampleRate, kbps); var sampleBlockSize = 1152; // better to use 576 * n var samples = new Int16Array(44100); // 1sec sample var mp3Data = []; for (var i = 0; i < samples.length; i += sampleBlockSize) { sampleChunk = samples.subarray(i, i + sampleBlockSize); var mp3buf = mp3encoder.encodeBuffer(sampleChunk); if (mp3buf.length > 0) { mp3Data.push(mp3buf); } } var mp3buf = mp3encoder.flush(); //finish writing mp3 if (mp3buf.length > 0) { mp3Data.push(new Int8Array(mp3buf)); } 18
- 19. lamejs 旋喘にあたっての垢健 ? MP3デ`タのオ`バ`ヘッドの雙崙 C ヘッダ+タグ = 132byte C 匯業にQする咄蕗ブロックを、なるべくLく C WebAudioのScriptProcessorの貧(16384 サンプル/指)で函誼 ? ? 370 ms (44.1kHz), 340 ms (48kHz) 19 ヘッダ Rs瘁デ`タ MP3タグ 4byte 128byte1500゛2000 byte ? Rs念のサンプルの磯p 44.1kHz★22.05kHz, 48kHz★24kHzに ? ビットレ`ト和泙燐{屁 C 和泙△蝪 22kHz の栽 >= 32kbps 、 24kHzの栽 >= 36kbpsぐらい ? WebWorkerでRs ´ 1ブロックあたり 50ms ゛ 100ms
- 20. 宥佚楚のp★芦協して嘛 ? 鮫 ´ 56kbps ? 咄蕗 ´ 36 kbps 20 ト`タル 92kbps 1/40 1/8
- 21. ブラウザMCUとiOSゲ`トウェイのY栽 21 ブラウザ A ブラウザ B ブラウザ C MCU iOS Safari 鮫/2昼ごと、MP3咄蕗 鮫 歌深WebRTC Meetup Tokyo #11 ブラウザでMCU恬ってみた Build MCU on browser /mganeko/webrtc-build-mcu-on-browser https://speakerdeck.com/mganeko/build-webrtc-mcu-on-browser ブラウザ
- 22. DEMO ? PC Chrome ?? ブラウザMCU ?? iOS Safari ? PC Chrome 22
- 23. MCUサ`バ`叨の碧MみVideo 23 RTCPeerConnection A MediaStream <video>タグ <canvas>タグ drawImage() requestAnimationFrame()で @A議に宙鮫 <img>タグ drawImage()Worker WebSocket (socket.io) DataURL Blob JPEB toBlob() Blob JPEB from iOS to iOS setInterval()
- 24. MCUサ`バ`叨の碧MみAudio 24 RTCPeerConnection A MediaStream AudioContext . createMediaStreamSource() で伏撹 MediaStreamAudioSourceNode MediaStreamAudioSourceNode MediaStreamAudioSourceNode ScriptProcessor 栽撹┷亘磽 Worker WebSocket (socket.io) MP3 [Uint8Array] [Uint16Array] [Flaoat32Array] lamejs to iOS
- 25. MCUサ`バ`叨の碧Mみ阪h鮫も辛嬬 25 MediaStream (Video A+B+C+D) <canvas>タグ 塘佚喘のものを旋喘 Web Audio API MediaStream (Audio A+B+C) h鮫喘に個めて videoTracks[] MediaStreamTrack MediaStreamTrackaidioTracks[] MediaStream 仟しく伏撹 MediaStream.addTrack() で弖紗 MediaStream.addTrack() で弖紗 MediaRecorder WebM
- 26. まとめ ? iOS ブラウザで WebRTCが咾ない´ それがどうした C やりたいのはWebRTCではなく、コミュニケ`ション ? 書聞えるもので、o尖やりやってみよう C ブラウザの勣殆を徭喇にMみ栽わせられるのが仝Web々RTC C Canvas, WebAudio, WebSocket ? なぜか咄蕗コ`デックのs雰をたどる唾に 26
- 27. Thank you! 27