console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

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

SkyWay UG Tokyo #3 - connpass

今回はDEJIMAというスペースにて。めっちゃおしゃれ空間やった。
品川から歩いて20分くらい。

Innovation Space DEJIMA

SkyWay初心者からステップアップしよう by @Tukimikage

SkyWay初心者からステップアップしよう - Qiita

お知らせ

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

通信モデル

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

通信要件

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

通信確立まで

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

動作保証ブラウザ

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

Tips

WebRTCリリースで辛かったこと by @jumbOrNot

WebRTCリリースで辛かったこと // Speaker Deck

はじめに

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

Skypeでできたなら

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

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

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

作っておきたい体制

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

AngularJS with SkyWay by Mr.Albert from RareJob Philippine

LT1つ目。

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

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

Tips

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

Angularの話はなかったw

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

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

SkyWayで作る日本初の在宅遠隔医療システム / 非同期アプリケーション開発とSkyWay by @dynamitter

遠隔在宅医療 w/ SkyWay

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

実装の困難

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

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

実証した結果

  • 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は並列処理もフロー処理もできないので、そこは自分でやるしかない

SkyWayで一年間運用してきたけどWebRTCってつらいんじゃないの by @sbntaminif

LT2つ目。

Weblio英会話でも

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

つながらない

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

なんで

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

WebRTCは昔のブラウザ

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