Ломается файл при записи JS getUserMedia
Использую для записи видео скрипт, все исправно записывается и сохраняется на сервер в необходимом формате. Но работает это только в сафари. При попытке провести теже манипуляции с планшета под управлением андройд - файл ломается и не поддается прокрутке. В чем может быть проблема?
function start_video_Recording() {
//To stores the recorded media
let chunks = [];
const startBtn=document.getElementById("video_st");
const endBtn=document.getElementById("video_en");
// Access the camera and microphone
navigator.mediaDevices.getUserMedia({audio: true, video: true})
.then((mediaStreamObj) => {
// Create a new MediaRecorder instance
const medRec =new MediaRecorder(mediaStreamObj);
window.mediaStream = mediaStreamObj;
window.mediaRecorder = medRec;
medRec.start();
//when recorded data is available then push into chunkArr array
medRec.ondataavailable = (e) => {
chunks.push(e.data);
};
//stop the video recording
medRec.onstop = () => {
const blobFile = new Blob(chunks, { type:'video/mp4; codecs="avc1.424028, mp4a.40.2"' });chunks = [];
let fd = new FormData();
fd.append('vid', blobFile);
sendVoice(fd);
// create video element and store the media which is recorded
const recMediaFile = document.createElement("video");
recMediaFile.controls = true;
const RecUrl = URL.createObjectURL(blobFile);
//keep the recorded url as source
recMediaFile.src = RecUrl;
document.getElementById(`vid-recorder`).append(recMediaFile);
};
document.getElementById("vidBox").srcObject = mediaStreamObj;
startBtn.disabled = true;
endBtn.disabled = false;
});
}
function stop_Recording(end, start) {
//stop all tracks
window.mediaRecorder.stop();
window.mediaStream.getTracks() .forEach((track) => {track.stop();});
//disable the stop button and enable the start button
end.disabled = true;
start.disabled = false;
}
function save(){
let fd = new FormData();
fd.append('vid', blobFile);
sendVoice(fd);
}
async function sendVoice(form) {
let promise = await fetch('voice.php', {
method: 'POST',
body: form});
}