JSFiddle - React, Tailwind, and code Playground

by evpozdniakov

HTML

<div id="output"></div>

JavaScript

/**
 * Credits: Chad Hard: WebRTC Video Resolutions 2
 * https://webrtchacks.com/video-constraints-2/
 */

var checkingModeName,
	checkModeQueue,
	getUserMediaPrefixed,
	successCounter,
	videoModes,
	videoStream,
	videoTag;

setGumPrefix();

if (!getUserMediaPrefixed) {
	logMessage('Sorry, your browser doesn\'t support getUserMedia interface');
}
else {
	checkProtocol();
	setVideoModes();
	fillCheckModeQueue();
	checkNextInQueue();
}

function checkNextInQueue() {
	if (checkModeQueue.length) {
		var f = checkModeQueue.shift();
		if (typeof f == 'function') {
			f();
		}
	}
	else if (!successCounter) {
		logMessage('It looks like your camera is <b>blocked</b> or <b>used</b> by another application.');
	}
}

function checkProtocol() {
	if (location.protocol != 'https:') {
		logMessage('In order to avoid repetetive camera access dialog, make sure you use <b>https</b> protocol.');
	}
}

function dealWithStream(stream) {
	videoStream = stream;

	if (!videoTag) {
		videoTag = document.createElement('video');
		videoTag.addEventListener('resize', videoEventListener);
	}

	videoTag.setAttribute('width', getCheckingModeWidth());
	videoTag.setAttribute('height', getCheckingModeHeight());
	videoTag.src = window.URL.createObjectURL(stream);
}

function fillCheckModeQueue() {
	checkModeQueue = [];

	for (var modeName in videoModes) {
		checkModeQueue.push(getCheckModeClosure(modeName));
	}
}

function getCheckModeClosure(modeName) {
	var size        = videoModes[modeName],
		constraints = {
			audio: false,
			video: {
				mandatory: {
					// sourceId: camId,
					minWidth:  size[0],
					minHeight: size[1],
					maxWidth:  size[0],
					maxHeight: size[1]
				}
			}
		};

	return function() {
		checkingModeName = modeName;
		navigator[getUserMediaPrefixed](constraints, dealWithStream, handleError);
	};
}

function getCheckingModeHeight() {
	return videoModes[checkingModeName][1];
}

function getCheckingModeWidth() {
	return videoModes[checkingModeName][0];
}

function...