navigator.getUserMedia 不适用于 Android / Chrome

Question

您是否知道为什么以下代码在 Android/Chrome 上不起作用？

它适用于 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>

为了以防万一，这里有 JSFiddle 链接：

https://jsfiddle.net/2yum1a0w

为了成功，打开 Desktop/Chrome 并转到部分： Result …

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

在 Desktop/Chrome 我得到：

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

在 Android/Chrome 我得到：

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

顺便说一句，在 Desktop/Firefox 我得到：

 navigator.mediaDevices...
[object MediaDevices]

以及以下控制台错误：

 TypeError: navigator.getUserMedia is not a function

你知道如何在 Android/Chrome 上工作吗？

编辑 1

根据下面 Joseph Gordy 的回答，我试过：

https://jsfiddle.net/wrmvn8k4/

https://jsfiddle.net/wrmvn8k4/embedded

现在可以在 Desktop/Firefox 上正常工作—得到：

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

但在 Android/Chrome 我得到：

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

谢谢！

原文由 David Smith 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我有同样的问题。移动浏览器甚至没有询问权限。原因是 SSL！您必须使用安全连接

在此处 选中“需要安全上下文”部分

原文由 Vadym 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

根据 MDN， navigator.getUserMedia() 已弃用，并且在 Android/Chrome 和一些更新的浏览器版本上不受支持。使用 navigator.mediaDevices.getUserMedia() 代替。您可以在下方检查浏览器兼容性。

MDN Navigator.getUserMedia 浏览器检查

这是我在过去的项目中用于访问摄像头以进行视频流传输的部分示例。浏览器应该要求用户访问设备。

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

原文由 Joseph Gordy 发布，翻译遵循 CC BY-SA 4.0 许可协议