iOS13 getUserMedia无法在Chrome和Edge上使用 [英] iOS13 getUserMedia not working on chrome and edge

问题描述

我和我的朋友正在构建一个需要相机访问权限的应用，而让相机与iOS(我们使用iOS13)配合使用时遇到了一些问题:

Me and my friend are building an app that requires camera access and we're having some issue with getting the camera working with iOS (we're using iOS13):

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

Safari freeze right after getting the camera content, chrome and edge doesn't acquire camera access at all. Our code is as follow:

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".任何关于出问题的线索将不胜感激！

According to the console, 'a' always gets printed but never 'b'. Any clue on what's wrong will be greatly appreciated!

推荐答案

更新-19/11/2020

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

WKWebView can use getUserMedia in iOS 14.3 beta 1.

• 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.

I've been following this problem for years via other posts (e.g. NotReadableError: Could not start source) . As of this date there is no access to getUserMedia outside of Safari standalone view (webapp) or the iOS Safari app.

除了Safari以外，iOS上的任何浏览器都没有getUserMedia访问权限.这是因为他们在后台使用WKWebView.

Any browser on iOS other than Safari does not have getUserMedia access. This is because under the hood they are using WKWebView.

专门针对WKWebView提交了一个故障单.没有支持. https://bugs.webkit.org/show_bug.cgi?id=208667

A bug ticket has been filed specifically for WKWebView. No support. https://bugs.webkit.org/show_bug.cgi?id=208667

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

Updates to standalone mode gaining getUserMedia access in iOS 13.4 https://bugs.webkit.org/show_bug.cgi?id=185448#c6

Safari浏览器冻结

您传入的约束无效(例如，窗口的宽度和高度).您需要使用标准的相机分辨率，例如640x480、1280x720等.当您使用非典型分辨率的WebRTC规格时，浏览器将尝试模拟所需的Feed，但是这通常会导致相机冻结或看起来变形.

You are passing in constraints which are invalid (e.g. window width and height). You need to use standard camera resolutions e.g. 640x480, 1280x720, etc. When you use an atypical resolution WebRTC spec states the browser will try emulate your desired feed however this often results in the camera freezing or looking warped.

如果要捕获前置摄像头并使其全屏显示，可以查看:

If you are trying to capture the front camera and fullscreen it you can look at: getUserMedia (Selfie) Full Screen on Mobile

使用async/await可能还会有1或2个错误.下面是一个可以正常工作的演示(但是，在stackoverflow中，由于安全权限而会出错，但是应该在本地或托管下工作).让我知道是否可以提供进一步的帮助.

There also maybe 1 or 2 bugs with the use of async/await. Below is a demo which should work (However within stackoverflow it will error due to security permissions, but should work locally or hosted). Let me know if I can help further.

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>

这篇关于iOS13 getUserMedia无法在Chrome和Edge上使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！