如何替换 Mozilla 中的 getUserMedia 函数？答案

【问题标题】：how can I replace the getUserMedia function in Mozilla?如何替换 Mozilla 中的 getUserMedia 函数？
【发布时间】：2019-11-11 20:14:36
【问题描述】：

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

我了解由于安全问题，它无法在网络服务器上运行。那么如何替换 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();

【问题讨论】：

标签： javascript firefox getusermedia navigator mediadevices

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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/

【讨论】：

不知道为什么他需要在他的开发环境中启用 https，getUserMedia 在 localhost 或本地文件上工作正常。

【解决方案3】：

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

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

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

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

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

【讨论】：