javascript - Media Recorder ondataavailable not fired in Fire Fox

Question

Heres my code to record the screen (with audio)

  let options = {
        video: {
            cursor: true,
            displaySurface: 'window', // monitor, window, application, browser
        },
        audio: true,
    }

    voiceStream = null;
    desktopStream = await navigator.mediaDevices.getDisplayMedia(options);

    if (audio === true) {
        voiceStream = await navigator.mediaDevices.getUserMedia({video: false, audio: true});
    }

    const tracks = [
            ...desktopStream.getVideoTracks(),
        ...utilVideo.mergeAudioStreams(desktopStream, voiceStream)
    ];

    stream = new MediaStream(tracks);
    console.log('Stream', stream)
    blobs = [];

    rec = new MediaRecorder(stream, {mimeType: 'video/'+fileFormat+'; codecs=vp8,opus'});
  
    // If our stream goes inactive (user clicked "Stop" on the browser bar), stop it
    stream.addEventListener('inactive', () => {
       console.log("inactive");

    })

    stream.getVideoTracks()[0].onended = function () {
        console.log("on ended");
    };

    rec.onstop = function(e) {
        console.log("onstop");
    };

    rec.ondataavailable = function(e) {
        console.log("data available");
        blobs.push(e.data);
        downloadVideo();
    }



stopCapture() {

        console.log("stopCapture");
     
       if(rec.state!="inactive"){
            rec.stop();
       }
        if(stream!=null){
            stream.getTracks().forEach(s => s.stop())
            stream = null;
        }
    }

downloadVideo(){
    console.log("download video");
    blob = new Blob(blobs, {type: 'video/webm'});
    let url = window.URL.createObjectURL(blob);

    let downloadLink = document.createElement('a');
    downloadLink.href = url;
    downloadLink.download = activeUser.activeProject.getName()+'.webm';

    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}

I call the stop function when the user presses escape. This works fine in Chrome, and I get a download of the file, but nothing happens in FireFox and I can see it's never getting into the ondataavailable event.

Using the console logs in Chrome when I press escape I get the "stop capture", "Stream" and then the stream, "data available", "download video"

In firefox if i look at the console I get "stop capture", "Stream" and then the stream. Nothing else

Can anyone suggest why the ondataavialable is not called the same was in Firefox as it is in Chrome?

question from:https://stackoverflow.com/questions/65900609/media-recorder-ondataavailable-not-fired-in-fire-fox

Answer 1

Waitting for answers