JSFiddle - React, Tailwind, and code Playground

by Nikolay Vasilchuk

HTML

<video id="video" width="640" height="360" autoplay muted></video>

JavaScript

function gotDevices(devices) {
  devices = devices.filter(function(device) {
    return device.kind === 'videoinput';
  });
  var hwCam = devices.find(function(device) {	
    return /\(.+:.+\)$/.test(device.label) ? device : null;
  });
  console.log('gotDevices', devices, hwCam);
  return hwCam;
}

function gotCam(camera) {
	console.log('gotCam', camera);
  var constraints = {
  	audio: true,
    video: {
    	width: {
      	min: 640,
        ideal: 1024,
        max: 1280
      },
      height: {
      	min: 360,
        ideal: 576,
        max: 720
      },
      aspectRatio: 16/9,
    	deviceId: camera ? camera.deviceId : undefined
    }
  };
  
  constraints = {"audio":true,"video":{"mandatory":{"minWidth":640,"maxWidth":1280,"minHeight":360,"maxHeight":720,"minFrameRate":10,"maxFrameRate":60,"minAspectRatio":1.7777777777777777,"maxAspectRatio":1.7777777777777777}}};
  
  return navigator.mediaDevices.getUserMedia(constraints);
}

function gotStream(stream) {
	video.srcObject = stream;
  console.log('gotStream', stream.getVideoTracks()[0].getSettings());
}


navigator.mediaDevices.enumerateDevices()
  .then(gotDevices)
  .then(gotCam)
  .then(gotStream)
  .catch(function(e) {
  	console.warn('error', e);
	});