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

谢谢！

Answer 1

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

Answer 2

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

检查 "Secure context required" 部分 here

Answer 3

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

希望对你有帮助

navigator.getUserMedia 无法处理 Android / Chrome

navigator.getUserMedia not working on Android / Chrome

html

javascript

media

android