Question

我正在尝试让Chrome的getUserMedia在我的localhost上运行。

我的index.php文件是：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/script.js"></script>
        <title></title>
    </head>
    <body>
<video id="MediaStreamVideo" autoplay=""></video>    
    </body>
</html>

我的script.js文件是：

var stream;
var video = document.getElementById('MediaStreamVideo'); 
navigator.webkitGetUserMedia(
    {video: true, audio: true}, // Options
    function(localMediaStream) { // Success
        stream = localMediaStream;
        video.src = window.webkitURL.createObjectURL(stream);
    },
    function(err) { // Failure
        alert('getUserMedia failed: Code ' + err.code);
    }
);

Chrome要求我允许使用相机和麦克风（我接受），但没有任何反应。

在jsfidde

上工作正常

有什么想法吗？

Answer 1

问题应该在于脚本执行的顺序。当脚本被执行时，视频元素“MediaStreamVideo”将不可用。

最后加载脚本始终是一个好习惯。另外，将代码包装在函数中并执行onload。

Answer 2

如果您使用Chrome并使用file:///网址，则需要使用--allow-file-access-from-files命令行参数调用Chrome。

您可以查看this SO Q&A。

Answer 3

只需尝试：

var stream;
var video = document.getElementById('MediaStreamVideo'); 
navigator.webkitGetUserMedia(
    {video: true, audio: true}, // Options
    function(localMediaStream) { // Success
        stream = localMediaStream;
        //video.src = window.webkitURL.createObjectURL(stream);
        video.srcObject = stream;
   },
   function(err) { // Failure
      alert('getUserMedia failed: Code ' + err.code);
   }
);

Chrome getUserMedia视频无法在localhost上运行

3 个答案: