CODEWITHSUNDEEP
javascripthtml5-videohtml5-audio
quarks
quarks

Reputation: 35272

MediaRecorder 'ondataavailable' event not firing

Here' my complete code for displaying and live recording audio and video (and later uploading the blob chunk into the server):

$(function () {
    var handleSuccess = function(stream) {

        var player = document.querySelector("#vid-user");
        player.srcObject = stream;

        console.log("Starting media recording")
        var options = {mimeType: 'video/webm'};
        var recordedChunks = [];
        var mediaRecorder = new MediaRecorder(stream, options);

        mediaRecorder.ondataavailable = function(e) {
            console.log("Data available")
            if (e.data.size > 0) {
                recordedChunks.push(e.data);
                var url = URL.createObjectURL(new Blob(recordedChunks));
                console.log("URL: " + url)
            }
        }

        mediaRecorder.start();
    };
    navigator.mediaDevices.getUserMedia({ audio: true, video: true })
        .then(handleSuccess)
})

The video playback works, but the problem is that the mediaRecorder.ondataavailable is not triggered/called. What could be the problem here?

Upvotes: 16

Views: 10345

Answers (3)

BReddy
BReddy

Reputation: 437

Solution according to the documentation (https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder): Use MediaRecorder.start("time in milliseconds") to trigger 'dataavailable' event at the specified interval AND/OR use setTimeout(MediaRecorder.requestData(), "time in milliseconds"). I have a jsFiddle example here (not complete code, check the console messages only).

Upvotes: 2

quarks
quarks

Reputation: 35272

The solution is to set

mediaRecorder.start(1000); // where 1000 is the interval

Upvotes: 9

chrisguttandin
chrisguttandin

Reputation: 9076

The start() method takes an optional parameter called timeslice. Unless you specify that parameter the dataavailable event only fires after you call stop() on the MediaRecorder.

https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/start

Upvotes: 38

Related Questions