chrome 不支持 getUserMedia()

Posted 2023-03-14

【中文标题】chrome 不支持 getUserMedia()

【英文标题】：getUserMedia() not supported in chrome

【发布时间】：2016-03-16 22:01:27

【问题描述】：

我正在尝试使用我自己的网站使用我自己的 IP 地址运行的 getUserMedia() 访问我的网络摄像头。

在我再次尝试我的网站之前，它运行良好。我曾尝试过其他演示站点，但给出的错误是不支持 getUserMedia。

Chrome 版本 v47.0.2526.80m 32bits

如果我输入 localhost 而不是我的 ipadress，我可以访问网络摄像头。它也可以在 Firefox 中使用。

【问题讨论】：

它以前可以在不使用 SSL 的情况下工作..

是的，确实如此。周一我不得不将我的网站更改为全 SSL 才能正常工作。

如何添加 SSL？我谷歌和大多数证书需要购买..

Startssl 有免费证书.. 在我的手机上，但您可以在 Google 上找到有关 startssl 的教程

问题解决我可以创建一个本地 SSL 文件来测试我的网站使用这个mytechblog.in/wp-content/uploads/2015/09/Commands-Procedure.txt

【参考方案1】：

Chrome 要求 getUserMedia 的安全来源 (HTTPS)。

从 Chrome 47 开始，仅允许来自安全来源的 getUserMedia() 请求：HTTPS 或 localhost。

https://developers.google.com/web/updates/2015/10/chrome-47-webrtc?hl=en

【讨论】：

这仅限于移动设备吗？

【参考方案2】：

Chrome终于实现了新的 navigator.mediaDevices.getUserMedia() 方法，但他们添加了一个安全机制，可以防止来自不安全地址（非 https 或非 localhost 服务器）的调用

你会这样称呼它：

var video = document.querySelector('video');
navigator.mediaDevices.getUserMedia(video:true).then(function(mediaStream)
    window.stream = mediaStream;
    video.src = URL.createObjectURL(mediaStream);
    video.play();
);

或者你可以使用官方的 webRTC polyfill adpater.js 库。

var constraints =  video: true, audio: true ;

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => video.srcObject = stream)
  .catch(e => console.error(e));

【参考方案3】：

我不确定这是否能完全解决您的问题。但是，它可能对努力让 getUserMedia() 处于工作状态的人有所帮助。

我遇到了一个帮助我解决此问题的媒体链接。

转到：chrome://flags/#unsafely-treat-insecure-origin-as-secure

启用该选项。

此外，下面还会提供一个复选框。使用它来提供指向您的 HTTP 服务器的链接。

Referr to this image for better clarity

也提供端口号。 （在我的情况下是 8000）

来源：https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339

【讨论】：

完美答案，为我工作。一件事是我们应该添加相同的 http 主机源，否则它将无法工作。