Real-time
Media streaming
Web technologies
@bulbulpaul
About me
• おかだ のぶお ( @bulbulpaul )
• Software Engineer
• Python, Scala, JavaScript, MongoDB

とかいろいろ好きです
• 仕事はPython, Java
Agenda
• Web技術で実現するリアルタイム通信
• メディア録音/録画に関するAPI (おまけレベル)
Web技術で実現する

リアルタイム通信
Web技術でメディア通信
• 今までは専用機器に専用ソフトウェアが主
• 従来の一対多, 多対多での

やり取りの実装は無理ゲー
• でも,2年前くらいから可能になってきた
WebRTC
• Web Real-Time Communication の略
• HTML5 の1つとしてW3Cで策定
• P2P通信でのリアルタイム通信
• プラグイン無しで

ビデオチャットやファイル共有等を

実現することができる
WebRTC のいいトコロ
• 映像/音声/データのリアルタイム通信における
オープン標準

(Sk⃝pe, Web⃝xとか独自仕様すぎてク ry)
• Webと名前付いてるけど

実はネイティブで使える
WebRTC の対応状況
対応 種別 その他
⃝ Chrome
⃝ Firefox
⃝ IE プラグイン要
× Edge ORTC実装予定,getUserMediaは実装済み.
⃝ Safari プラグイン
⃝ Android (ネイティブ) 要コンパイル
⃝ Android (標準ブラウザ) Android5.0移行∼
⃝
Android"
(Chrome, Firefox)
⃝ iOS (ネイティブ) 要コンパイル
× iOS (Safar,Chrome)
⃝ Windows (ネイティブ) 要コンパイル
⃝ Mac (ネイティブ) 要コンパイル
WebRTCの中身
なぜ知るべきか
• 知らなくても作れる
• でも, 基本的にトラブった時に仕組みが

分かってないと死ぬ
• ブラウザによって動きが違う所もあるので

そのあたりも知ってる必要あり
ICE
• WebRTCクライアント同士がP2Pネットワー
クを介して接続する仕組み
• STUN / TURN 等
• いい感じに繋げる為の仕組み
STUN
• 受信に使う自身のグローバルのIPや

ポートを知る為の仕組み
• UDPホールパンチングで

NATへ穴をあける
STUN
STUN
STUN
TURN
• NATに穴を開けれない場合にデータ通信を

中継する仕組み
• 正直セキュリティがしっかりしてる所で

使おうとするなら必須
• ただ,万能じゃない
TURN
シグナリング
• 自身の環境がどういったコーデックに対応し
ていている等の情報のやりとり
• 中身は難解なので気にせず

そっとしておく心の広さも必要
通信のプロトコル
• DTLS - SRTP なので

セキュアな

リアルタイム通信
• UDPだけどDTLS

使ってるので程々に

データ整合性も保証
正直, めんどくさい。。。
便利な物を使いましょう
SkyWay
• NTT-Communications の提供するプラットフォーム

(http://nttcom.github.io/skyway/)
• STUN/TURN/シグナリング API,

Android/iOSライブラリ等々
• 画面共有や録音API等有り
• 今のところ無料
Sora
• 時雨堂が開発中のWebRTC SFUスタック

開発ログ -> (https://gist.github.com/voluntas/
e914aa245fc26f3133c2)
• 一対多のメディアストリームに対応
• 将来的に録画機能等を予定
• 圧倒的技術力感
現状
• SkyWayとかだと単にビデオチャットだと

15分程あれば作れる
• それだけ簡単な分それだけだと

あまり価値もない
• Sora等で実現予定の録画等の

配信機能が今後はキーな予感
メディア録音/録画に

関してのAPI

(おまけレベル)
MediaRecoding API
• ブラウザを使って録画/ 録音が可能
• 現状はFirefox だけ
• 録画しながら配信は現状できない
Demo
ま と め
まとめ
• WebRTCでメディア通信は結構簡単になった
• ただ,通信に関する知識は必須
• SkyWay, Sora 等のサービスを使って

開発することが現実的
• 今後はサーバー等での録画はアツい
お わ り

Real time Media streaming Web technologies