Merge pull request #34 from pegler/switch-device

allow switching devices when available
elninotech · Jul 3, 2019 · df396a7 · df396a7
2 parents 713abbd + 8741547
commit df396a7
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 7 deletions.
diff --git a/modules/icons.js b/modules/icons.js
@@ -9,5 +9,6 @@ export default {
 	uploading: `<i class="fas fa-spinner fa-4x fa-spin fa-fw"></i><br><br>`,
 	uploaded: `<i class="fas fa-check-circle fa-4x fa-fw"></i><br><br>`,
 	error: `<i class="fas fa-exclamation-triangle fa-4x fa-fw"></i><br><br>`,
-	file: `<i class="fas fa-file fa-fw"></i>`
+	file: `<i class="fas fa-file fa-fw"></i>`,
+	switchDevice: `<i class="fas fa-sync fa-fw"></i>`,
 };
diff --git a/modules/services.js b/modules/services.js
@@ -96,7 +96,10 @@ export default scope => {
 						<canvas id="cameraCanvas"></canvas>
 					</div>
 					<div class="bottom-buttons">
-						<div class="cta"><button class="primary-button" id="clickButton">${icons.camera} &nbsp;${i18n.camera.click}</button></div>
+						<div class="cta">
+                            <button class="primary-button secondary" id="switchDeviceButton" style="display: none;">${icons.switchDevice}</button>
+                            <button class="primary-button" id="clickButton">${icons.camera} &nbsp;${i18n.camera.click}</button>
+                        </div>
 					</div>
 				</div>
 			`,

diff --git a/modules/services/camera.js b/modules/services/camera.js
@@ -6,10 +6,14 @@ export default scope => {
 	const previewWindow = scope.modalElement.querySelector(".camera-container .preview");
 	let video = null;
 	let canvas = null;
+	let switchDeviceButton = null;
 	let startbutton = null;
 	let width = 0;
 	let height = 0;
+	let videoDevices = [];
+	let selectedDeviceIndex = null;
 	video = scope.modalElement.querySelector("#cameraVideo");
+	switchDeviceButton = scope.modalElement.querySelector('#switchDeviceButton');
 	canvas = scope.modalElement.querySelector("#cameraCanvas");
 	startbutton = scope.modalElement.querySelector("#clickButton");
 	function startup() {
@@ -22,6 +26,15 @@ export default scope => {
 			window.globalStream = stream;
 			video.style.display = "";
 			canvas.style.display = "";
+			if (selectedDeviceIndex == null) {
+				navigator.mediaDevices.enumerateDevices().then(devices => {
+					videoDevices = devices.filter(device => device.kind === 'videoinput');
+					selectedDeviceIndex = 0;
+					if (videoDevices.length > 1) {
+						switchDeviceButton.style.display = "inline-block";
+					}
+				});
+			}
 			scope.modalElement.querySelector("#cameraError").style.display = "none";
 			scope.modalElement.querySelector("#cameraPermission").style.display = "none";
 			if (navigator.mozGetUserMedia) {
@@ -45,12 +58,15 @@ export default scope => {
 			scope.modalElement.querySelector("#cameraError").style.display = "block";
 		};
 
-		if (typeof navigator.mediaDevices !== "undefined" && navigator.mediaDevices.getUserMedia) {
-			navigator.mediaDevices.getUserMedia(constraints).then(successFunction).catch(errorFunction);
-		}
-		else {
-			navigator.getUserMedia(constraints, successFunction, errorFunction);
+		let initializeMedia = () => {
+			if (typeof navigator.mediaDevices !== "undefined" && navigator.mediaDevices.getUserMedia) {
+				navigator.mediaDevices.getUserMedia(constraints).then(successFunction).catch(errorFunction);
+			}
+			else {
+				navigator.getUserMedia(constraints, successFunction, errorFunction);
+			}
 		}
+		initializeMedia();
 
 		video.addEventListener(
 			"canplay",
@@ -69,6 +85,16 @@ export default scope => {
 			},
 			false
 		);
+		switchDeviceButton.addEventListener(
+			"click",
+			event => {
+				selectedDeviceIndex = (selectedDeviceIndex + 1) % videoDevices.length;
+				constraints.video = {
+					deviceId: videoDevices[selectedDeviceIndex].deviceId
+				}
+				initializeMedia();
+			}
+		);
 		startbutton.addEventListener(
 			"click",
 			event => {