18520339/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <div class="select">
            <label for="audioSource">Audio source: </label>
            <select id="audioSource"></select>
        </div>
        <div class="select">
            <label for="videoSource">Video source: </label>
            <select id="videoSource"></select>
        </div>
        <video autoplay muted></video>
        <img id="screenshot" />
    </div>
    <script async src="script.js"></script>
    <script
        src="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js"
        data-cf-settings="a1a3bea7b4d71449458faca3-|49"
        defer=""
    ></script>
</body>
</html>

## script.js
var videoElement = document.querySelector('video');
var audioSelect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');

const img = document.querySelector('#screenshot');
const canvas = document.createElement('canvas');

const gotDevices = deviceInfos => {
    window.deviceInfos = deviceInfos;
    console.log('Available input and output devices:', deviceInfos);

    for (const deviceInfo of deviceInfos) {
        const option = document.createElement('option');
        option.value = deviceInfo.deviceId;

        if (deviceInfo.kind === 'audioinput') {
            var length = `Microphone ${audioSelect.length + 1}`;
            option.text = deviceInfo.label || length;
            audioSelect.appendChild(option);
        } else if (deviceInfo.kind === 'videoinput') {
            var length = `Camera ${videoSelect.length + 1}`;
            option.text = deviceInfo.label || length;
            videoSelect.appendChild(option);
        }
    }
};

const gotStream = stream => {
    window.stream = stream;
    audioSelect.selectedIndex = [...audioSelect.options].findIndex(
        option => option.text === stream.getAudioTracks()[0].label
    );
    videoSelect.selectedIndex = [...videoSelect.options].findIndex(
        option => option.text === stream.getVideoTracks()[0].label
    );
    videoElement.srcObject = stream;
    videoElement.playsInline = true;
};

const getStream = () => {
    if (window.stream) window.stream.getTracks().forEach(track => track.stop());
    const audioSource = audioSelect.value;
    const videoSource = videoSelect.value;

    const constraints = {
        audio: { deviceId: audioSource ? { exact: audioSource } : undefined },
        video: { deviceId: videoSource ? { exact: videoSource } : undefined },
    };

    return navigator.mediaDevices
        .getUserMedia(constraints)
        .then(gotStream)
        .catch(console.log);
};

audioSelect.onchange = getStream;
videoSelect.onchange = getStream;

videoElement.onclick = () => {
    canvas.width = videoElement.videoWidth;
    canvas.height = videoElement.videoHeight;
    canvas.getContext('2d').drawImage(videoElement, 0, 0);
    img.src = canvas.toDataURL('image/jpg');
};

getStream()
    .then(() => navigator.mediaDevices.enumerateDevices())
    .then(gotDevices);

## style.css
body {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 300;
    margin: 0;
    padding: 40px 20px 20px 20px;
    word-break: break-word;
}

div#container {
    margin: 0 auto 0 auto;
    max-width: 40em;
    padding: 1em 1.5em 1.3em 1.5em;
}

select {
    width: 150px;
    margin: 0 1em 1em 0;
    position: relative;
    top: -1px;
}

audio {
    max-width: 100%;
}

video {
    background: #222;
    margin: 10px 0 0 0;
    width: 100%;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div id="container">
	<div class="select">
	<label for="audioSource">Audio source: </label>
	<select id="audioSource"></select>
	</div>
	<div class="select">
	<label for="videoSource">Video source: </label>
	<select id="videoSource"></select>
	</div>
	<video autoplay muted></video>
	<img id="screenshot" />
	</div>
	<script async src="script.js"></script>
	<script
	src="https://ajax.cloudflare.com/cdn-cgi/scripts/7089c43e/cloudflare-static/rocket-loader.min.js"
	data-cf-settings="a1a3bea7b4d71449458faca3-\|49"
	defer=""
	></script>
	</body>
	</html>
	var videoElement = document.querySelector('video');
	var audioSelect = document.querySelector('select#audioSource');
	var videoSelect = document.querySelector('select#videoSource');

	const img = document.querySelector('#screenshot');
	const canvas = document.createElement('canvas');

	const gotDevices = deviceInfos => {
	window.deviceInfos = deviceInfos;
	console.log('Available input and output devices:', deviceInfos);

	for (const deviceInfo of deviceInfos) {
	const option = document.createElement('option');
	option.value = deviceInfo.deviceId;

	if (deviceInfo.kind === 'audioinput') {
	var length = `Microphone ${audioSelect.length + 1}`;
	option.text = deviceInfo.label \|\| length;
	audioSelect.appendChild(option);
	} else if (deviceInfo.kind === 'videoinput') {
	var length = `Camera ${videoSelect.length + 1}`;
	option.text = deviceInfo.label \|\| length;
	videoSelect.appendChild(option);
	}
	}
	};

	const gotStream = stream => {
	window.stream = stream;
	audioSelect.selectedIndex = [...audioSelect.options].findIndex(
	option => option.text === stream.getAudioTracks()[0].label
	);
	videoSelect.selectedIndex = [...videoSelect.options].findIndex(
	option => option.text === stream.getVideoTracks()[0].label
	);
	videoElement.srcObject = stream;
	videoElement.playsInline = true;
	};

	const getStream = () => {
	if (window.stream) window.stream.getTracks().forEach(track => track.stop());
	const audioSource = audioSelect.value;
	const videoSource = videoSelect.value;

	const constraints = {
	audio: { deviceId: audioSource ? { exact: audioSource } : undefined },
	video: { deviceId: videoSource ? { exact: videoSource } : undefined },
	};

	return navigator.mediaDevices
	.getUserMedia(constraints)
	.then(gotStream)
	.catch(console.log);
	};

	audioSelect.onchange = getStream;
	videoSelect.onchange = getStream;

	videoElement.onclick = () => {
	canvas.width = videoElement.videoWidth;
	canvas.height = videoElement.videoHeight;
	canvas.getContext('2d').drawImage(videoElement, 0, 0);
	img.src = canvas.toDataURL('image/jpg');
	};

	getStream()
	.then(() => navigator.mediaDevices.enumerateDevices())
	.then(gotDevices);
	body {
	font-family: sans-serif;
	font-size: 18px;
	font-weight: 300;
	margin: 0;
	padding: 40px 20px 20px 20px;
	word-break: break-word;
	}

	div#container {
	margin: 0 auto 0 auto;
	max-width: 40em;
	padding: 1em 1.5em 1.3em 1.5em;
	}

	select {
	width: 150px;
	margin: 0 1em 1em 0;
	position: relative;
	top: -1px;
	}

	audio {
	max-width: 100%;
	}

	video {
	background: #222;
	margin: 10px 0 0 0;
	width: 100%;
	}