MediaRecorder - How to play chunk/blob of video while recording?

Question

I currently have a MediaStream which is being recorded using MediaRecorder. At the end of the recording after recorder.stop(), it produce a Blob and I am able to play that video back. My goal is to play not the entire video at the end, but play a chunk while recording. For the moment, a chunk is not playable while recording is not ended.

How can i do that using javascript? The final objective is to send a chunk by websocket that is playable even if recording is in action.

I am not able to bring new solutions. Can anyone help or at least explain me the things ?

What I've tried was

                navigator.mediaDevices.getUserMedia().then(function(media_stream) {
                    var recorder = new MediaRecorder(media_stream);

                    recorder.ondataavailable = event => {
                        //How to play each chunk without waiting for recorder.stop() ???
                        //event.data represent the data of a chunk (i.e. a blob)
                    };

                    recorder.start(1000);
                });

Mafia

It's possible to send those chunks to nodejs process with ffmpeg and re-stream it to the browser. You'll need some transcoding – Eyed

Thank you for that answer. Unfortunately, I don't know about ffmpeg. Moreover, I want to stay on javascript only (I don't have the level...). It's a shame to have to wait until the end of the recording to be able to play something already recorded. I really don't know how to play a chunk while recording. – Mafia

Did you resolve your problem? I have the same... – Mancini

Answer 1

This is the simplest example I could come up with.

You need a video element for playing the video as you stream it, and a record button to kick off the recording.

The script does the following

1. Checks for support
2. Creates success and error handlers for when permission is granted / denied
3. Ask permission to record
4. If permitted, calls onSuccess
5. Creates the recorder
6. Creates an onclick handler for the record button
7. If record is clicked, the onclick handler is called
8. The mediaRecorder starts recording
9. The video element is set to use the stream
10. The video element is set to autoplay so the stream shows immediately

HTML

<video id="player"></video>
<button class="record">Record</button>

JS

<script>
  const video = document.querySelector('#player');
  const record = document.querySelector('.record');

  (function start() {
    // 1. check for support
    if (! navigator.mediaDevices.getUserMedia) {
      return console.log('getUserMedia not supported on your browser!');
    }

    // 2. create onSuccess handler
    // 4. called if permitted
    const onSuccess = function (stream) {
      // 5. create the recorder
      const mediaRecorder = new MediaRecorder(stream);

      // 6. create onclick handler for record button
      // 7. called if record is clicked
      record.onclick = function() {
        // 8. starts recording
        mediaRecorder.start();
        // 9. sets video element to use the stream
        video.srcObject = stream;
        // 10. sets the video element to autoplay, otherwise user would have to click play
        video.autoplay = true;
      };
    };

    // 2. create onError handler
    const onError = function (error) {
      console.error('The following error occured: ' + error);
    };

    // 3. ask permission to record audio and video
    const constraints = {video: true, audio: true};
    navigator.mediaDevices.getUserMedia(constraints).then(onSuccess, onError);
  })();
</script>

Sunday

Answer 2

you have to use RequestData for ondataavailable to fire

Dreamadreamer

otherwise it only fires on end or stop – Dreamadreamer

Please explain how to use RequestData in your answer – Sunday