2016-12-13 127 views
0

我决定学习WebRTC,但没有显示视频。请帮助。 我在做什么错?使用Chrome 我的代码:WebRTC。不显示视频

<html> 

<head> 
    <meta charset="UTF-8"> 
</head> 

<body> 
    <script> 
     window.onload = function() { 
      navigator.webkitGetUserMedia({ video: true }, getStream, noStream); 
     }; 

     function getStream(stream) { 
      var url = window.webkitURL.createObjectURL(stream);    
      var video = document.getElementById('video'); 
      video.src = url; 
     } 

     function noStream(faild) { 

     } 
    </script> 
    <video id="video" autoplay="autoplay" width="400"></video> 
</body> 

</html> 
+2

这并不真的有什么关系的WebRTC。无论如何,我不知道这是你的问题,但你的代码是过时的。考虑使用MediaDevices API以及adapter.js来刷新较旧的浏览器。 https://github.com/webrtc/adapter https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia – Brad

+0

同样https://webrtc.github.io/samples/src/ content/getusermedia/gum /显示使用getUserMedia的最新示例。 您可能还想考虑将日志记录添加到称为“noStream”的错误回调中。有一个理由,你称之为“faild”在那里,它有助于找出哪里出了问题 –

+0

@Brad谢谢,它工作 –

回答

1

工作代码:

<head> 
    <meta charset="UTF-8"></script> 
</head> 

<body> 
    <script> 
     window.onload = function() { 
      var constraints = { audio: true, video: { width: 1280, height: 720 } }; 

navigator.mediaDevices.getUserMedia(constraints) 
.then(function(mediaStream) { 
    var video = document.querySelector('video'); 
    video.srcObject = mediaStream; 
    video.onloadedmetadata = function(e) { 
    video.play(); 
    }; 
}) 
.catch(function(err) { console.log(err.name + ": " + err.message); }); 
     }; 
    </script> 
    <video id="video" autoplay="autoplay" width="400"></video> 
</body> 

</html>