Chrome getUserMedia 视频无法在本地主机上运行答案

【问题标题】：Chrome getUserMedia video not working on localhostChrome getUserMedia 视频无法在本地主机上运行
【发布时间】：2013-01-31 12:40:18
【问题描述】：

我正在尝试让 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？

标签： google-chrome video html5-video google-chrome-devtools getusermedia

【解决方案1】：

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

最后加载脚本总是一个好习惯。此外，将代码包装在一个函数中并在加载时执行它。

【讨论】：

在末尾或内联包含脚本是一种好习惯吗？我一直都是在头部做的。
延迟加载资源（脚本）直到加载初始页面是一个很好的做法。将所有脚本放在正文的末尾。
感谢您的回复。在正文的末尾，或使用 jQuery's .ready() 函数 - 就足够了，对吗？根据我的阅读，它完成了同样的事情。
没有。延迟加载脚本与脚本执行不同。在正文末尾加载脚本可确保在尝试加载脚本之前浏览器解析页面的其他部分。 jquery.ready() 更像是脚本加载后应用程序的起点。

【解决方案2】：

如果您在 Chrome 中并使用file:/// URL，那么您需要使用--allow-file-access-from-files 的命令行参数调用 Chrome。

您可能想查看this SO Q&A。

【讨论】：

【解决方案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);
   }
);

【讨论】：