matsutoba’s blog

フロントエンドエンジニアをしています

WebRTCの多機種対応で困ったこと

WebRTCを使ったアプリケーションの開発の際、いろいろなプラットフォームに対応で起きたことをまとめておきます。言語はJavaScript (TypeScript)です。
私の実装方法がマズかったという可能性もありますが、参考にしていただければと思います。

音声全般

mutedの指定をしないとハウリングする

videoタグに muted の指定が必要です。
muteするとPCの音声をミュートというイメージだったのですが、ここでのmute指定は相手には自分の声が届くけれど、自分の声はミュートするという意味でした。
ちなみに相手の声のミュートをする場合は AudioTrack のミュートをします(トラックの enabled = false にする)

iOS Safari 全般

videoタグにplaysInlineが必要

これは調べたらいろいろな人がはまっていました。
iOSでは videoタグに playsInline を書かないと動画が再生されませんでした。

iOS11 Safari

addEventListenerが無い

これはWebRTCというわけではないですが、画面のコントロールをするときなどに使おうと思ったら存在しない関数のエラーになってしまったという話です。
mediadevices.addEventListener(‘devicechange’) ではなく、
mediadevices.ondevicechange を使うことにしました。

applyConstraintsをしないとフレームレートの設定が効かない

getUserMedia のパラメータで frameRate を書けるのですが、これだけでは実際に有効にならず。getUserMediaで取得した stream に対して、applyConstraints({ frameRate:10}); のように改めて設定すると有効になりました。

iOS12 Safari

スクリプトで属性としてplaysInlineの指定が必要

videoタグに playsInline を書いておけば再生できると思ったのですが、iOS12ではスクリプトから指定しないと設定が有効になりませんでした。

const video = document.getElementById('my-video');
video.playsInline = true;
video.autoplay = true;
video.muted = true;

iOS13 Safari

applyConstraintsでフレームレートの設定をするとビデオが映らない

iOS13.4以上では問題なかったのですが、applyConstraints でフレームレートの設定をするとビデオが黒い表示になって映らないバージョンがありました。iOS11のために設定していると iOS13の一部で不具合になってしまいます。

MacOS Safari

フレームレートの設定が効かない

ものすごく単純なサンプルプログラムを作っても、getUserMedia , applyConstraints で フレームレートの設定をしても有効になりませんでした。
mediaDevices.getSupportedConstraints() では framerate=true になっているのにどうしてだろうか。