navigator.getUserMedia无法在Android/Chrome上运行 [英] navigator.getUserMedia not working on Android / Chrome

问题描述

您是否知道以下代码为何在Android/Chrome上不起作用?

do you have any idea of why the following code doesn't work on 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链接:

Just in case, here you have the JSFiddle links:

https://jsfiddle.net/2yum1a0w

要获得成功，请打开Desktop/Chrome并转到部分:Result ...

For success, open with Desktop/Chrome and go to section: 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上我得到了:

And by the way, on Desktop/Firefox I get:

navigator.mediaDevices...
[object MediaDevices]

伴随以下控制台错误:

TypeError: navigator.getUserMedia is not a function

您对如何在Android/Chrome上执行此操作有任何想法吗?

Do you have any idea on how to make this work on Android/Chrome?

编辑1

根据下面Joseph Gordy的回答，我尝试了:

Based on the answer from Joseph Gordy below, I tried:

https://jsfiddle.net/wrmvn8k4/

https://jsfiddle.net/wrmvn8k4/embedded

现在可以在Desktop/Firefox获取上正常使用

which now works properly on Desktop/Firefox getting:

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

但是在Android/Chrome上我得到了:

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

谢谢！

推荐答案

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

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

在"此处

这篇关于navigator.getUserMedia无法在Android/Chrome上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！