WebRTCを手動で動かす際に詰まった点に関するメモ

こちらの手動でWebRTCの通信をつなげよう ーWebRTC入門2016が非常に参考になる記事だったのですが、
それでもなお真似する上で詰まったところがあったので、備忘も兼ねてメモ。

ChromeでConnectを押した側から受信側の映像が見えない

Ver75.0.3770.100で確認。
Answerを入力した後なぜかRemote側のVideoの再生が始まらず。
(Remote側は双方の画面が見えている)
正確な原因はわからなかったものの、local側のVideoタグを消して、
Videoを一つだけにしたら正常に表示されるようになった。
記事上で公開されているサンプルでも動かず、他ブラウザでは動いたのでChromeの問題の可能性が高いと思われる。
Chrome + 複数video + srcObjectは他にも問題を起こしたことがあるようなので、今回もその類だろうか…
参考:https://lealog.hateblo.jp/entry/2017/08/10/150100

HTMLMediaElement.play()の戻り値はpromise

WebRTC自体ではなく、WebRTCに絡む要素ですが、
サンプルコードだと普通にvideo.play();でコードが終わっている箇所があります。
しかし、HTMLMediaElement.play()の戻り値はPromiseです。
この辺りはちょっとしたことでエラーを出しやすいので、きちんとcatchを付けてエラーハンドリングすべきです。

複数ブラウザでWebカメラを使おうとするとNotAllowedErrorが出る場合がある

他のブラウザやアプリで利用中の場合、WebCameraを許可していてもgetUserMediaがRejectされる場合があります。
複数ブラウザでのテスト時などは注意。

サンプルコードはletばかりで書かれているがconstでも問題ない

ロジックを整理してconstだけで書いても特に問題は起こりませんでした。

まとめ

結局あまりWebRTCに関係のないところで詰まっていますね。