无法使用PWA中的移动浏览器访问移动摄像头和麦克风（反应js）

Question

我试图通过手机浏览器访问相机和麦克风。它没有提供任何弹出窗口，要求访问相同的权限。但我们可以使用the laptop's browser在localhost上访问相同的内容。

我正在使用react js。

我试过的是，

startCamera = () => {
    if (!('mediaDevices' in navigator)) {
      navigator.mediaDevices = {};
    }

    if (!('getUserMedia' in navigator.mediaDevices)) {
      navigator.mediaDevices.getUserMedia = function (constraints) {
        var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

        if (!getUserMedia) {
          return Promise.reject(new Error('getUserMedia is not implemented!'));
        }

        return new Promise(function (resolve, reject) {
          getUserMedia.call(navigator, constraints, resolve, reject);
        });
      }
    }
    navigator.mediaDevices.getUserMedia({
      video: { facingMode: 'user' },
      audio: true
    }).then((stream) => {
      console.log('recording started');
      return this.startRecording(stream)
    }).then(recordedChunks => {
      let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });

      this.props.getVideoUploadLink(this.props.candidateScore[0].jdId, this.props.candidateScore[0].resumeId, recordedBlob);

      this.setState({ downloadUrl: URL.createObjectURL(recordedBlob) });
    })
      .catch(console.log);
  }

那么，我需要通过移动浏览器来访问权限吗？ 。谢谢。

Answer 1

从Chrome 48转发，如果协议不是HTTPS，则会忽略对getUserMedia的调用。除了localhost，它仍然接受不安全的HTTP用于开发目的。

如果您尝试从手机访问笔记本电脑，则需要使用HTTPS。

像Create React App这样的某些样板允许您使用HTTPS启动开发服务器：

HTTPS = true npm start