Web技術での録画や録音, リアルタイム通信としてのWebRTC, MediaRecodingAPI に関して

1. Real-time
Media streaming
Web technologies
＠bulbulpaul

2. About me
• おかだ のぶお ( @bulbulpaul )
• Software Engineer
• Python, Scala, JavaScript, MongoDB
とかいろいろ好きです
• 仕事はPython, Java

3. Agenda
• Web技術で実現するリアルタイム通信
• メディア録音/録画に関するAPI (おまけレベル)

4. Web技術で実現する
リアルタイム通信

5. Web技術でメディア通信
• 今までは専用機器に専用ソフトウェアが主
• 従来の一対多, 多対多での
やり取りの実装は無理ゲー
• でも，2年前くらいから可能になってきた

6. WebRTC
• Web Real-Time Communication の略
• HTML5 の1つとしてW3Cで策定
• P2P通信でのリアルタイム通信
• プラグイン無しで
ビデオチャットやファイル共有等を
実現することができる

7. WebRTC のいいトコロ
• 映像/音声/データのリアルタイム通信における
オープン標準
(Sk⃝pe, Web⃝xとか独自仕様すぎてク ry)
• Webと名前付いてるけど
実はネイティブで使える

8. WebRTC の対応状況
対応 種別 その他
⃝ Chrome
⃝ Firefox
⃝ IE プラグイン要
× Edge ORTC実装予定，getUserMediaは実装済み.
⃝ Safari プラグイン
⃝ Android (ネイティブ) 要コンパイル
⃝ Android (標準ブラウザ) Android5.0移行∼
⃝
Android"
(Chrome, Firefox)
⃝ iOS (ネイティブ) 要コンパイル
× iOS (Safar,Chrome)
⃝ Windows (ネイティブ) 要コンパイル
⃝ Mac (ネイティブ) 要コンパイル

9. WebRTCの中身

10. なぜ知るべきか
• 知らなくても作れる
• でも, 基本的にトラブった時に仕組みが
分かってないと死ぬ
• ブラウザによって動きが違う所もあるので
そのあたりも知ってる必要あり

11. ICE
• WebRTCクライアント同士がP2Pネットワー
クを介して接続する仕組み
• STUN / TURN 等
• いい感じに繋げる為の仕組み

12. STUN
• 受信に使う自身のグローバルのIPや
ポートを知る為の仕組み
• UDPホールパンチングで
NATへ穴をあける

13. STUN

14. STUN

15. STUN

16. TURN
• NATに穴を開けれない場合にデータ通信を
中継する仕組み
• 正直セキュリティがしっかりしてる所で
使おうとするなら必須
• ただ，万能じゃない

17. TURN

18. シグナリング
• 自身の環境がどういったコーデックに対応し
ていている等の情報のやりとり
• 中身は難解なので気にせず
そっとしておく心の広さも必要

19. 通信のプロトコル
• DTLS - SRTP なので
セキュアな
リアルタイム通信
• UDPだけどDTLS
使ってるので程々に
データ整合性も保証

20. 正直, めんどくさい。。。

21. 便利な物を使いましょう

22. SkyWay
• NTT-Communications の提供するプラットフォーム
(http://nttcom.github.io/skyway/)
• STUN/TURN/シグナリング API,
Android/iOSライブラリ等々
• 画面共有や録音API等有り
• 今のところ無料

23. Sora
• 時雨堂が開発中のWebRTC SFUスタック
開発ログ -> (https://gist.github.com/voluntas/
e914aa245fc26f3133c2)
• 一対多のメディアストリームに対応
• 将来的に録画機能等を予定
• 圧倒的技術力感

24. 現状
• SkyWayとかだと単にビデオチャットだと
15分程あれば作れる
• それだけ簡単な分それだけだと
あまり価値もない
• Sora等で実現予定の録画等の
配信機能が今後はキーな予感

25. メディア録音/録画に
関してのAPI
(おまけレベル)

26. MediaRecoding API
• ブラウザを使って録画/ 録音が可能
• 現状はFirefox だけ
• 録画しながら配信は現状できない

27. Demo

28. ま と め

29. まとめ
• WebRTCでメディア通信は結構簡単になった
• ただ，通信に関する知識は必須
• SkyWay, Sora 等のサービスを使って
開発することが現実的
• 今後はサーバー等での録画はアツい

30. お わ り