navigator.getUserMedia not working on Android / Ch

问题:

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!

回答1:

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

回答2:

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