JSFiddle - React, Tailwind, and code Playground

CSS

canvas{border: 1px solid red}

JavaScript

var video, canvas,ctx;
var settings = {
  video_constraints: {
    width: {
      min: 1200,
      max: 1920
    },
    height: {
      min: 720,
      max: 1080
    },
    require: ["width", "height"],
    facingMode: "user",
  },
  audio: false,
}

function getStream(video) {
  video.streaming = false;
  if (navigator.webkitGetUserMedia)
    setWebkitConstraints();
  navigator.getUserMedia = navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  if (!navigator.getUserMedia && !navigator.mediaDevices) {
    alert('GUM is not supported by this browser');
    return false;
  }
  var opts = {
    video: settings.video_constraints,
    audio: settings.audio
  };
  var then = function(stream) {
    if (navigator.mozGetUserMedia)
      video.mozSrcObject = stream;
    else {
      var URL = window.URL || window.webkitURL;
      video.src = URL.createObjectURL(stream);
    }
    video.play();
    loopStart(video);
  };
  var error = function(err) {
    console.log("An error occured! ", err)
    if (err.name.indexOf('Permission') == 0) return;
  };

  if (navigator.mediaDevices) {
    navigator.mediaDevices.getUserMedia(opts).then(then, error).catch(error);
  } else {
    navigator.getUserMedia(opts, then, error);
  }
};
// handle webkit old and deprecated constraint syntax
var setWebkitConstraints = function() {
  var wkConstraints = {
    mandatory: {}
  };
  var c = settings.video_constraints;
  for (var i in c) {
    switch (i) {
      case 'width':
        for (j in c[i]) {
          switch (j) {
            case 'max':
              wkConstraints.mandatory.maxWidth = c[i][j];
              break;
            case 'min':
              wkConstraints.mandatory.minWidth = c[i][j];
              break;
            case 'exact':
              wkConstraints.mandatory.minWidth = wkConstraints.mandatory.maxWidth = c[i][j];
              break;
          }
        };
        break;

      case 'height':
...