getUserMedia 在网站上工作但不在移动设备上工作

Question

我正在使用 getusermedia 在我的网站上录制音频。我包括了 getusermedia 的 javascript。录制功能在网站上可以正常使用，但在手机上打开时甚至没有弹出权限。

var constraints = {
  audio: true,
  video: false
}
navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
  permissiongiven = 1;
});

这是提示我获得许可但不适用于移动设备的示例代码。我怎样才能让它在两个设备上工作。任何帮助表示赞赏。谢谢

编辑：- 该代码现在在移动设备上也能正常工作。也许它是通过 chrome 更新或网站的安全证书解决的。感谢大家的帮助。

Answer 1

我发现这个网站对回答这个问题很有用

https://caniuse.com/#search=getusermedia

它说 getUserMedia 仅从 Chrome 支持 Android 版本 70（2018 年 10 月 16 日发布）

Answer 2

检查MDN, then make sure your browser supports it. You need Chrome for Android 52+ it says. FWIW 68 works for me。

您还应该进行功能检查并发现错误：

if (!navigator.mediaDevices) {
  console.log("Sorry, getUserMedia is not supported");
  return;
}

navigator.mediaDevices.getUserMedia(constraints)
.then(stream => permissiongiven = 1)
.catch(error => console.log(error));

根据您遇到的错误，我们可能会了解更多信息。

NotFoundError 表示设备上未检测到摄像头或麦克风。
NotAllowedError 表示未授予用户权限，或者您在 iframe 中或不是 https。

Answer 3

navigator.mediaDevices.getUserMedia 浏览器兼容性

Answer 4

我不知道 navigator.getUserMedia 已被弃用（至少对于三星而言，这是我正在测试的），我发现 this article on web audio 有一个我几乎没有修改的代码示例：

function initGetUserMedia() {
  navigator.mediaDevices = navigator.mediaDevices || {}
  navigator.mediaDevices.getUserMedia = navigator.mediaDevices.getUserMedia || function(constraints) {
    let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia not supported by this browser'));
    } else {
      return new Promise((resolve, reject) => {
        getUserMedia.call(navigator, constraints, resolve, reject);
      });
    }
  }
}

Answer 5

请注意，在移动设备上，您必须使用 SSL 才能使用 getUserMedia()。检查您是否使用 http:// 前缀访问您的网站。尝试将其更改为 https://，它应该可以正常工作。

Answer 6

使用 ssl 站点尝试此代码：

<script>var constraints = {audio: true, video: false}
    navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {{permissiongiven = 1;});</script>

getUserMedia 在网站上工作但不在移动设备上工作

getUserMedia working on website but not working on mobile

javascript

jquery

android

getusermedia