如何在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版本60.0.3112.90。

來源

2017-08-13 Zakaria Marrah

您使用HTTP還是HTTPS？ –

我猜你正在使用的教程不是最新的。不鼓勵使用window.URL.createObjectURL。

含義而非

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

你應該使用srcObject分配

emitterVideo.srcObject = 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，它運行得非常好。我想問一些問題，我想開發一個應用程序，使用STUN服務器來連接兩個對等端，或者一個HTTPS服務器，我想知道的是，是否有任何可用的教程展示了開發一個點對點從頭開始應用？ –

嗨，這裏有很多教程，但我會推薦這一個：https：//deepstreamhub.com/tutorials/protocols/webrtc-intro/ – wpp

非常感謝您的幫助，我使用本教程瞭解使用webrtc的基礎知識，我使用deepstreamhub服務器來完成教程，現在我想要做的是使用STUN服務器連接兩臺真實計算機，並且我找不到任何實際應用程序的教程，能否請您提供給我用資源來連接兩臺電腦？ –

如何在Chrome中使用getUserMedia對象播放視頻

回答

相關問題