🧊

WebRTC Meetup Tokyo #19 に行ってきたメモ #webrtcjp

【増員!】WebRTC Meetup Tokyo #19 : ATND

俺の中でわかりにくい会場オブ・ザ・イヤー回。

Android/USBカメラでWebRTC by 馬場さん from インフィニテグラ社

WebRTC Meetup#19 AndroidとUSBカメラでWebRTC - Google スライド

RazVision WR

Androidで外付けUSBカメラ

仕組み

  • 独自のアプリの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 WebRTC Meetup Tokyo

Agora.io

WebSDK

  • SafariからEdgeまで対応
  • 80M+ユーザーがいて、10M+mins/dayで使われてる
    • ソーシャルユースやゲーム関連で

仕組み

計測

  • MediaServerやSDKの`getStats()`、ロギングで貯めてる
  • それをDevOpsやらで利用できるようにしてる
  • モニタリングしたりとかも

QoSへの取り組み

  • ゲートウェイとの通信品質がよくない場合(NACK / REMBとか)にも協調できる
  • Simulcastで低解像度のものを送るようにしたりとか

DataChannels を利用したホワイボードアプリ開発事例 by @kunitoo , @hide_nba from 永和システムマネジメント社

DataChannel を利用した ホワイトボードアプリ開発事例 - Speaker Deck

Linkup

  • linkup
  • リモートコラボレーションのツール
    • リモートワークをしている中で欲しかったツールを作った
    • 最初はappear.inを使ってたが、当時は機能に不満があった
  • ホワイトボードの前にみんなが集まってくるイメージ
    • 画面共有しながらココ!って指差したりできる
    • ふせんを貼るUIもあったり
  • Webhookもあるので、定例とか朝会とかにも使える

仕組み

DataChannelの活用

  • クライアント情報の共有
    • 表示名とか
  • ココさす機能
    • `canvas`のクリック座標を飛ばして、`video`の上に重ねて表示

ホワイトボード機能

  • 手書き
  • ふせん
  • 画像貼り付け
  • ホワイトボードの画像ダウンロード
  • ホワイトボードの書き込みは、それぞれオブジェクトとして管理
    • fabric.jsにそういう機能が元からある
    • それをJSONシリアライズして送る
    • 送られてきたほうはそれをデシリアライズして描画
    • 移動 = 削除 + 新規作成を同期する

LT: シングルボードコンピュータでWebRTCを使ってみた話 by @sublimer

シングルボードコンピュータでWebRTCを使ってみた話 - Google スライド

シングルボードコンピュータとは

  • れっきとしたパソコン
  • 基盤の上に端子むき出しになってる
  • RashPi2とROCK64

Janus on Docker on ROCK64

  • janusはSTUNの設定記述が必要
  • 小規模なSFUとしては使えそう
    • 少しラグがある

THETA Sから360度配信

  • UV4Lを使うと、Janusにつなげる部分が楽
  • CPU使用率200%とかで、動かない場合も多かった
  • これを使って高専プロコンの作品をつくった

LT: WebRTCと既存サービスを仲良くさせる方法 by @mato_kata from div社

TECH::CAMPのオンライン質問システムを3ヶ月でリプレイスした話|Inoue Ryuichi|note

TECH::CAMP

仕組み

  • 声や表情がわかるようにビデオ通話
  • 通話できないときはチャット
  • PCを遠隔操作
  • フロントはVue、サーバーはRails(w/ ActionCable)
  • SkyWay使ってる
    • 自前でも試したけど、やはり安心感があるので
  • 既存のログイン情報を使えるように、段階的にリリースしていった
    • まずはElastiCache(Redis)で既存サービスのセッションを管理
    • ALBで特定のドメインを新サービスへ

LT: THETAプラグインでWebRTCやってみた by 城さん from リコー社

THETA V 単体で 360° 映像をリアルタイム配信する

THETA V

RICOH Live Streaming API

  • SFUのサービスがある
  • そこにTHETAからWiFiでつないでストリーミングできる

THETA側の設定

  • 既存の配信アプリはそのまま使えない
    • 開発はAndroidStadioから普段どおりできる
  • THETAのシステムアプリのカメラ権限が必要
  • カメラのモード設定が必要
    • AndroidのCamera APIでTHETA用のパラメータを指定
  • THETAの360度の音声がそのまま使えない
    • AudioManager APIでモノラルに指定