iOS端Chrome浏览器报getUserMedia未在当前浏览器实现错误如何解决

• 苹果在iOS 14.3之前的系统版本中，强制要求所有第三方浏览器使用WKWebView内核，同时系统层封锁了非Safari应用的媒体设备调用权限，只有系统自带的Safari浏览器可以直接访问navigator.mediaDevices相关接口。
• iOS端Chrome在iOS15之前，受限于系统的权限限制，即使自身实现了getUserMedia相关逻辑，也无法调用系统的音频/视频采集能力，因此会抛出「getUserMedia is not implemented in this browser」的报错。
• iOS15之后苹果放开了第三方浏览器的媒体设备访问权限，因此iOS15及以上版本的Chrome可以正常运行相关代码，而所有版本的Safari不受该权限限制，所以可以正常调用。

• 最低成本兼容方案：对iOS15以下的Chrome浏览器用户做版本判断，引导用户切换到Safari浏览器使用相关功能，判断逻辑可以参考以下代码：

function isLowVersioniOSChrome() {
  const ua = window.navigator.userAgent.toLowerCase();
  // 判断是否是iOS设备
  const isIOS = /iphone|ipad|ipod/.test(ua);
  // 判断是否是iOS端Chrome浏览器
  const isChrome = /crios/.test(ua);
  // 获取iOS主版本号
  const iosVersionMatch = ua.match(/os (\d+)_/);
  const iosMajorVersion = iosVersionMatch ? +iosVersionMatch[1] : 15;
  return isIOS && isChrome && iosMajorVersion < 15;
}

// 调用逻辑
if (isLowVersioniOSChrome()) {
  alert('当前浏览器不支持音频调用，请切换至Safari浏览器使用');
} else {
  // 原有媒体设备调用逻辑
  window.navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
    console.log(stream)
  }).catch(function (err) {
      console.error(err);
  });
}

• 备选兼容方案：如果业务必须在iOS12-14的Chrome中实现音频采集，可以考虑把功能封装到原生iOS应用中，通过WebView桥接的方式调用系统音频能力，不过改造成本相对较高。
• 通用注意事项：所有媒体设备相关的接口调用必须在HTTPS协议或者localhost本地调试环境下触发，同时必须由用户的主动交互（比如点击按钮）触发调用，不能在页面加载完成后自动调用，否则即使是支持的浏览器也会抛出权限错误。

内容的提问来源于stack exchange，提问作者Nirav