在网站上使用getUserMedia可以正常工作，但在移动设备上却无法正常工作。

Question

我在我的网站上使用getusermedia来录制音频。我已经包含了getusermedia的javascript代码。在网站上，录制功能运行正常，但在移动设备上打开时甚至不会弹出权限请求框。

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

这是一个示例代码，它提示我授权，但在移动设备上无法正常工作。 我该如何让它同时在两种设备上工作？感谢任何帮助。

编辑：- 现在该代码在移动设备上也能正常工作。 可能是来自Chrome更新或网站安全证书的解决方案。 感谢大家的帮助。

- shubham kakade

---

你使用的是哪个移动操作系统/浏览器？ - Hassan Voyeau

我正在使用安卓系统的棉花糖版本和谷歌浏览器。 - shubham kakade

下面的回答有帮助吗？ - Hassan Voyeau

谢谢大家，但问题已经自动解决了。我猜测Chrome应用程序已经更新了其功能，允许从网站访问麦克风。 - shubham kakade

Answer 1

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

- Juntong Chen

---

尝试在本地开发，但无法使用https，太遗憾了。 - pmiranda

Answer 2

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

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

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

- Hassan Voyeau

---

这不对。自从52版本以来，MDN在Chrome for Android中就有getUserMedia了。 - jib

这个有进展了吗？ - Hassan Voyeau

进展是关于什么的？据我所知，caniuse是错误的，而MDN是正确的。例如，在Chrome for Android 68上Wfm。 - jib

OP有没有在解决他的问题方面取得任何进展？ - Hassan Voyeau

Answer 3

查看MDN，然后确保您的浏览器支持它。它说您需要Chrome for Android 52+。FWIW 68 对我有效。

您还应该进行特性检查并捕获错误：

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。

- jib

Answer 4

尝试在 SSL 网站上使用此代码：

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

- vikram prajapat

Answer 5

我之前不知道 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);
      });
    }
  }
}

- therightstuff

Answer 6

获取媒体设备的浏览器兼容性

- Rajkumar