I managed to code in HTML to record videos, which can work in Safari and Edge, but when I test them in Firefox, I can only download webm instead of MP4. After searching something info, I find the process of MP4 is different from that of wav. Thus, I am there to seek for help.If you need more info, please just inform me~ Any idea would be appreciated !
record codes:
function startRecording() {
clearRecordedData();
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then((stream) => {
mediaRecorder = new MediaRecorder(stream, recorderOptions);
const liveCamera = document.getElementById('liveCamera');
liveCamera.srcObject = stream;
liveCamera.muted = true;
mediaRecorder.ondataavailable = (event) => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = () => {
recordedBlob = new Blob(recordedChunks, { type: 'video/mp4' });
console.log(recordedBlob);
console.log(recordedBlob.type);
recordedVideo.src = URL.createObjectURL(recordedBlob);
enableButtons(['startRecord', 'saveRecord', 'playRecord']);
disableButtons(['stopRecord']);
};
mediaRecorder.start();
recordedTime = 0;
updateRecordedTime();
disableButtons(['startRecord']);
enableButtons(['stopRecord']);
})
.catch((error) => {
console.error('getUserMedia error:', error);
});
}
save codes:
function saveRecording() {
if (recordedBlob) {
const url = URL.createObjectURL(recordedBlob);
const a = document.createElement('a');
a.href = url;
var urlParams = new URLSearchParams(window.location.search);
var sourceValue = urlParams.get('source');
a.download = sourceValue + '.mp4';
console.log(recordedBlob);
console.log(a);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}
I try to download the recorded video as MP4 in Firefox but failed ,turn out to be webm.