javascript - 无法在 PWA(react js) 中使用移动浏览器访问移动摄像头和麦克风

Question

我正在尝试通过手机浏览器访问摄像头和麦克风。 它不会弹出任何请求访问权限的弹出窗口。但我们可以使用笔记本电脑的浏览器在本地主机上访问相同的内容。

我为此使用 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 开始，如果协议(protocol)不是 HTTPS，则将忽略对 getUserMedia 的调用。除了 localhost 之外，它仍然接受不安全的 HTTP 进行开发。

如果您尝试从移动设备访问笔记本电脑，则需要 HTTPS。

一些样板文件(例如 Create React App)允许您使用 HTTPS 启动开发服务器:

HTTPS=true npm start