WebRTC最新情報 #特別編 ~Kranky Geek 2021ピックアップ~
こんにちは、SkyWay TechSol（テクニカルソリューション）チームのmonmeeです。
WebRTC最新情報マガジンでは、WebRTC業界の最新情報やブラウザのWebRTC実装状況について定期的に皆様にお届けします。
さて、今回は特別編です。
2021/4/22（木）にWebRTC最大の祭典とも言える「Kranky Geek WebRTC Show」というカンファレンスが開催されました。
今年のKranky Geekは、COVID-19の影響もあり、各企業のセッションをYouTubeでライブ配信するバーチャルイベント形式での開催となりました。
それぞれのセッション動画はYouTubeで公開されていますので、気になるセッションがあれば是非チェックしてみてください。
今回は著者が特に共感したTwilio社のDonal Toomeyさんによる講演「Making WebRTC on the Mobile Web Wonderful」 にフォーカスしていきます。
【免責事項】
本調査は素早く幅広い調査を目的としており、本記事にて提供する情報の正確性・妥当性につきましてはその保証をするものではありません。
ご意見があれば以下までお問い合わせください。
☞ https://support.skyway.io/hc/ja/requests/new
Making WebRTC on the Mobile Web Wonderful(Twilio)
モバイルブラウザにおけるWebRTCの成長
パンデミック以前はWebRTC通信のトラフィック割合はデスクトップブラウザとモバイルネイティブアプリがほとんどを占めていました。
しかし、パンデミックによってモバイルブラウザからのトラフィックが驚異的に成長することとなりました。
Twilio Videoにおける直近30日の各ブラウザ利用割合グラフによると、Mobile Safariは全体の約7％で、第1位のChromeデスクトップの70％に次ぐ第2位となっています。
また、モバイルブラウザの中では63％がSafari。25％はChrome Mobileのようです。
モバイルブラウザのコーデックは88％がVP8を占めており、残り12％はH264を利用しているようです。
モバイルブラウザの使用率が大きくなっている理由としては以下が挙げられています。
・消費者にとって利用までの障壁が少ない（インストール不要、URLワンクリックでビデオ通話可能）
・WebRTCに対応しているモバイルブラウザが近年増加している
・近年のトレンドとして、SMSまたはEメールのリマインダで送られる会議URLから会議にアクセス機会が増えた
モバイルブラウザにおける課題
しかし、モバイルブラウザ上でWebRTCを用いたビデオ通話するにあたって、数々の課題が見られています。
課題１: 自分のデバイスのカメラやマイクの所有権の問題
カメラやマイクの所有権がビデオ通話アプリにないため、相手の映像音声が受け取れないといった症状が発生します。
原因として以下が挙げられています。
・別のブラウザタブでカメラやマイクが掴まれている
・別のブラウザタブでカメラやマイクが掴まれているのにgetUserMediaが成功した様に見えてしまう
・Bluetoothデバイスの問題でgetUserMediaに失敗してしまう
課題2：アプリのバックグラウンドモード化
ビデオ通話アプリがバックグラウンドモードに移動することで、通話が切れる、映像が止まるといった症状を引き起こします。
原因として以下が挙げられています。
・ビデオ通話中に突然電話がかかってきてマイクやカメラの所有権が渡ってしまう
・間違えて別のアプリを開いてしまう
課題3：ブラウザのメディアエンジンの問題
特に新しいバージョンのOSやブラウザを使った場合に、エッジケースにおいて映像・音声に問題があったり動かないといった症状を引き起こす可能性があります。
上記症状の原因として以下が挙げられています。
・新しいバージョンのOSやブラウザのメディアエンジン部分にバグが仕込まれている
・ハードウェアコーデックの対応問題（H264はほぼ対応済だがVP8は対応していない）
課題4：ブラウザのWebRTCサポート問題
WebView側がWebRTCに対応していない、WebRTC非対応のブラウザバージョンを利用している、等が原因でgetUserMediaに失敗したり切断されてしまうことがあります。
課題に対するベストプラクティス
カメラ・マイク・スピーカーテストを通話前に行う
音声・映像・接続テストを事前に行えるpre-call画面を導入しましょう。
通話前に自分のカメラ映像や音声入力状況を表示する画面があれば、ユーザに負荷を与えずに上記テストを実施することは可能と考えています。
バックグラウンド時のイベントハンドリングを行う
アプリがバックグラウンドに移動したときはカメラデバイスの所有権を手放して、アプリがフォアグラウンドに戻ってきたときに再度取得し直すと良いでしょう。
また、マイクデバイスについてはアプリがフォアグラウンドに戻ってきたときに、以下の様な挙動を検知したら再度取得し直すと良いでしょう。
・MediaStreamTrackがバックグラウンド中、ended状態になったとき
・MediaStreamTrackがフォアグラウンドに戻ってきたのにunmuteしていないとき
・MediaStreamTrackがunmuteされたのに音声を発しないとき
OSやブラウザのアップデートに合わせてMediaの問題がないかをテストする
ベータ版のOS&ブラウザバージョンでリグレッションテストを行ったり、端末に合うコーデックを探してみるなどが対処法として挙げられています。
どのブラウザをサポートするかを決める
お客様は提供者が動作確認テスト済であることを期待しているので、サポートするブラウザは予め決めておいたほうが良いでしょう。
WebView対応について把握する
Gmail等からリンクをクリックしてWebViewで通話に参加しようとする人は多くなっているので、WebRTC対応状況には気を配っておく必要があります。
Android(android.WebKit.WebView)はAndroid5から、IOS(WKWebView)はiOS14.3からWebRTCに対応済みです。
まとめ
Donalさんは以下をまとめとして本講演を締めくくっています。
・モバイルブラウザにおけるWebRTCは、インストール不要など利用の障壁を減らす方法として成長している
・モバイルブラウザでのWebRTCは問題がつきものである
・以下により、モバイルブラウザにおける問題の克服は可能である
・事前にデバイステストを行う
・バックグラウンド・フォアグラウンドのハンドリング処理を行う
・最新OSとブラウザでテストを行いissueを報告する
・サポートするブラウザを決めておく
Kranky Geekは、WebRTCの業界トレンドを知ることができる、非常に楽しいイベントです。
是非、他の講演もチェックしてみてください！
▼SkyWayサービスサイトはこちら▼