JSFiddle - React, Tailwind, and code Playground

by thehunmonkgroup

HTML

<div id="div">

</div>

JavaScript

let nlog = 0;
      let log = (msg) => {
        div.innerHTML += ++nlog + ". " + msg + "<br>";
        console.log(msg);
      }
      function handleError(error) {
        console.log('device enumeration error: ', error);
      }
      function getVideoStream(device) {
        var constraints = {
          audio: false,
          video: {
            deviceId: {
              exact: device.deviceId,
            },
            frameRate: {
              // Front camera fails on Android devices when ideal and min
              // are equal.
              ideal: 15,
              min: 15,
              max: 30,
            }
          },
        };
        navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
          console.info("Got stream for device", device.label);
          stream.getTracks().forEach(function(track) {
            track.stop();
          });
        }).catch(function(err) {
          console.error("Could not get stream for device", device.label, err, constraints);
        });
      }
      var setupVideo = function(devices) {
        for (var i = 0; i !== devices.length; ++i) {
          var device = devices[i];
          var wait = 1000 * i;
          if (device.kind === 'videoinput') {
            console.info("Using video device: " + device.label + "(" + device.deviceId + ")");
            setTimeout(function() {
              getVideoStream(device);
            }, wait)
          }
        }
      }
      navigator.mediaDevices.enumerateDevices().then(setupVideo).catch(handleError);