0

我可以使用 getUserMedia() 访问相机，但它只能在本地工作。

我了解由于安全问题，它无法在 Web 服务器上运行。那么如何替换 getUserMedia() ？

 async function init() {
        try {
          // console.log("try");
          const stream = await navigator.mediaDevices.getUserMedia(constraints);
          handleSuccess(stream);
        } catch (e) {
          // console.log("catch");
          // console.log(e.name + ": " + e.message);
          errorMsgElement.innerHTML = `navigator.getUserMedia error:${e.toString()}`;
          //errorMsgElement.innerHTML = e.toString();
        }
      }

      // Success
      function handleSuccess(stream) {
        window.stream = stream;
        video.srcObject = stream;
      }


      // Load init
      init();
4

3 回答 3

0

正如其他人所说，如果您不在本地运行它，则需要在服务器上启用 HTTPS。getUserMedia() 功能是在浏览器上获取视频流的方法，它的工作原理是因为访问用户的麦克风和网络摄像头需要安全。

getUserMedia() 是一个强大的功能，只能在安全上下文中使用；在不安全的上下文中，navigator.mediaDevices 未定义，阻止访问 getUserMedia()。简而言之，安全上下文是使用 HTTPS 或 file:/// URL 方案加载的页面，或从 localhost 加载的页面。

在此处的文档中找到：https ://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

也许添加有关如何部署您的应用程序以及它是哪种应用程序的信息可能会有所帮助，但如果它是一个单页应用程序，我可以推荐这个带有 heroku 的 buildpack：https ://elements.heroku.com/buildpacks/heroku/ heroku-buildpack-静态

配置是一个 JSON 文件，非常简单，并且允许您启用 HTTPS。

于 2019-11-11T20:46:05.453 回答
0

您需要做的就是在您的服务器上运行正确的 HTTPS 证书。完成此操作后，您将启动并运行。

您不能“替换功能”以使其正常工作。

于 2019-11-11T20:30:37.193 回答
0

getUserMedia()当您从通过 https 提供的 Javascript 使用它时，它可以正常工作。正如您所发现的，当您不使用 https 时，它根本不起作用。

设置本地开发环境以使用 https 是众所周知的痛苦。它取决于您的开发机器的操作系统和您使用的浏览器 (Firefox)。但是，您仍然必须这样做。https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/

于 2019-11-11T20:30:48.893 回答