我正在开发一个记录用户语音输入的网络应用程序。出于某种原因,在 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>