Javascript 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”。任何关于错误的线索都将不胜感激

更新-2020年11月19日

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

浏览器兼容性

多年来，我一直通过其他帖子（例如）关注这个问题。截至此日期，除Safari单机版视图（webapp）或iOS Safari应用程序外，无法访问getUserMedia

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

专门针对WKWebView提交了错误通知单。没有支持

iOS 13.4中获得getUserMedia访问权限的独立模式更新

野生动物园冷冻

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

如果您试图捕获前置摄像头并全屏显示，您可以查看：

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

函数isMobile（）{
const isAndroid=/Android/i.test（navigator.userAgent）；
const-isiOS=/iPhone | iPad | iPod/i.test（navigator.userAgent）；
返回isAndroid | | isiOS；
}
异步函数setupCamera（）{
const isPortrait=true；//此处执行逻辑
让video=document.getElementById（'video'）；
console.log（“获取视频”）；
video.setAttribute（'autoplay'，''；
video.setAttribute（'静音'，''）；
video.setAttribute（'playsinline'，''；
log（“调用getUserMedia”）；
返回新承诺（（解决）=>{
（异步（）=>{
等待navigator.mediaDevices.getUserMedia({
“音频”：错误，
“视频”：{
facingMode:'用户'，
宽度：isPortrait？480:640，
身高：isPortrait？640:480，
},
})
。然后（（流）=>{
log（“getUserMedia stream”）；
video.srcObject=流；
video.play（）；
决心（正确）；
})
.catch（（错误）=>{
log（“遇到getUserMedia错误”，err）；
决议（假）；
});
})();
});
}
（异步（）=>{
const ret=等待设置摄影机（）；
log（`initialized camera:${ret}`）
})();
html，
身体{
身高：100%；
保证金：0；
}
div{
位置：相对位置；
最小高度：100%；
最小宽度：100%；
溢出：隐藏；
对象匹配：覆盖；
}
录像带{
宽度：480px；
高度：640px；
背景色：黑色；
}