javascript- Safari 上的 getUserMedia

Posted 2023-04-19

【中文标题】javascript- Safari 上的 getUserMedia

【英文标题】：javascript- getUserMedia on Safari

【发布时间】：2021-12-29 03:35:35

【问题描述】：

https://caniuse.com/?search=getusermedia

根据上面提供的链接，Safari 15 是否支持 getUserMedia？我尝试使用它来访问相机，当我在 safari 15 上对其进行测试时，它要求相机许可，在我允许许可后它仍然没有显示任何内容。链接显示 Safari 15 支持 getUserMedia/Stream API 但不支持 Navigator API: getUserMedia。下面是我的代码，我应该参考哪一个？ getUserMedia/Stream API 或 Navigator API：getUserMedia

    navigator.mediaDevices
    .getUserMedia(constraints)
    .then(function (stream) 
        track = stream.getTracks()[0];
        cameraView.srcObject = stream;
    )
    .catch(function (error) 
        console.error("Oops. Something is broken.", error);
    );

html

            <video id="camera--view" autoplay></video>

【问题讨论】：

“我应该参考哪一个” 您的代码使用的是this one，即steram API one，它在ios Safari v11+（以及独立的PWA）上受支持来自 Safar v13.4+)。 “它什么都不告诉我”是什么意思？您是否在代码中到达了履行处理程序（.then 回调）？

请注意，您对track 变量的赋值是可疑的（它可能 没问题，但这种事情通常是错误的），请参阅this question's answers 以防万一你试图过早地使用track。

@T.J.Crowder 在我允许后它只会显示白色空白。我不知道我是否达到了目标，因为我没有任何方法可以在 Iphone safari 上打开“控制台”。由于它在 Chrome 和 Firefox 上运行良好，所以我只是 假设 它没有达到要求。你能给我提供任何在 Iphone safari 上打开控制台的方法，以便我可以确保它实现与否。谢谢！

“我不知道我是否达到了目标，因为我没有任何方法可以在 Iphone safari 上打开“控制台”。” 你可以这样做 其他要查找的内容，例如向文档添加元素、执行alert、...

【参考方案1】：

你肯定想要navigator.mediaDevices.getUserMedia() 方法。它绝对适用于 iOS。另一个已弃用。 Apple 加入 getUserMedia() 方太晚了，以至于他们没有实现已弃用的 API。

您可以阅读有关查看 iOS 控制台的信息。您需要将 iOS 设备连接到 Mac，然后使用该 Mac 上的 Safari 来执行此操作。 xxx脖子疼。解释如何超出 Stack Overflow 答案的范围。

或者你可以使用alert()进行调试。

您需要在适当的时候致电cameraView.play()。这是documentation。

它建议做这样的事情。

 navigator.mediaDevices
    .getUserMedia(constraints)
    .then(function (stream) 
        cameraView.srcObject = stream
        cameraView.onloadedmetadata = function(e) 
            cameraView.play()
        
      )
    .catch(function (error) 
        alert(error)
    )

用警报代替控制台输出。

【参考方案2】：

在我允许权限后，它仍然没有显示任何内容

我通过在 html 中添加 muted 和 playinline 解决了这个问题。根据我所知道的，当视频不能内联播放和静音时，iOS 将不允许自动播放。

            <video id="camera--view" muted autoplay playsinline></video>