ChromeでgetUserMediaオブジェクトを使用してビデオを再生する方法

私は、最初のチュートリアルとしてwebrtcを使用してWebアプリケーションを作成しています。getUserMediaを使用してカメラとマイクにアクセスしようとしています。ChromeでgetUserMediaオブジェクトを使用してビデオを再生する方法

ここ

が私のコードです：

のindex.html：

<html> 
    <head> 
     <meta charset="utf-8"> 
    </head> 
    <body> 
    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> 
     <a href="#" class="navbar-brand">Demo WebRTC</a> 
    </nav> 

    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-6"> 
       <h2>Réccéption</h2> 
       <video id="receiver-video" width="100%" height="400px" src=""></video> 
      </div> 

      <div class="col-sm-6"> 
       <h2>Envoi</h2> 
       <video id="emitter-video" width="100%" height="400px" src=""></video> 
       <p><button id="start">Démarrer la conversation</button></p> 
      </div> 
     </div> 

    </div> 


    <script src="app.js" charset="utf-8"></script> 


    </body> 


</html>

app.jsこのコードの

document.querySelector('#start').addEventListener('click', function function_name(e) { 

    navigator.getUserMedia = (navigator.getUserMedia || 
         navigator.webkitGetUserMedia || 
         navigator.mozGetUserMedia || 
         navigator.msGetUserMedia); 

    navigator.getUserMedia({ 
     video: true, 
     audio: true 
    }, function(stream){ 

     let emitterVideo = document.querySelector('#emitter-video') 
     emitterVideo.src = window.URL.createObjectURL(stream) 
     emitterVideo.play() 
    }, function() {}) 
})

、私はカメラとマイクへのアクセスが可能だとしますFireFoxでビデオを再生しますが、Chromeで開くとビデオが再生されず、コンソールに次のエラーがスローされます：

Uncaught (in promise) DOMException: Failed to load because no supported source was found. 
Promise (async) 
(anonymous) @ app.js:15

私はChrome Version 60.0.3112.90を使用しています。

出典

2017-08-13 Zakaria Marrah

HTTPまたはHTTPSを使用していますか？ –

使用しているチュートリアルは最新ではないと思います。 window.URL.createObjectURLの使用はお勧めしません。あなたはあなたががチュートリアルに固執したい場合は、別のオプションがありsrcObject割り当て

emitterVideo.srcObject = stream

を使用する必要があります代わりに

emitterVideo.src = window.URL.createObjectURL(stream)

を意味

。私はあなたが単にブラウザであなたのindex.htmlを開いていると仮定しています。たとえば、python -m SimpleHTTPServer 8000で配信する場合は、それも機能します。

編集：createObjectURL

URL.createObjectURL（ストリーム）にいくつかmore informationがハックです。それを使用を停止します。それを取り除く努力が進行中である。

代わりにvideo.srcObject = streamを直接使用してください。それは標準的であり、よく実装されています。

このようなローカルリソースの割り当ては、最初はURLであってはいけません.WebRTCの仕組みを理解するには、赤字です。

出典

2017-08-14 08:10:11 wpp

ありがとうWPP、それは素晴らしい仕事をした。私は何かについて聞きたいのですが、2つのピアまたはHTTPSサーバを接続するためにSTUNサーバを使用してアプリケーションを開発したいと思います。知りたいのは、ピアツーピアを開発するためのチュートリアルです最初からアプリケーション？ –

こんにちは、そこにチュートリアルがたくさんありますが、私はこれをお勧めします：https://deepstreamhub.com/tutorials/protocols/webrtc-intro/ – wpp

あなたの助けをありがとう、私はこのチュートリアルを理解するために使用webrtcを使用するための基礎、私はチュートリアルを完了するためにdeepstreamhubサーバーを使用しました。今私がやりたいことは、STUNサーバーを使用して2台の実際のコンピュータを接続することです、そして実際のアプリケーションのチュートリアルは見つかりませんでした。 2台のコンピュータを接続するためのリソースがありますか？ –

ChromeでgetUserMediaオブジェクトを使用してビデオを再生する方法

答えて

関連する問題