俺の中でわかりにくい会場オブ・ザ・イヤー回。
Android/USBカメラでWebRTC by 馬場さん from インフィニテグラ社
RazVision WR
- インフィニテグラ株式会社 | RazVision WR
- ウェアラブルなUSBカメラ for Android
- PCはChromeから
- バックエンドはRails
Androidで外付けUSBカメラ
- v8.xまでは要ライブラリ
- v9.xからは標準で対応
仕組み
- 独自のアプリのWebViewからUSBカメラを呼び出し
- USBカメラの映像は`canvas`に描画される
- そこから`captureStream()`して`MediaStream`に
- 音声は普通に`getUserMedia()`
- それをWebRTCで送信
問題: 時間経過で解像度が下がってく
- たった数分でHDから1/16くらいに低下
- Chromeの実装に、CPUの負荷が高いと解像度を下げる処理があった
- 内蔵カメラに比べて、USBカメラはCPU使用率が高い
- `RTCPeerConnection`に、Chrome独自のオプションを渡して解決
- `{ googCpuOveruseDetection: false }`
WebRTCの大規模配信への活用 by Chen Gongさん from Agora.io社
Agora.io
- Agora.io ビデオ通話・ライブ配信SDK | iStudy
- 中国で開発してる
- SDKがある
- voice / video / live
- mobile / web両対応
- 2Bのユーザーがいて、300M+mins/dayで使われてる
- WebRTCは24.3%のCAGR(年平均成長率)の市場予測が出てる in 2016
WebSDK
- SafariからEdgeまで対応
- 80M+ユーザーがいて、10M+mins/dayで使われてる
- ソーシャルユースやゲーム関連で
仕組み
- ブラウザは最寄りのゲートウェイに接続
- ゲートウェイどうしはCloudでつながってる
- シグナリングはNginx(socks)でやってる
- TURNも使える
- ゲートウェイは世界中にある
- SD-RTN: Software-Defined, Real-Time Network
- Agora: The Global Leader in Real Time Communications
- 200地点以上
- 遅くても100msくらいでつながるように
- 普通にP2Pするより速い
計測
- MediaServerやSDKの`getStats()`、ロギングで貯めてる
- それをDevOpsやらで利用できるようにしてる
- モニタリングしたりとかも
- Precallというダッシュボードもある
QoSへの取り組み
- ゲートウェイとの通信品質がよくない場合(NACK / REMBとか)にも協調できる
- Simulcastで低解像度のものを送るようにしたりとか
DataChannels を利用したホワイボードアプリ開発事例 by @kunitoo , @hide_nba from 永和システムマネジメント社
Linkup
- linkup
- リモートコラボレーションのツール
- リモートワークをしている中で欲しかったツールを作った
- 最初はappear.inを使ってたが、当時は機能に不満があった
- ホワイトボードの前にみんなが集まってくるイメージ
- 画面共有しながらココ!って指差したりできる
- ふせんを貼るUIもあったり
- Webhookもあるので、定例とか朝会とかにも使える
仕組み
- React
- Fabric.js Javascript Canvas Library
- SkyWay
- Rails
- GraphQL
DataChannelの活用
- クライアント情報の共有
- 表示名とか
- ココさす機能
- `canvas`のクリック座標を飛ばして、`video`の上に重ねて表示
ホワイトボード機能
- 手書き
- ふせん
- 画像貼り付け
- ホワイトボードの画像ダウンロード
- ホワイトボードの書き込みは、それぞれオブジェクトとして管理
- fabric.jsにそういう機能が元からある
- それをJSONにシリアライズして送る
- 送られてきたほうはそれをデシリアライズして描画
- 移動 = 削除 + 新規作成を同期する
LT: シングルボードコンピュータでWebRTCを使ってみた話 by @sublimer
シングルボードコンピュータとは
- れっきとしたパソコン
- 基盤の上に端子むき出しになってる
- RashPi2とROCK64
Janus on Docker on ROCK64
- janusはSTUNの設定記述が必要
- 小規模なSFUとしては使えそう
- 少しラグがある
THETA Sから360度配信
- UV4Lを使うと、Janusにつなげる部分が楽
- UV4L – (advanced) Projects
- GETのリクエストで配信開始できる
- CPU使用率200%とかで、動かない場合も多かった
- これを使って高専プロコンの作品をつくった
LT: WebRTCと既存サービスを仲良くさせる方法 by @mato_kata from div社
TECH::CAMP
- TECH::CAMP(テックキャンプ) - 人生を変えるテクノロジースクール
- プログラミングのスクール
- このサービスにWebRTCを組み込んだ話
- 今までもオンラインでも参加できたが、チャットの対応だった
- オフラインとの差を埋めたかった
仕組み
- 声や表情がわかるようにビデオ通話
- 通話できないときはチャット
- PCを遠隔操作
- フロントはVue、サーバーはRails(w/ ActionCable)
- SkyWay使ってる
- 自前でも試したけど、やはり安心感があるので
- 既存のログイン情報を使えるように、段階的にリリースしていった
- まずはElastiCache(Redis)で既存サービスのセッションを管理
- ALBで特定のドメインを新サービスへ
LT: THETAプラグインでWebRTCやってみた by 城さん from リコー社
THETA V
- 中身はAndroidベース
- 画面がないけど
- つまりAndroidのアプリが動く
- これがTHETAプラグイン
- RICOH THETA Plug-in Store
- 今まではUSBカメラモードで使って、配信PCから配信してた
- プラグインで配信PCを捨てられる
RICOH Live Streaming API
- SFUのサービスがある
- そこにTHETAからWiFiでつないでストリーミングできる
THETA側の設定
- 既存の配信アプリはそのまま使えない
- 開発はAndroidStadioから普段どおりできる
- THETAのシステムアプリのカメラ権限が必要
- ブロードキャストインテント
- カメラのモード設定が必要
- AndroidのCamera APIでTHETA用のパラメータを指定
- THETAの360度の音声がそのまま使えない
- AudioManager APIでモノラルに指定