CODEWITHSUNDEEP
javascriptandroidhtmlmedia
David Smith
David Smith

Reputation: 511

navigator.getUserMedia not working on Android / Chrome

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!

Upvotes: 22

Views: 35278

Answers (3)

Code Awesome
Code Awesome

Reputation: 181

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

Upvotes: 1

Vadym
Vadym

Reputation: 1555

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

Upvotes: 35

Joseph Gordy
Joseph Gordy

Reputation: 116

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

Upvotes: 3

Related Questions