JSFiddle - React, Tailwind, and code Playground

by Optimix

HTML

<video autoplay></video>

CSS

html,body,video {
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100%;
}
video {
    -webkit-animation-name: rotateThis;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function:ease-in-out;
}
@-webkit-keyframes rotateThis {
    0% { -webkit-transform:scale(1) rotate(0deg); }
    10% { -webkit-transform:scale(1.1) rotate(0deg); }
    60% {-webkit-transform:scale(.5) rotate(180deg); }
    100% {-webkit-transform:scale(1.1) rotate(360deg); }
}

JavaScript

var getUserMedia;
    
var getUserMedia;
var browserUserMedia =    navigator.webkitGetUserMedia    ||    // WebKit
                        navigator.mozGetUserMedia    ||    // Mozilla FireFox
                        navigator.getUserMedia;            // 2013...
if ( !browserUserMedia ) throw 'Your browser doesn\'t support WebRTC';

getUserMedia = browserUserMedia.bind( navigator );

getUserMedia(
    {
        audio: true,
        video: true
    },
    function( stream ) {
        var URL = window.URL || window.webkitURL

        var videoElement = document.getElementsByTagName('video')[0];
        videoElement.src = URL.createObjectURL( stream );
    },
    function( err ) {
        console.log( err );
    }
);