JSFiddle - React, Tailwind, and code Playground

by Max Liashuk

HTML

<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"></script>
<video autoplay></video>
<audio autoplay></audio>
<button id='replay'>replay</button>
<button id='restart'>restart</button>

JavaScript

var mediaRecorder;
var video = $('video');
var audio = $('audio');

var localStream;

var start = function() {
    navigator.getUserMedia({audio: true, video: true}, function(stream) { 
        localStream = stream;
        console.log('stream', stream)
        var streamUrl = window.URL.createObjectURL(stream);
        video.attr('src', streamUrl);
        mediaRecorder = new MultiStreamRecorder(stream);
        mediaRecorder.video = video;
        mediaRecorder.audioChannels = 2;
        mediaRecorder.start(3600000);
    }, function(err) {
        console.log('failed to get user media', err);
    });
};

$('#replay').click(function() {
    mediaRecorder.ondataavailable = function(blobs) {
        video.attr('src', URL.createObjectURL(blobs.video));
        audio.attr('src', URL.createObjectURL(blobs.audio));
        console.log('blobs', blobs);
    };
    mediaRecorder.stop();
    localStream.stop();
});

$('#restart').click(start);

start();