借助 iOS Safari 上的 getUsermedia 访问麦克风答案

【问题标题】：Accessing microphone with the help of getUsermedia on iOS Safari借助 iOS Safari 上的 getUsermedia 访问麦克风
【发布时间】：2019-04-08 14:04:03
【问题描述】：

我正在尝试在 getUserMedia 的帮助下访问 iOS Safari 上的麦克风。您可以在下面找到我的代码的 sn-p。

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

然而，promise 总是会捕获一个错误，更具体地说是 OverConstraintError。

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

这种行为对于 iOS Safari 来说是独一无二的，在所有其他浏览器（Chrome、Firefox、Safari osX）上它都可以正常工作。实际上我的问题很像这个=> How to resolve iOS 11 Safari getUserMedia "Invalid constraint" issue，但我并没有尝试使用相机。我唯一感兴趣的是麦克风。

我正在使用真正的 iPhone（5 和 X，都更新到最新版本）进行测试，因此它没有链接到 iPhone 模拟器。

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

【问题讨论】：

您在使用隐私浏览吗？某些功能（例如本地存储）在隐私浏览中受到限制。如果使用UIWebView 而不是WKWebView，则其他功能不可用。
我应该在我的帖子中提到它，但我没有测试隐私浏览。确实，我已经注意到有些东西在隐私浏览中是不可用的。
解决了吗？
@TowkirAhmet，不，还没有解决。

标签： javascript ios safari

【解决方案1】：

此问题可能与标题为getUserMedia failed with an OverConstrainedError when no devices are found的错误报告有关：

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

【讨论】：

确实问题看起来像 webkit 问题中所述的问题。我唯一的问题是问题不一致，它来来去去。

【解决方案2】：

web rtc 或 getusermedia 有一些问题，它不能像您期望的那样在所有平台上运行 - 在摄像头检测方面有同样的问题，就像在三星 s5 中一样，相同的代码工作正常，但在较新的设备下它失败了。

我的建议是使用 webrtc 适配器 js。尝试简单地包含这个脚本：

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

在你使用 getusermedia api 之前。我认为 99% 的问题都会消失。

【讨论】：