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);
  }

那么，要通过移动浏览器访问permision，我还需要添加其他任何东西吗？谢谢。

Answer 1

从Chrome 48开始，如果协议不是HTTPS，则对getUserMedia的调用将被忽略。 localhost除外，localhost仍接受用于开发目的的不安全HTTP。

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

诸如Create React App之类的样板允许您使用HTTPS启动开发服务器：

HTTPS = true npm start

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

1 个答案: