时间戳

首页 > 解决方案 > 与其他浏览器相比，为什么 ios Safari 上的“mediaDevices.getUserMedia”慢？

javascript - 与其他浏览器相比，为什么 ios Safari 上的“mediaDevices.getUserMedia”慢？

问题描述

我正在开发一个记录用户语音输入的网络应用程序。出于某种原因，在 ios safari 上需要很长时间才能通过 mediaDevices.getUsearMedia 获取用于录制的媒体流。我创建了以下测试页面来测量不同浏览器之间的时间延迟。如果有人能对此有所了解，我将不胜感激。

IOS Safari - 600 到 800 毫秒

Chrome 桌面 - 4 毫秒

Chrome Android - 40 到 60 毫秒

<!DOCTYPE html>
<html>
<body>

 <h1 style="margin: 100px">get user media time test</h1>
 <div width="300px" height="300px" style="margin: 100px">
     <button id="btn" style="height:100px; width:250px; font-size:25px;">call getUserMedia</button>
 </div>

 <script>
    var btn = document.getElementById("btn");
    btn.onclick = myFunction;                

    function myFunction() {
    var time1 = new Date().getTime();
    navigator.mediaDevices.getUserMedia({ video:false ,audio: true})
        .then(function(stream) {
            var time2 = new Date().getTime();
            var diff = time2-time1;
            console.log("delay "+ diff + "ms") 
        })
        .catch(function(err) {
            console.log('Error gettingUserMedia: %s', err);
        });
    }   
 </script>

</body>
</html>

标签： javascripthtmlmobile-safarigetusermediamediadevices

解决方案

每个浏览器getUserMedia都以完全不同的方式实现。虽然记住这getUserMedia是一个非常复杂的操作，但在比较每个浏览器的响应时间时存在微小的时间差异是可以理解的。

getUserMedia实际做的是：

访问权限设置 ► 检查特定站点的权限 ► 提示用户批准（如有必要） ► 访问硬件 ►stream元素建模 ► 回调。

这些步骤中的每一个都是由每个浏览器的开发人员实现的。较小的实施更改可能会导致较小的响应时间差距。

另请记住，虽然 Google Chrome 更宽容，但 iOS 对用户隐私有严格的政策，这可能会导致响应时间更长。

推荐阅读