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

谢谢！

Answer 1

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

选中“需要安全上下文”部分here

Answer 2

根据MDN，substring已过时，Android / Chrome和某些较新的浏览器版本不支持<div class="topnav"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn">Dropdown <b>V</b></button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> <div class="main"> <h1>Fixed Top Menu</h1> <h2>Scroll this page to see the effect</h2> <h2>The navigation bar will stay at the top of the page while scrolling</h2> <h3>Dropdown Menu inside a Navigation Bar</h3> <p>Hover over the "Dropdown" link to see the dropdown menu.</p> </div> body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .topnav { background-color: #333; position: fixed; top: 0; width: 100%; display:flex; } .topnav a, .dropdown, .dropdown .dropbtn { font-size: 16px; color: white; text-align: center; text-decoration: none; } .topnav a, .dropdown .dropbtn{ padding: 14px 16px; } .dropdown .dropbtn { background-color: transparent; border: none; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: red; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } .main { padding: 16px; margin-top: 30px; height: 1500px; /* Used in this example to enable scrolling */ }。请改用navigator.mediaDevices.getUserMedia()。您可以在下面查看浏览器的兼容性。

MDN Navigator.getUserMedia browser check

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

navigator.getUserMedia()

Answer 3

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

navigator.getUserMedia无法在Android / Chrome上运行

3 个答案: