如何在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对象播放视频

回答

相关问题