我有一个手机网站,可以拍一些照片(环境摄像头)并录制一段视频(用户摄像头).在桌面上,一切正常.在手机上,相机提要在Chrome和Safari上都显示.拍照也可以,但当我试图开始录制时,这个页面在MediaRecorder. start(1000)之后没有执行任何javascript代码。2这意味着指令没有显示,并且vid从来没有停止记录。
代码:
async function start()
{
var constraints = { video: { width: { ideal: 4096 }, height: { ideal: 2160 }, facingMode: 'user'}};
cameraStream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = cameraStream; video.play();
mediaRecorder = new MediaRecorder(cameraStream,{ mimeType: 'video/webm' });
mediaRecorder.addEventListener('dataavailable', function(e) {
chunks.push(e.data);
});
}
function startRecording()
{
console.log("starting recording")
takePicture();
console.log("Selfie taken")
outline.style.display = 'none';
button.style.display = 'none';
text.innerText = "Volg de instructies op het scherm.";
//WORKS FINE TILL HERE
mediaRecorder.start(1000);
//BELOW THIS IS NEVER EXECUTED
console.log("setting timeout");
setTimeout(step,2000);
}
正如所说,它可以在桌面上工作,但不能在iOS Chrome或Safari上工作。
1条答案
按热度按时间b1uwtaje1#
不幸的是,iOS上的Chrome和Safari或多或少是一样的。苹果只允许iOS上使用自己的浏览器引擎,Chrome也遵循这些规则。
Safari中的
MediaRecorder
不支持'video/webm'
,这就是为什么我猜当你构造MediaRecorder
时已经抛出了一个错误。因此,当你稍后试图调用start()
时,mediaRecorder
变量是未定义的。如果你让Safari(或者iOS上的Chrome)通过省略配置来选择mimeType本身,它可能会起作用。