75 lines
2.3 KiB
JavaScript
75 lines
2.3 KiB
JavaScript
|
/*
|
||
|
|
* Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
|
||
|
|
*
|
||
|
|
* Use of this source code is governed by a BSD-style license
|
||
|
|
* that can be found in the LICENSE file in the root of the source
|
||
|
|
* tree.
|
||
|
|
*/
|
||
|
|
|
||
|
|
'use strict';
|
||
|
|
|
||
|
|
const videoElement = document.querySelector('video');
|
||
|
|
const videoSelect = document.querySelector('select#videoSource');
|
||
|
|
const resizableElements = document.querySelectorAll(".video_sized")
|
||
|
|
const selectors = [ videoSelect];
|
||
|
|
|
||
|
|
|
||
|
|
function gotDevices(deviceInfos) {
|
||
|
|
// Handles being called several times to update labels. Preserve values.
|
||
|
|
const values = selectors.map(select => select.value);
|
||
|
|
selectors.forEach(select => {
|
||
|
|
while (select.firstChild) {
|
||
|
|
select.removeChild(select.firstChild);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
for (let i = 0; i !== deviceInfos.length; ++i) {
|
||
|
|
const deviceInfo = deviceInfos[i];
|
||
|
|
const option = document.createElement('option');
|
||
|
|
option.value = deviceInfo.deviceId;
|
||
|
|
if (deviceInfo.kind === 'videoinput') {
|
||
|
|
option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
|
||
|
|
videoSelect.appendChild(option);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
selectors.forEach((select, selectorIndex) => {
|
||
|
|
if (Array.prototype.slice.call(select.childNodes).some(n => n.value === values[selectorIndex])) {
|
||
|
|
select.value = values[selectorIndex];
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
|
||
|
|
|
||
|
|
|
||
|
|
function gotStream(stream) {
|
||
|
|
window.stream = stream; // make stream available to console
|
||
|
|
videoElement.srcObject = stream;
|
||
|
|
let track = stream.getTracks()[0]
|
||
|
|
let settings = track.getSettings()
|
||
|
|
resizableElements.forEach( el => { el.width = settings.width; el.height = settings.height; } )
|
||
|
|
// Refresh button list in case labels have become available
|
||
|
|
return navigator.mediaDevices.enumerateDevices();
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleError(error) {
|
||
|
|
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
|
||
|
|
}
|
||
|
|
|
||
|
|
function start() {
|
||
|
|
if (window.stream) {
|
||
|
|
window.stream.getTracks().forEach(track => {
|
||
|
|
track.stop();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
const videoSource = videoSelect.value;
|
||
|
|
const constraints = {
|
||
|
|
video: {deviceId: videoSource ? {exact: videoSource} : undefined}
|
||
|
|
};
|
||
|
|
navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
videoSelect.onchange = start;
|
||
|
|
|
||
|
|
start();
|