JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="preview"></canvas>
		<video id="record" width="320" height="240" style="display:none"></video>
		<button id="state" style="display:block;max-width:120px;margin:0 auto">Record</button>

<div id="result"></div>

CSS

canvas{
    margin:1em auto;
    display:block;
    border:1px solid #aaa;
}

JavaScript

var stream = 0,
    preview = document.getElementById('preview'),
    previewCtx = preview.getContext('2d'),
    record = document.getElementById('record'),
    state = document.getElementById('state'),
    recording = false,
    result = document.getElementById('result');

preview.width = 320;
preview.height = 240;

state.addEventListener('click',function(){
    if(recording){
        stream.stop();
        stream = 0;
        recording = false;
        this.innerText = 'Record';
        XHR();
        return;
    }
    Record();
});

function draw(){
    if(stream) previewCtx.drawImage(record,0,0,preview.width,preview.height);
    
    requestAnimationFrame(draw);
}

function Record(){
    navigator.webkitGetUserMedia({video:true,audio:true},function(st){
        recording = true;
        stream = st;
        record.src = window.URL.createObjectURL(stream);
        record.play();
        draw();
        
        state.innerText = 'Stop';
    },function(){
        console.log("Nope.");
    });
}

function XHR(){
    var xhr = new XMLHttpRequest();
    xhr.open('GET',record.src); //404 ???
    xhr.responseType = 'blob';
    xhr.onload = function(e) {
        if (this.status == 200){
            //do some stuff
            result.innerText = this.response;
        }
    };
    xhr.send();
}