iOS13 getUserMedia 不适用于 Chrome 和 Edge

我和我的朋友正在构建一个需要相机访问权限的应用程序，但我们在让相机与 iOS 配合使用时遇到了一些问题（我们使用的是 iOS13）：

Safari 在获取相机内容后立即冻结，chrome 和 Edge 根本无法获取相机访问权限。我们的代码如下：

let windowWidth=window.innerWidth;
let windowHeight=window.innerHeight;

function isMobile() {
    const isAndroid = /Android/i.test(navigator.userAgent);
    const isiOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
    return isAndroid || isiOS;
}

async function setupCamera() {
    video = document.getElementById('video');
    console.log("a")

    video.setAttribute('autoplay', '');
    video.setAttribute('muted', '');
    video.setAttribute('playsinline', '');

    const stream = await navigator.mediaDevices.getUserMedia({
        'audio': false,
        'video': {
            facingMode: 'user',
            width: mobile ? undefined : windowWidth,
            height: mobile ? undefined : windowHeight
        },
    });
    console.log("b")
    video.srcObject = stream;

    return new Promise((resolve) => {
        video.onloadedmetadata = () => {
            resolve(video);
        };
    });
}

根据控制台，“a”总是被打印，但永远不会被打印“b”。任何有关问题所在的线索将不胜感激！

更新 - 19/11/2020

WKWebView 在 iOS 14.3 beta 1 中可以使用 getUserMedia。

• https://bugs.webkit.org/show_bug.cgi?id=208667 https://bugs.webkit.org/show_bug.cgi?id=208667
• https://bugs.chromium.org/p/chromium/issues/detail?id=752458 https://bugs.chromium.org/p/chromium/issues/detail?id=752458

浏览器兼容性

多年来我一直通过其他帖子关注这个问题（例如NotReadableError：无法启动源 https://stackoverflow.com/questions/48775154/notreadableerror-could-not-start-source/48993023#48993023）。截至目前，无法在 Safari 独立视图（Web 应用程序）或 iOS Safari 应用程序之外访问 getUserMedia。

iOS 上除 Safari 之外的任何浏览器都没有 getUserMedia 访问权限。这是因为他们在幕后使用 WKWebView。

已专门针对 WKWebView 提交了错误单。没有支持。https://bugs.webkit.org/show_bug.cgi?id=208667 https://bugs.webkit.org/show_bug.cgi?id=208667

更新独立模式，在 iOS 13.4 中获得 getUserMedia 访问权限https://bugs.webkit.org/show_bug.cgi?id=185448#c6 https://bugs.webkit.org/show_bug.cgi?id=185448#c6

野生动物园冷冻

您传递的约束无效（例如窗口宽度和高度）。您需要使用标准相机分辨率，例如640x480、1280x720 等。当您使用非典型分辨率时，WebRTC 规范规定浏览器将尝试模拟您所需的源，但这通常会导致相机冻结或看起来扭曲。

如果您尝试捕获前置摄像头并将其全屏显示，您可以查看：getUserMedia（自拍）手机全屏 https://stackoverflow.com/questions/62538271/getusermedia-selfie-full-screen-on-mobile/62577359#62577359

使用 async/await 可能还存在 1 或 2 个错误。下面是一个应该可以工作的演示（但是在 stackoverflow 中，由于安全权限，它会出错，但应该可以在本地或托管工作）。如果我可以提供进一步帮助，请告诉我。

function isMobile() {
  const isAndroid = /Android/i.test(navigator.userAgent);
  const isiOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
  return isAndroid || isiOS;
}

async function setupCamera() {
  const isPortrait = true; // do logic here

  let video = document.getElementById('video');

  console.log("Getting video");

  video.setAttribute('autoplay', '');
  video.setAttribute('muted', '');
  video.setAttribute('playsinline', '');

  console.log("Calling getUserMedia");

  return new Promise((resolve) => {
    (async() => {
      await navigator.mediaDevices.getUserMedia({
          'audio': false,
          'video': {
            facingMode: 'user',
            width: isPortrait ? 480 : 640,
            height: isPortrait ? 640 : 480,
          },
        })
        .then((stream) => {
          console.log("Got getUserMedia stream");
          video.srcObject = stream;
          video.play();
          resolve(true);
        })
        .catch((err) => {
          console.log("Encountered getUserMedia error", err);
          resolve(false);
        });
    })();
  });

}

(async() => {
  const ret = await setupCamera();
  console.log(`Initialised camera: ${ret}`)
})();

html,
body {
  height: 100%;
  margin: 0;
}

div {
  position: relative;
  min-height: 100%;
  min-width: 100%;
  overflow: hidden;
  object-fit: cover;
}

video {
  width: 480px;
  height: 640px;
  background-color: black;
}

<div><video id="video"></video></div>