logo标签列表

Chrome在本地主机上无法使用getUserMedia视频。

google-chromevideohtml5-videogoogle-chrome-devtoolsgetusermedia
4
我将尝试在本地主机上使用Chrome的getUserMedia功能。
我的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上可以正常工作。

有什么想法吗？

你正在使用哪个版本的Chrome浏览器？ - Philip Tenn
3个回答
2
问题可能出在脚本执行的顺序上。当脚本被执行时，视频元素'MediaStreamVideo'将不可用。
将脚本放在最后加载是一个好习惯。同时，将代码包装在函数中，并在onload事件中执行。
将脚本放在末尾或内联中是否是良好的实践？我一直把它放在 head 部分。 - taco
推迟加载资源（脚本）直到初始页面加载完成是一个好的实践。将所有脚本放在body的末尾。 - Varunkumar Nagarajan
感谢您的回复。在正文末尾或使用jQuery的.ready()函数-这样就足够了，对吗？根据我所读的，它可以实现相同的功能。 - taco
1
不加载脚本与脚本执行的延迟加载是不同的。在页面末尾加载脚本可以确保浏览器在尝试加载脚本之前解析页面的其他部分。jquery.ready() 更像是在脚本加载完成后应用程序的起点。 - Varunkumar Nagarajan
0
如果你在使用Chrome浏览器，且正在访问一个file:/// URL链接，那么你需要在命令行中调用Chrome浏览器，并添加参数--allow-file-access-from-files。
你可能也会想查看this SO Q&A。
0

尝试简单的：

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);
   }
);
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接