navigator.getUserMedia 在 Android / Chrome 上不起作用答案

【问题标题】：navigator.getUserMedia not working on Android / Chromenavigator.getUserMedia 在 Android / Chrome 上不起作用
【发布时间】：2018-08-15 16:04:48
【问题描述】：

您知道为什么下面的代码在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

谢谢！

【问题讨论】：

同样的问题。 Permission denied 不问..

标签： javascript android html media

【解决方案1】：

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

检查“需要安全上下文”部分here

【讨论】：

我在完全安全的 https 连接中遇到了这个问题。
如果是 SSL 的问题，那你是怎么解决的？
你们找到解决这个问题的方法了吗？ @AhmedGhrib
这个问题有什么解决办法吗？我陷入了同样的境地。有人解决它吗？...如何解决？
安装 SSL 证书进行修复。从 Certbot 查找免费证书。

【解决方案2】：

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

MDN Navigator.getUserMedia browser check

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

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

【讨论】：

现在它可以在Desktop/Firefox 上工作，但仍然不能在Android/Chrome 上工作，请查看我原来帖子上的EDIT 1 以获取更多详细信息。谢谢！
在 android 上，Chrome 应该显示一条通知，请求用户允许访问该媒体（在您的情况下，它看起来像麦克风）。 Google 不希望网站或应用在未经用户许可的情况下访问摄像头或麦克风。 Permission denied 让我觉得通知被阻止或没有显示。
刚刚在我的安卓设备上测试了https://jsfiddle.net/wrmvn8k4/embedded。我收到了通知，在授予站点权限后，它成功访问了我的麦克风。它还在屏幕上给了我这个：navigator.mediaDevices... [object MediaDevices] --- # TEST # Inside Success Callback
你试过Android/Chrome或Android/Native browser吗？它适用于第二种情况。
我也遇到过同样的问题：stackoverflow.com/questions/59579227/…。但是，我还没有找到解决方案。

【解决方案3】：

嗯，我也遇到了同样的问题不过我解决了我的相机被挡住了，你可能也挡住了它，转到设置并检查网站设置，

希望对你有帮助

【讨论】：