浏览器自动屏蔽 getUserMedia 函数答案

【问题标题】：Browser auto-block getUserMedia function浏览器自动屏蔽 getUserMedia 函数
【发布时间】：2013-09-12 22:49:26
【问题描述】：

我正在尝试使用 getMedia() 从我的网络摄像头获取视频和音频，但我的浏览器总是阻止该功能。我使用的是谷歌浏览器，这个图标出现在收藏图标附近：http://puu.sh/4pLAk.png

该JS为MDN示例：https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia

HTML：

    <!DOCTYPE html>
    <html>
    <body>
     <button onClick="getMedia()">Ok</button>
    <body>
    <html>

JS：

function getMedia()
{
    navigator.getMedia = ( navigator.getUserMedia ||
                       navigator.webkitGetUserMedia ||
                       navigator.mozGetUserMedia ||
                       navigator.msGetUserMedia);

navigator.getMedia (

   // constraints
   {
      video: true,
      audio: true
   },

   // successCallback
   function(localMediaStream) {
      var video = document.querySelector('video');
      video.src = window.URL.createObjectURL(localMediaStream);
      video.onloadedmetadata = function(e) {
         // Do something with the video here.
      };
   },

   // errorCallback
   function(err) {
    console.log("The following error occured: " + err);
   }

);
}

我做错了什么？

【问题讨论】：

标签： javascript html webcam getusermedia

【解决方案1】：

当系统提示您访问摄像头或麦克风并且您点击“拒绝”按钮时，Chrome 将保存该选择，以便以后在该站点上调用 getUserMedia。您需要单击您提到的视频图标并更改权限以允许相机和/或麦克风访问。请参阅this page 以了解其外观示例。

【讨论】：

你好，这个问题可以与我直接打开html文件有关吗？没有域？
@vp_arth 是的，您必须提供文件；你不能通过file://访问它：stackoverflow.com/a/13725688/2442139

【解决方案2】：

我遇到了类似的问题，但与麦克风访问有关。正如汤姆 vLine 回答的那样，如果您通过 file:// 提供文件，Chrome 会阻止设备访问（请注意，在 Microsoft Edge 和 Firefox 上，它通过 file::// 工作）。我为 Chrome 找到的一种解决方案：

在 URL chrome://version/ 中打开 chrome 类型
复制命令行中“命令行”字段的值并附加 --allow-file-access-from-files 并运行它
Chrome 打开后输入你的 file:// url。

要始终这样启动 Chrome，请右键单击 Chrome 图标，然后单击属性。在快捷方式选项卡中，将 2 中的所有命令行参数附加到目标值。

希望这对某人有所帮助:-)

【讨论】：