JSFiddle - React, Tailwind, and code Playground

by mich

HTML

<video id="recording" autoplay></video>

CSS

#recording {
    width: 100%;
    height: 100%;
}

JavaScript

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

(function () { // SET UP CAMERA, not part of fun effects
    var getUserMedia;

    function hasGetUserMedia() {
        return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
    }

    getUserMedia = (function () {
        var vendorFunc = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
        return function () {
            return Function.prototype.apply.apply(vendorFunc, [navigator, arguments]);
        };
    }());

    if (!hasGetUserMedia()) {
        return alert('Yo, get a modern browser.');
    }

    getUserMedia({
        video: true
    }, function (localMediaStream) {
        document.getElementById('recording').src = window.URL.createObjectURL(localMediaStream);
    }, function () {
        alert('REJECTED.');
        
    });
}());