getUserMedia working on website but not working on mobile

user_10091415 0
Viewed 7123

I am using getusermedia to record audio in my website. I've included the javascript of getusermedia. The record function works fine on website but doesn't even popup for permission in when opened on mobile.

var constraints = {
  audio: true,
  video: false
}
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
  permissiongiven = 1;
});

this is the sample code which prompt me for permission but doesn't work on mobile. How can I make it work on both device. Any help is appreciated. Thanks.

Edit :- The code is now working fine on mobile as well. Maybe it was solved from chrome updates or security certificates of website. Thanks all for help.

getusermedia android jquery javascript
6 Answers

Note that on mobile devices, you have to use SSL to use getUserMedia(). Check out if you're accessing your website with a http:// prefix. Try change it to https:// and it should work fine.

user_109268690
user_1875190

Check MDN, then make sure your browser supports it. You need Chrome for Android 52+ it says. FWIW 68 works for me.

You should also feature-check and catch errors:

if (!navigator.mediaDevices) {
  console.log("Sorry, getUserMedia is not supported");
  return;
}

navigator.mediaDevices.getUserMedia(constraints)
.then(stream => permissiongiven = 1)
.catch(error => console.log(error));

Depending on the error you get, we might learn more.

  • NotFoundError means no camera or mic detected on the device.
  • NotAllowedError means user permission not granted, or you're in an iframe or not https.
user_9189100

navigator.mediaDevices.getUserMedia Browser compatibility

enter image description here

user_67772090

i had no idea that navigator.getUserMedia was deprecated (at least for Samsung, which is what i was testing on), and i found this article on web audio with a code sample that i barely modified:

function initGetUserMedia() {
  navigator.mediaDevices = navigator.mediaDevices || {}
  navigator.mediaDevices.getUserMedia = navigator.mediaDevices.getUserMedia || function(constraints) {
    let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia not supported by this browser'));
    } else {
      return new Promise((resolve, reject) => {
        getUserMedia.call(navigator, constraints, resolve, reject);
      });
    }
  }
}

user_28603090

Try this code with ssl site:

<script>var constraints = {audio: true, video: false}
    navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {{permissiongiven = 1;});</script>
user_109827880
Related