JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="https://webrtc.github.io/adapter/adapter.js"></script>
<video id="usr-cam"></video>

JavaScript

var aspectRatio;
var video;

window.addEventListener('DOMContentLoaded',function(){
  
  video = document.getElementById('usr-cam');

  navigator.mediaDevices.getUserMedia({video : {
	  width : {exact : 320},
	  height : {exact: 240}
  }})
  .then(function(stream){
	  
    
      if(navigator.mozGetUserMedia)
      {
        video.mozSrcObject = stream;
      }
      else
      { 
         video.srcObject = stream;
      }
      
      
      
  })
  .catch(function(e){
	  alert(e);
  });

  
});
/*

##do not worry about this section

function canPlay(){
  
  var vid = this;
  
  var width = vid.videoWidth;
  var height = vid.videoHeight;
  
  aspectRatio = width/height;
  
  var con = vid.parentNode;
  
  resize(con);
  
}


function resize(con)
{
  var vid = video;
  
  var newWidth = con.width;
  var newHeight = con.height;
  var newAspect = newWidth / newHeight;
  
  if(newAspect > aspectRatio)
  {
    
    video.videoWidth = width;
    
    var height = newHeight * aspectRatio;
    
    video.videoHeight = height;
  }
  else
  {
	video.videoHeight = height;
    
    var width = aspectRatio / newWidth;
   
    video.videoWidth = width;
  }
  
  
}*/