0

I'm capturing a video of a canvas using MediaRecorder:

(async () => {
    const stream = recordingCanvasCtx.canvas.captureStream();
    const chunks = [];
    videoRecorder.ondataavailable = e => chunks.push(e.data);
    videoRecorder.onstop = async () => {
        transcode(new Uint8Array(await (new Blob(chunks)).arrayBuffer()));
        stopRecording();
    };
    videoRecorder.start();
    setTimeout(() => {
        videoRecorder.stop();
    }, videoRecordDuration);
})();

Then transcoding using ffmpeg wasm:

const transcode = async (webcamData) => {
    const name = 'record.webm';

    ffmpeg.FS('writeFile', name, await fetchFile(webcamData));
    await ffmpeg.run('-i', name, '-codec', 'copy', '-preset', 'superfast', '-crf', '27', 'output.mp4');

    const data = ffmpeg.FS('readFile', 'output.mp4');

    const video = document.getElementById('vidpreview');
    video.src = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));

    document.getElementById('viddiv').classList.add("show");

    vidpreview.onloadeddata = function () {
        playBtn.addEventListener('click', playVidAgain);
    }
}

This all works and displays when running on a Windows laptop, but when trying to display the video.src on Android I see the following error in chrome://inspect:

ERR_REQUEST_RANGE_NOT_SATISFIABLE

Any ideas how to get this working are much appreciated

heroicsatsuma
  • 91
  • 8

1 Answers1

0

Answer to this issue can be found here - bit of a workaround, but does the job on Android yet to test for iOS

heroicsatsuma
  • 91
  • 8
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 17 '23 at 17:05