1

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.