iOS13 getUserMedia 不适用于 chrome 和 edge

Question

我和我的朋友正在构建一个需要相机访问权限的应用程序，我们在让相机与 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'。任何关于错误的线索将不胜感激！

Answer 1

更新 - 19/11/2020

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

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

浏览器兼容性

多年来，我一直通过其他帖子（例如NotReadableError：无法启动源代码）关注这个问题。截至目前，在 Safari 独立视图 (webapp) 或 iOS Safari 应用程序之外无法访问 getUserMedia。

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

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

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

Safari 冻结

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

如果您尝试捕获前置摄像头并全屏显示，您可以查看：getUserMedia (Selfie) Full Screen on Mobile

使用 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>