SFU通信の複数対話にて、PeerIDは取得できているのに映像が映らない
自分で色々と調べて見たのですが、結局わからなかったため、こちらで質問させてください。
お恥ずかしながら大変拙い問題に引っかかっている気がするのですが、解決できずに困っております。
よろしくお願いいたします。
【発生事象】
・以下のハンズオンを試している
https://qiita.com/yusuke84/items/54dce88f9e896903e64f
・このアプリを別タブで開いて接続確認
・自分のカメラが映らない
・相手の映像が映らない
・Peer IDの取得はできる
・以下のエラーが発生している(関係があるかは不明)
mediaDevice.getUserMedia() error: TypeError: Cannot set property 'srcObject' of undefined
そのため、以下に置き換えて実行
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
// 元々のコード
// $('#myStream').get(0).srcObject = stream;
// localStream = stream;
//書き換えたコード
var video = $('#myStream');
if('srcObject' in video){
video.srcObject = stream;
}else{
video.src = URL.createObjectURL(stream);
}
localStream = stream;
})
【環境】
・クライアント+バージョン: バージョン: 63.0.3239.84(Official Build) (64 ビット)
・OS: macOS High Sierra
・ネットワーク : wifi(5G)
【再現手順】(最低限ハンズオン資料でいうSTEP3の複数人数が実行したい)
- アプリを開く
- roomに言葉を入力して[join]を押す
- 新しいタブを開いてroomに同じ言葉を入力して[join]を押す
【期待される事象】
映像が疎通する
【その他】
以下のURLの質問と関連している気がしてTURN申請して見ましたが、何度登録ユーザ情報のメールアドレスを入力しても申請できず、今ままで登録に使ってなかったメールアドレスで申請したらできました。
その申請できたメールアドレスにユーザ情報(Community Editionの方)を登録し直しました。
-
> 以下のURLの質問と関連している気がしてTURN申請して見ましたが、何度登録ユーザ情報のメールアドレスを入力しても申請できず、今ままで登録に使ってなかったメールアドレスで申請したらできました。
紛らわしくて申し訳ございませんが、Community Editionで登録いただきますと、最初からTURNは有効な状態になっております。(したがってTURN申請は不要)
また、
mediaDevice.getUserMedia() error: TypeError: Cannot set property 'srcObject' of undefined
について、確認させていただきたいのですが、どのブラウザをご利用されておりますでしょうか? ブラウザ名とそのバージョンまで教えていただけますと、回答できるかもしれません。
-
Yoshimasa Iwaseさん回答ありがとうございます。
あ、バージョンだけ書いて満足していました。ごめんなさい!
実行ブラウザはChromeです。
Chromeバージョン: 63.0.3239.84(Official Build) (64 ビット)
そしてとりあえず、localhostで試しています。「Cannot set property 'srcObject' of undefined」は古いブラウザで起きると思って更新したのですが、解決ならず...もしかして、使用IEのバージョンとは別にIEのエミュレータツールで実行ブラウザバージョンを変更できる機能がChromeにあればそこがおかしいのかもしれないですが、Chromeでそういう機能があるのかも調べきれてない状況です...。
-
ご確認ありがとうございます。Chromeのバージョンは問題ないです。
いくつか切り分けの手段を書いてみます。
・https://example.webrtc.ecl.ntt.com/sfu-videochat/index.html#
だと、正常に自分の画像は表示されますよね?仮に表示されない場合は、コードで何かしら違う部分があるのかもしれません。・https://github.com/skyway/skyway-js-sdk の examples ディレクトリ内部にあるコードを、クローンorダウンロードしてきて、ローカルWebサーバ(localhost)で動くかどうか確認するのも、切り分けになります。
-
引き続き、調べてくださりありがとうございます!
https://example.webrtc.ecl.ntt.com/sfu-videochat/index.html#
ですが、正常に自分の画像を表示されませんでした。しかし、Firefox(53.0)ならば動きました。
同様にhttps://github.com/skyway/skyway-js-sdk https://github.com/skyway/skyway-js-sdk もChromeでは動画を取得できませんが、FireFoxならば動きました。新しいタブで複数人での通信もFireFoxでならば可能です。
これはブラウザに問題有りか、もしくは別に思い当たる件としては、macOS High Sierraにアップロードしたあたりからこのような不具合が生じたため、OSの問題かと思われます。
しばらくFireFoxで開発を進めるつもりですが、もしこの不具合に思い当たるものがあればアドバイスいただけると幸いです。本当に何度もすみません。よろしくお願いします。
-
Firefoxではひとまず動作したようで良かったです。
> もしこの不具合に思い当たるものがあればアドバイスいただけると幸いです。本当に何度もすみません。よろしくお願いします。
1点だけ可能性を考えると、たとえばChromeがgetUserMediaのときに出すpermissionの設定が残っている、などもありえます。(が、可能性低そう…)
すでにご存知かと思いますが、以下の手順を参考に変更できます。
https://support.google.com/chrome/answer/2693767?hl=ja
また、Chrome Canary などの開発向けブラウザも切り分けの参考になるかもしれません。(もしかしたら、Yuko様のChrome (Stable版) が謎な状態を保持している可能性も0ではないと想定して。ただし、こちらも可能性低そうです)
Please sign in to leave a comment.
Comments
5 comments