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

はじめに

• Skypeを使って英会話のサービスをやってたけど、SkyWayに移行
• 生徒側と講師側のアプリがあって、1:1のレッスンルーム
  • どっちもVue.js製
  • 講師はフィリピンからWebRTC！

録音

• SkyWayのMediaPipelineFactoryを使って、レッスンを録音
• AWSのS3に`.wav`が保存されるので、あとで`mp3`にして利用
• レッスンに使う`Peer`とは別に、録音用に`Peer`を用意して使う
• 生徒と講師のストリームをまとめて録音
  • WebAudioで1つに混ぜてる
• レッスンの仕様上の苦労
  • 録音ファイルの置き場が複数になっちゃう
  • 双方向なストリームと、片方向があって取り回しで苦労した
• NTT Com.との協業も
  • https://www.rarejob.co.jp/news/news_release/corporate/2019/0123/5974/

ハコスコについて

• VRデバイスのライフサイクルの速さにどう追従するか
• そのうえで普遍的な環境で動作させたい
• VRを使ったサービスだけでなくアート作品も
  • 代表は脳科学に精通している
• ハコスコ = ダンボールでできたヘッドマウントディスプレイ
• 360度VRコンテンツをワンストップで提供できるプラットフォーム
  • エンコード
  • アーカイブ
  • Live配信
• 視聴環境も内製してます
  • iOS/Android向け
  • WebVRを使ったもの
• VRに必要なすべてをワンストップで提供！

ハコスコナビ

• SkyWayを利用して開発した
• VR空間プレゼンツール
  • https://hacosco.com/navi/
  • VRの360度動画を、複数人で視聴できる
  • ナビゲーターが案内
  • 双方向で音声通話しながら
  • 視聴者がどこを見てるかも取れる

実装について

• ヘッドマウントディスプレイの数の多さ
  • 2013年くらいから
• 考えた要件
  • 複数人で体験を共有できる
  • 音声通話
  • ナビゲーターと視聴者で非対称な操作
• Webブラウザでも動作させたい
  • メディアはCDNから取得
  • それを見ながらボイスチャットを提供

要件定義

• モック開発時はWebSocketを使っていた
  • しかしパフォーマンスの問題が
• そこでWebRTCのDataChannelが使えるサービスを探した
  • SkyWayだ！
  • シグナリングサーバーもある！
  • ルームの概念もある！
  • SDKのコードが読める！

動画をどうするか

• WebRTCでやりとりできる解像度の限界
  • スマホの回線で快適に配信できるかが課題
• なのでCDNで静的に配信

開発時の要望

• 多彩な環境で視聴したい
  • ブラウザ、スマホ、Oculus
• iPadでナビゲーターしたい
• ミュートはナビゲーターが行う
  • 同じ部屋でやると
• iOS/Androidでのトラブル
  • HLSの再生方式（iOSはライブラリを使わない
  • MediaStreamの再生がおかしくなってた頃もあった

vmeets

• https://broadcast.vmeets.io/
  • アバターでテレビ会議ができるサービス
• なぜアバターか
  • 部屋の映り込み、服や化粧などを気にしなくてよい
• ビデオ通話におけるカメラいる？問題
  • メリットもデメリットもある
• アバターならいいとこ取りできる！
• 自作のアバターも動かせる
  • Live2D

つかいかた

• ルーム名を指定して入る
• 好きなアバターを選ぶ
  • もちろんカメラ映像そのままでも
• あとは自分の表情がキャプチャされて、アバターに反映される
• その他、会議に必要な機能を網羅
  • チャット
  • 画面共有
  • お絵かき
  • 文字起こし
  • etc...
• 複数人でLive放送できるような仕組みも

支える技術

• Webサービス
  • データアクセス・保存
• リアルタイムプロセス
  • アバターのレンダリング
  • フェイシャルキャプチャー
• ネットワーク
  • WebRTC = SkyWay
• 技術スタック
  • AWS
  • Python: MLとの親和性
  • Django
  • three.js: 信頼と実績
  • Live2D, VRM, Pera2D
  • clmtrackr: JSのライブラリの中では制度がよく、軽い
    • https://github.com/auduno/clmtrackr

知見

• まだアルファ版のサービスではあるが、試行錯誤があった
• `rAF`ベースのフレーム単位での処理と、その他イベントベースの処理の組み合わせ
  • たとえばアバターのモデルを変更した時とかに整合性の問題が
• 音声のクオリティ
  • OPUSで固定しても解決しない
  • WebRTCなので、帯域が自動で調整されてしまう
• 帯域のバランス調整がむずかしい
  • パラメータが増えるとそれだけ難易度が上がってしまう
  • サービスでパラメータを減らす努力を

SkyWayへの不満

• ストリーム・トラックの管理に自由度がない
  • 複数のトラックのために複数のPeerが
• SFUとMeshで挙動が違う
  • 使う帯域が違うだけでなく
• エラーのコールバックがどこのAPIによるものかわからない
  • 自分たちでトレースするしかない
• シンプルに使えていいけど、より細かい制御がしたい

SkyWayのお型付け by @sublimer

SkyWayのお型付け

• SkyWayをTSで使えるのはよい
• このスライドもReveal.js
• それをDC張って操作できるようにした
• https://github.com/kadoshita/revealjs-controller

puppeteer を使ってサーバーレスで録音してみた by @kiyoshi_ohno

puppeteer を使ってサーバーレスで録音してみた - Speaker Deck

• 録音したい
• CloundFunctionでやると、実行時間に制限がある
• GAEだとスケールの問題が
• 最終的にGKEで

iOSのCallKitフレームークとSkyWayについて by @yorifuji

iOSでCallKitとWebRTCを使ってビデオ通話アプリを作る｜よりふじ｜note

• DCでつないで通知だす
• それを受けてメディアを通す

SkyWay Gatewayを使ってブラウザから操作できるロボットを作ってみた by @harmoniko

資料は見つけたら

• ラズパイを載せたラジコン！
• 会場のWiFi情報とかは、SDカードのFATのほうに書いておく
• 暴走しないようにping/pongするとか