JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML5 Demo: getUserMedia (Treehouse Blog)</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="video-container">
    <video id="camera-stream" width="500" autoplay></video>
    <audio src="" id="audio" autoplay></audio>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

body {
  background: #F7F7F7;
  margin: 0;
  padding: 0;
}

#video-container {
  margin: 2em auto 0;
  width: 500px;
  padding: 2em;
  background: white;
  -webkit-box-shadow: 0 1px 10px #D9D9D9;
  -moz-box-shadow: 0 1px 10px #D9D9D9;
  -ms-box-shadow: 0 1px 10px #D9D9D9;
  -o-box-shadow: 0 1px 10px #D9D9D9;
  box-shadow: 0 1px 10px #D9D9D9;

  -webkit-filter: invert(1);
}

JavaScript

// Normalize the various vendor prefixed versions of getUserMedia.
navigator.getUserMedia = (navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || 
                          navigator.msGetUserMedia);


if (navigator.getUserMedia) {

  var constraints = { video: true, audio: true };

  // When getUserMedia() is called, the user will be
  // presented with a permissions dialog giving them the
  // ability to allow/deny app's access to mic/cam.
  navigator.getUserMedia(
    constraints,

    // Success callback
    function (mediaStream) {
      // console.log(mediaStream);

      var video = document.getElementById("camera-stream");
      video.src = URL.createObjectURL(mediaStream);

      var audio = document.getElementById("audio");
      audio.src = URL.createObjectURL(mediaStream);
    },

    // Error callback
    function (err) {
      console.log("Following error occurred when using getUserMedia(): " + err);
    }
  );
}
else {
  alert("No support for getUserMedia()");
}