CODEWITHSUNDEEP
javascriptreactjsreduxprogressive-web-appsgetusermedia
ganesh kaspate
ganesh kaspate

Reputation: 2685

Not able to Access the Mobile camera and Microphone using mobile browser in PWA(react js)

I am trying to access the camera and microphone through mobiles browser. It is not giving any pop up asking for permissions for accessing the same. But we are able to access the same on localhost using the laptop's browser.

I am using react js for this .

What I tried is ,

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

So, is there anything extra I need to incorporate to access the permision through mobile browser? .Thanks.

Upvotes: 2

Views: 3289

Answers (1)

jorbuedo
jorbuedo

Reputation: 2161

From Chrome 48 forward, calls to getUserMedia are ignored if the protocol isn't HTTPS. Except for localhost, which still accepts insecure HTTP for development purposes.

If you are trying to access from to your mobile to your laptop, you'll need HTTPS.

Some boilerplates like Create React App allow you t start the development server with HTTPS:

HTTPS=true npm start

Upvotes: 2

Related Questions