在iOS Safari上使用getUsermedia访问麦克风

Question

我正尝试使用getUserMedia在iOS Safari上访问麦克风。以下是我的代码片段。

if (navigator.mediaDevices === undefined) {
  navigator.mediaDevices = {};
}

if (navigator.mediaDevices.getUserMedia === undefined) {
  navigator.mediaDevices.getUserMedia = function(constraints) {
    // First get ahold of the legacy getUserMedia, if present
    let getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

    // Some browsers just don't implement it - return a rejected promise with an error
    // to keep a consistent interface
    if (!getUserMedia) {
      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
    }

    // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
    return new Promise(function(resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
    });
  }
}

navigator.mediaDevices.getUserMedia({
  audio: true
}).then(function(stream) {
  successCallBack(.......);
}).catch(function(error) {
  debug.log(error);
  ..........
});

然而，这个承诺总是会遇到一个错误，更具体地说是一个OverConstraintError（超出限制错误）。

{message: "Invalid constraint", constraint: ""}

这种行为是iOS Safari独有的，在其他浏览器（Chrome，Firefox，Safari osX）上都可以正常工作。实际上，我的问题很像这个问题 => 如何解决iOS 11 Safari getUserMedia“无效约束”问题，但我并不想使用相机，唯一关心的是麦克风。

我正在使用真正的iPhone进行测试（5和X，均已更新到最新版本），因此与iPhone模拟器无关。

对麦克风的访问权限已被授予，并且权限请求弹出窗口也显示出来了，因此不是权限问题。

- Joey Reinders

---

您是否正在使用私密浏览模式？在私密浏览模式下，某些功能如本地存储将受限制。如果使用 UIWebView 而非 WKWebView，则其他一些功能也将无法使用。 - Jesper

我应该在我的帖子中提到，但我没有使用私人浏览进行测试。实际上，我已经注意到一些东西在私人浏览中不可用。 - Joey Reinders

它已经解决了吗？ - Towkir

@TowkirAhmet，目前这个问题还没有解决。 - Joey Reinders

Answer 1

这个问题可能与标题为获取媒体失败，当没有找到设备时出现OverConstrainedError 的错误报告有关：

https://bugs.webkit.org/show_bug.cgi?id=177126

这里是您在Codepen上运行的代码。正如您所述，音频已启用并可以正常工作。请注意，enumerateDevices()调用返回一个空数组。如错误所述，这会导致您提出的问题：

.catch(function(error) {
  navigator.mediaDevices.enumerateDevices().then(devices=>{console.log(devices)});
  console.log('error: ',error);
});

https://codepen.io/anon/pen/rQWRyZ?editors=0011

- Randy Casburn

---

问题看起来像是WebKit问题中所述的那样。我唯一的问题是这个问题不一致，它时有时无。 - Joey Reinders

Answer 2

WebRTC或getUserMedia存在一些问题，并且在所有平台上都不能像您期望的那样工作 - 在三星S5中也存在与相机检测相同的问题，但相同的代码在较新的设备上失败了。

我的建议是使用webrtc adapter js。 尝试简单地包含此脚本：

<script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.4.0/adapter.js" type="text/javascript"></script>

在使用getUserMedia API之前，我认为99%的问题都会消失。

- Macko