navigator.getUserMedia not working on Android / Chrome

Question

do you have any idea of why the following code doesn't work on Android/Chrome?

It works well on Desktop/Chrome.

function console_log(data) {
 console.log(data)
 var data_str = String(data);
 var $div = $('<div></div>');
 $div.append(data_str);
 $('.console').append($div);
}
$(function(){
 var constraints = { audio: true, video:false }
 //---
 console_log('navigator.mediaDevices...');
 console_log(navigator.mediaDevices);
 //---
 // # TEST 01 #
 var userMedia = navigator.getUserMedia(constraints, function(){
  console_log('---');
  console_log('# TEST 01 # Inside Success Callback');
 }, function(err){
  console_log('---');
  console_log('# TEST 01 # Inside Error Callback');
  console_log(err);
 });
 //---
 navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
  console_log('---');
  console_log('# TEST 02 # Inside Success Callback');
 }).catch(function(err) {
  console_log('---');
  console_log('# TEST 02 # Inside Error Callback');
  console_log(err);
 });
});

body {
 font-family: arial;
 font-size: 14px;
}
.console {
 font-family: monospace;
 white-space: pre;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="console"></div>

Just in case, here you have the JSFiddle links:

https://jsfiddle.net/2yum1a0w

For success, open with Desktop/Chrome and go to section: Result...

https://jsfiddle.net/2yum1a0w/embedded

On Desktop/Chrome I get:

navigator.mediaDevices...
[object MediaDevices]
---
# TEST 01 # Inside Success Callback
---
# TEST 02 # Inside Success Callback

On Android/Chrome I get:

navigator.mediaDevices...
[object MediaDevices]
---
# TEST 01 # Inside Error Callback
NotAllowedError: Permission denied
---
# TEST 02 # Inside Error Callback
NotAllowedError: Permission denied

And by the way, on Desktop/Firefox I get:

navigator.mediaDevices...
[object MediaDevices]

along with the following console error:

TypeError: navigator.getUserMedia is not a function

Do you have any idea on how to make this work on Android/Chrome?

EDIT 1

Based on the answer from Joseph Gordy below, I tried:

https://jsfiddle.net/wrmvn8k4/

https://jsfiddle.net/wrmvn8k4/embedded

which now works properly on Desktop/Firefox getting:

navigator.mediaDevices...
[object MediaDevices]
---
# TEST # Inside Success Callback

but on Android/Chrome I get:

navigator.mediaDevices...
[object MediaDevices]
---
# TEST # Inside Error Callback
NotAllowedError: Permission denied

Thanks!

Same problem. `Permission denied` w/out asking.. – Vadym Sep 25 '18 at 14:14 — Vadym, Sep 25 '18 at 14:14

score 34 · Accepted Answer · answered Sep 25 '18 at 14:23

34

I've had the same problem. Mobile browser even haven't asked about permissions. And the reason was SSL! You have to use secure connection

Check "Secure context required" section here

answered Sep 25 '18 at 14:23

Vadym

1,444
21
37

1

I have this problem with a fully secure https connection. – B T Oct 06 '19 at 17:02
If it's a problem with SSL, then how did you solve it? – AG_HIHI Jan 03 '20 at 14:37
Have you guys found any solution for this problem ? @AhmedGhrib – Aliy Mar 30 '20 at 17:36
it is any solution to this problem? im stuck in a same escenario. does anyone resolve it?... how? – Sergio Villalobos Apr 17 '20 at 20:08
Install an SSL certificate to fix. Lookup a free certificate from Certbot. – Allen Gingrich Nov 26 '20 at 01:52

Joseph Gordy · Answer 2 · 2018-08-15T19:38:02.103

3

According to MDN, navigator.getUserMedia() is deprecated and isn't supported on Android/Chrome and some newer browser versions. Use navigator.mediaDevices.getUserMedia() instead. You can check browser compatibility below.

MDN Navigator.getUserMedia browser check

Here's a partial example I've used to access the camera for video streaming in a past project. The browser should ask the user for access on the device.

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  navigator.mediaDevices.getUserMedia({ audio: false, video:  cameraOrientation })
    .then(function(stream) {
      if ("srcObject" in video) {
          video.srcObject = stream;
        } else {
          video.src = window.URL.createObjectURL(stream);
        }
        video.onloadedmetadata = function(e) {
          video.play();
        };
    });
};

edited Aug 15 '18 at 19:38

answered Aug 15 '18 at 17:47

Joseph Gordy

106
1
7

3

now it works on `Desktop/Firefox` but still not working on `Android/Chrome`, please, check my `EDIT 1` on my original post for more details. Thanks! – David Smith Aug 15 '18 at 18:53
On android, Chrome should show a notification asking for permission from the user to be able to access that media (In your case it looks like the microphone). Google doesn't want a site or app to access the camera or microphone without the users permission. The `Permission denied` makes me think the notification was blocked or did not show. – Joseph Gordy Aug 15 '18 at 19:27
1

Just tested the `https://jsfiddle.net/wrmvn8k4/embedded` on my Android device. I received the notification and after giving the site permission, it successfully accessed my microphone. It also gave me this on the screen: `navigator.mediaDevices... [object MediaDevices] --- # TEST # Inside Success Callback` – Joseph Gordy Aug 15 '18 at 19:36
did you try `Android/Chrome` or `Android/Native browser`?. It works for me on the second case. – David Smith Aug 15 '18 at 20:13
I have faced the same issue : https://stackoverflow.com/questions/59579227/how-to-stream-webcam-into-mobile-browser-by-using-reactjs . But, I did not find a solution yet. – AG_HIHI Jan 03 '20 at 14:32

Code Awesome · Answer 3 · 2022-02-05T17:51:26.173

1

Well, I was also having the same problem, But I solved it, My camera was blocked, U might have blocked it too, Go to settings and check the site settings,

I hope it helps U

edited Feb 05 '22 at 17:51

answered Jun 06 '21 at 19:52

Code Awesome

181
1
5

navigator.getUserMedia not working on Android / Chrome

3 Answers3

Linked