javascript navigator.getUserMedia 不适用于 Android / Chrome

navigator.getUserMedia not working on Android / Chrome

提问by David Smith

do you have any idea of why the following code doesn't work on Android/Chrome?

你知道为什么下面的代码不起作用Android/Chrome吗？

It works well on Desktop/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>

Just in case, here you have the JSFiddle links:

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

https://jsfiddle.net/2yum1a0w

https://jsfiddle.net/2yum1a0w

For success, open with Desktop/Chromeand go to section: Result...

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

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

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

On Desktop/ChromeI get:

在Desktop/Chrome我得到：

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

On Android/ChromeI get:

在Android/Chrome我得到：

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/FirefoxI get:

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

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?

您对如何进行这项工作有任何想法Android/Chrome吗？

EDIT 1

编辑 1

Based on the answer from Joseph Gordybelow, I tried:

根据Joseph Gordy下面的答案，我尝试了：

https://jsfiddle.net/wrmvn8k4/

https://jsfiddle.net/wrmvn8k4/

https://jsfiddle.net/wrmvn8k4/embedded

https://jsfiddle.net/wrmvn8k4/embedded

which now works properly on Desktop/Firefoxgetting:

现在可以正常Desktop/Firefox获取：

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

but on Android/ChromeI get:

但Android/Chrome我得到：

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

Thanks!

谢谢！

回答by zvadym

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

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

Check "Secure context required" section here

在此处检查“需要安全上下文”部分

回答by Joseph Gordy

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()已弃用，并且在 Android/Chrome 和一些较新的浏览器版本上不受支持。使用navigator.mediaDevices.getUserMedia()来代替。您可以在下面检查浏览器兼容性。

MDN Navigator.getUserMedia browser check

MDN Navigator.getUserMedia 浏览器检查

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