JSFiddle - React, Tailwind, and code Playground

HTML

<video autoplay></video>

CSS

a {
color: #77aaff;
text-decoration: none;
}

a:hover {
color: #88bbff;
text-decoration: underline;
}

a#viewSource {
display: block;
margin: 1.3em 0 0 0;
border-top: 1px solid #999;
padding: 1em 0 0 0;
}

div#links a {
display: block;
line-height: 1.3em;
margin: 0 0 1.5em 0;
}

@media screen and (min-width: 1000px) {
/* hack! to detect non-touch devices */
  div#links a {
		line-height: 0.8em;
  }
}

audio {
max-width: 100%;
}

body {
background: #666;
font-family: Arial, sans-serif;
margin: 0;
padding: 1.5em;
word-break: break-word;
}

button {
margin: 0 0.5em 1em 0;
width: 5.7em;
}

button[disabled] {
color: #aaa;
}

canvas {
max-width: 100%;
}

code {
font-family: 'Courier New', monospace;
letter-spacing: -0.1em;
}

div#container {
background: #000;
margin: 0 auto 0 auto;
max-width: 40em;
padding: 1em 1.5em 1.3em 1.5em;
}

div#links {
	padding: 0.5em 0 0 0;
}

h1 {
border-bottom: 1px solid #aaa;
color: white;
font-family: Arial, sans-serif;
margin: 0 0 0.8em 0;
padding: 0 0 0.4em 0;
}

h2 {
color: #ccc;
font-family: Arial, sans-serif;
margin: 1.8em 0 0.6em 0;
}

html {
/* avoid annoying page width change
when moving from the home page */
overflow-y: scroll;
}

img {
border: none;
max-width: 100%;
}

p {
color: #eee;
line-height: 1.6em;
}

p#data {
border-top: 1px dotted #666;
font-family: Courier New, monospace;
line-height: 1.3em;
max-height: 1000px;
overflow-y: auto;
padding: 1em 0 0 0;
}

p.borderBelow {
border-bottom: 1px solid #aaa;
padding: 0 0 20px 0;
}

video {
background: #222;
width: 100%;
}

@media screen and (max-width: 650px) {
  h1 {
    font-size: 24px;
  }
}

@media screen and (max-width: 550px) {
  h1 {
    font-size: 22px;
  }
}

@media screen and (max-width: 450px) {
  h1 {
    font-size: 20px;
  }
}

@media screen and (min-width: 1000px) {
  video {
    height: 540px;
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);  
    -ms-transform:  scaleX(-1);   
    -o-transform:  scaleX(-1);    
    transform: scaleX(-1);   
  }
}

JavaScript

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

var video_constraints = {mandatory: {
        maxWidth: 320,
        maxHeight: 240,
        maxAspectRatio:4/3,
        maxFrameRate:60
    },
    optional: [ ]
};

var constraints = {audio: false, video: video_constraints};
var video = document.querySelector("video");

function successCallback(stream) {
  window.stream = stream; // stream available to console
  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream;
  }
}

function errorCallback(error){
  console.log("navigator.getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);