SkyWay UG Tokyo #3 に行ってきたメモ #WebRTCSkyWay

お知らせ

• ダッシュボードから利用状況が見えるようになったよ
  • 直近2ヶ月が見れる
  • だいたい1時間ごとに更新
• Enterprizeへ移行できるように
  • 戻せません

通信モデル

• `Peer`が中心となる
  • PeerID: APIキーごとに一意
• 電話モデルとルームモデル
  • 電話は1:1で相手にコールする
  • ルームはその部屋にジョインする
• ルーム
  • フルメッシュかSFUか
  • 部屋を明示的に消す方法は今のところない

通信要件

• 管理系は2つ
• ディスパッチャ
  • SDKが最初にアクセスする
  • 複数台あるシグナリングサーバーを選ぶために
• シグナリングサーバー
  • Socket.IO
• WebRTC系
• P2P
  • UDPハイポートレンジ内でランダム
• STUN
  • UDP3478(= STUNプロトコル)
• TURN
  • TCP443 or UDP443
  • TURNの通信パターンは3つ
  • AさんとBさんがP2Pする場合
    • Aのみ（Bのみ）
    • AとBが同じTURN
    • AとBが別のTURN
  • できればTURNを使わないネットワーク設計が吉
    • エンプラ用途やUDPが禁止されてる場合などは仕方ない

通信確立まで

• `Peer`をインスタンス化して、`open`イベントを待つ
  • シグナリングサーバーとはSocketでつながりっぱなし
• 実際のメディアは`stream`イベントから
• 実際の通信をモニタするには
  • SDKでは提供してない
  • ブラウザの開発者ツールを使う
• `chrome://webrtc-internals`
  • 接続シーケンスがリアルタイムに出る
  • `iceConnectionState`の状態遷移とかも
  • メディアが流れてる場合は、太字のログがあるはず
    • `bytesSent` / `bytesReceived`でバイト数を
• 実際の通信容量
  • 動きの少ない映像の場合
  • QVGAだと450kbps前後
  • フルHDまでは最大でも1.6Mbps程度
  • 4Kだと2Mbps前後

動作保証ブラウザ

• Chrome / Firefox: 最新2バージョン
  • 今のChromeなら66と65
• Edge
  • SFUルームの対応予定はナシ
  • EdgeがMultiStreamできないから
• Safari
  • SFUルームに非対応
  • SFUがVP8しか流せないので
  • コーデック選択機能を載せる予定

Tips

• 受信のみモード
  • ストリームを渡さずに`joinRoom()`すると、受信のみモードに
  • `videoReceiveEnabled` / `audiReceiveEnabled`で個別に受信のみもできる
  • SFUの場合はワークアラウンドが必要
  • 受信のみモードを併用した多人数でのSFUの利用 – SkyWay サポート

はじめに

• レアジョブ英会話はSkyWayを使ってます
  • それまではSkype
• リリースして1ヶ月くらい経ったけど辛い
• その「辛み」とどう付き合っていくか

Skypeでできたなら

• なんでもできると思われている・・（社内外から）
• 実際はそんなことない
  • Edgeだけでなく不安定
  • 社内ネットワークでつながらないとか
• 絵文字とかメッセ機能とか通知とかアカウント管理とか
  • 完全再現は大変
  • 工夫でカバー

デバイス差異・複数クライアント

• クライアント共通部分は共通のコードにする

作っておきたい体制

• 「つながらない」というお問い合わせに対して
  • 絶対にくる
  • どういう環境でどういう部分がどのようにダメなのか
• 各種タイミングをログに落とす
  • re:dashとkibanaを使ってます
• https://www.callstats.io/
  • UIはわかりにくいけど・・

どうやって自動テストするか

• 忘れられがちだけども大切なトピック
• ProtractorでE2Eしてる
  • あとJasmine

Tips

• フェイクメディアを使うコマンドライン引数を使う
  • パーミッションのダイアログを回避するために
  • 実際のカメラを使わないために
• `video.readyState === 4`を見る
  • ストリームが届いて、再生されたことをチェック
• ブラウザはSeleniumで操作
  • 他のブラウザでもテストできる

Angularの話はなかったｗ

自動テストに関してのノウハウは共感できるとこ多かったけど、テストに関してはTestCafeの勝ちですね。（俺の中では）

WebRTCなコードをE2Eテストする - console.lealog();

遠隔在宅医療 w/ SkyWay

• Telemedicine
• 藤沢市での在宅医療の実証プロジェクト
• テレビ x テレビリモコンを使って簡単に診察を受けられる
• TVを核にしたシステム構想
  • 全世代で親和性の高いUI
  • TVに外付けPTZカメラをつけて4Kで配信
  • 対面と同じクオリティでないと診察できない

実装の困難

• 病院
• 患者宅にある母艦となる箱を置く
• その中でWebSocketのサーバーをたてて、各デバイスとつなぐ
  • スポットライトをつけたり輝度変えたり
  • スピーカーから音出したり
  • テレビのON/OFFとか
  • カメラのPTZの操作とか
  • 8Kカメラで撮影とか

すごい情報量で、「ハードウェアから何から何までハックして、なんとか遠隔操作できるようにしました」っていう話だったｗ

実証した結果

• 8Kまでいくと、直接見るより色々とわかりやすい
• SkyWayにしてよかった
  • コストが低く使える
  • 実績とSLAがある
    • ただし医療分野だとSLA99.99%でも低い
  • 4K映像も流せる

SkyWayで困った

• SDPにTURNが含まれない場合があった
  • 原因不明
• `replaceStream()`がうまく動かなかった
  • 画面共有や別カメラの切り替えの時

JavaScriptで非同期

• コールバックスタイルは使わない
  • Promise / Asyncを
• イベントハンドラ直差しもしない
  • `addEventListener()`を
• SkyWayの`Peer`は`EventEmitter`
  • jQueryのソレの場合、`on()`とか`off()`とかある
  • いろんなパターンがあって挙動も違ってわかりにくい
• DOMのイベントを使えば、DOMのイベントリスナーがそのまま使える
  • ダミーの`a`要素とかを持っておく
  • 第3引数の`once`とかも
• `readyState`をマネた実装をして、Promiseでラップする
• Async / Awaitは並列処理もフロー処理もできないので、そこは自分でやるしかない

Weblio英会話でも

• WebRTCを使ってます
• つらいです

つながらない

• PCのみ、Chromeのみ、帯域も絞ってる
• のにつながらない

なんで

• ブラウザのバージョンでハマる
• EdgeをChromeと言ってくる人もいた

WebRTCは昔のブラウザ

• ブラウザが独自実装にはしってたあの頃
  • DOMのAPIがバラバラで、jQuery誕生待ち
• その点SkyWayはクロスブラウザ！
• みんなで使って知見をためよう