diginext-utils 2.1.8 → 2.1.9

package/src/device/camera.ts

@@ -1,207 +1,207 @@
-import { requestCamera } from "../permission/requestCamera";
-
-type GetWebcamParams = {
-	container?: HTMLElement;
-	facingMode: string;
-	audio: boolean;
-};
-
-export function getWebcam(params: GetWebcamParams = { facingMode: "environment", audio: true }) {
-	if (typeof window == "undefined") return;
-
-	const { container, facingMode = "environment", audio = true } = params;
-	const _container = container || document.body;
-
-	return new Promise(async (resolve, reject) => {
-		const video = document.createElement("video") as any;
-		video.style.position = "absolute";
-		video.style.top = "0";
-		video.style.left = "0";
-		video.style.width = "100%";
-		video.style.height = "100%";
-		_container.append(video);
-
-		let inputCameras: any[] = [];
-		let currentCamera: any;
-
-		const requestedMediaConstraints: MediaStreamConstraints = {
-			video: {
-				facingMode: { exact: facingMode },
-			},
-			audio,
-		};
-
-		let stream: any;
-		let isAllowed = false;
-
-		console.log("[Camera.js] Requesting:", requestedMediaConstraints);
-		const res = await requestCamera({ audio });
-		if (!res) {
-			setTimeout(function () {
-				handleError({ name: "Error", message: "NotSupported" });
-			}, 50);
-		}
-
-		// start requesting media permissions:
-
-		// console.log("[Camera.js] Requesting:", requestedMediaConstraints);
-
-		// if (navigator.mediaDevices.enumerateDevices === undefined) {
-		// 	setTimeout(function () {
-		// 		handleError({ name: "Error", message: "NotSupported" });
-		// 	}, 50);
-		// } else {
-		navigator.mediaDevices.enumerateDevices().then(parseDevices).catch(handleError);
-		// }
-
-		function parseDevices(devices: MediaDeviceInfo[]) {
-			inputCameras = [];
-			let backCameras: any[] = [];
-
-			devices.forEach(function (device) {
-				if (device.kind == "videoinput" && typeof device.deviceId != "undefined" && device.deviceId != "") {
-					inputCameras.push(device);
-				}
-			});
-			// //alert (JSON.stringify (devices));
-			console.log("[Camera.js] inputCameras:", inputCameras);
-
-			if (inputCameras.length > 0) {
-				let cams = "";
-				let backCamera: any;
-
-				inputCameras.map((cam, index) => {
-					cams += `[${cam.deviceId}] ${cam.kind} | ${cam.label}\n`;
-					// console.log(cam);
-					let label = cam.label.toLowerCase();
-					if (label.indexOf("back") > -1 || label.indexOf("facetime") > -1) {
-						backCamera = cam;
-						backCameras.push(backCamera);
-					}
-				});
-
-				if (backCameras.length > 1) {
-					backCamera = backCameras[backCameras.length - 1];
-				}
-
-				console.log(`[Camera.js] All input sources:`, cams);
-				console.log(`[Camera.js] This device has ${backCameras.length} back camera${backCameras.length > 1 ? "s" : ""}.`);
-				console.log("[Camera.js] backCameras:", JSON.stringify(backCameras));
-
-				currentCamera = backCamera;
-
-				// if (scope.onGotDevices) {
-				// 	scope.onGotDevices(devices);
-				// }
-
-				// Lấy stream của camera sau
-				// (Lấy cái cuối cùng trong danh sách trước, thường sẽ là camera chính trên Android)
-				getStreamOfCameraId(backCamera.deviceId)
-					.then(onStreamReceived)
-					.catch((e) => {
-						if (backCameras.length > 1) {
-							// nếu thiết bị có nhiều hơn 1 camera sau -> thử lấy camera khác
-							backCamera = backCameras[backCameras.length - 2];
-							getStreamOfCameraId(backCamera.deviceId).then(onStreamReceived).catch(handleError);
-						} else if (backCameras.length > 2) {
-							// nếu thiết bị có nhiều hơn 2 camera sau -> thử lấy camera khác nữa
-							backCamera = backCameras[backCameras.length - 3];
-							getStreamOfCameraId(backCamera.deviceId).then(onStreamReceived).catch(handleError);
-						} else {
-							// nếu thiết bị đéo có camera sau...
-							handleError(e);
-						}
-					});
-			} else {
-				navigator.mediaDevices.getUserMedia(requestedMediaConstraints).then(onStreamReceived).catch(handleError);
-
-				// if (scope.onGotDevicesFailed) scope.onGotDevicesFailed();
-			}
-		}
-
-		function onStreamReceived(stream: any): void {
-			if (inputCameras.length == 0) {
-				console.log("[Camera.js] Not found any back cameras, request again?");
-				navigator.mediaDevices.enumerateDevices().then(parseDevices).catch(handleError);
-				return;
-			}
-
-			isAllowed = true;
-
-			playWebcamVideo(stream);
-		}
-
-		function playWebcamVideo(_stream: any) {
-			stream = _stream;
-
-			if ("srcObject" in video) {
-				// //alert ('GOT STREAM VIDEO OBJECT');
-				video.srcObject = _stream;
-			} else {
-				// //alert ('GOT STREAM VIDEO SOURCE URL');
-				// Avoid using this in new browsers, as it is going away.
-				video.src = window.URL.createObjectURL(_stream);
-			}
-
-			// required to tell iOS safari we don't want fullscreen
-			video.setAttribute("playsinline", "true");
-			video.setAttribute("muted", "true");
-			video.setAttribute("autoplay", "true");
-			video.muted = true;
-			video.autoplay = true;
-			video.style.objectFit = "cover";
-			video.play();
-
-			// auto play
-			video.addEventListener("canplay", function (e: any) {
-				// //alert ('CAN PLAY');
-			});
-
-			video.addEventListener("canplaythrough", function (e: any) {
-				// //alert ('CAN PLAY THROUGH');
-			});
-
-			video.addEventListener("error", (e: any) => console.log("[Camera.js] <video> error:", e));
-
-			video.addEventListener("stalled", function (e: any) {
-				// //alert ('CANNOT GET METADATA');
-				isAllowed = false;
-				console.log("[Camera.js] <video> stalled:", e);
-
-				reject();
-			});
-
-			video.addEventListener("loadedmetadata", function (e: any) {
-				if (currentCamera.label.toLowerCase().indexOf("facetime") > -1) {
-					video.style.transform = "scaleX(-1)";
-					video.style.webkitTransform = "scaleX(-1)";
-				}
-
-				video.play();
-
-				resolve(video);
-			});
-		}
-
-		function getStreamOfCameraId(id: any) {
-			const constraints = {
-				video: { deviceId: { exact: id } },
-				audio: false,
-			};
-
-			return new Promise((resolve, reject) => {
-				navigator.mediaDevices.getUserMedia(constraints).then(resolve).catch(reject);
-			});
-		}
-
-		function handleError(err: any) {
-			console.error(err);
-			const errMsg = "[Camera.js] " + err.name + ": " + err.message;
-			console.error(errMsg);
-
-			isAllowed = false;
-
-			reject();
-		}
-	});
-}
+import { requestCamera } from "../permission/requestCamera";
+
+type GetWebcamParams = {
+	container?: HTMLElement;
+	facingMode: string;
+	audio: boolean;
+};
+
+export function getWebcam(params: GetWebcamParams = { facingMode: "environment", audio: true }) {
+	if (typeof window == "undefined") return;
+
+	const { container, facingMode = "environment", audio = true } = params;
+	const _container = container || document.body;
+
+	return new Promise(async (resolve, reject) => {
+		const video = document.createElement("video") as any;
+		video.style.position = "absolute";
+		video.style.top = "0";
+		video.style.left = "0";
+		video.style.width = "100%";
+		video.style.height = "100%";
+		_container.append(video);
+
+		let inputCameras: any[] = [];
+		let currentCamera: any;
+
+		const requestedMediaConstraints: MediaStreamConstraints = {
+			video: {
+				facingMode: { exact: facingMode },
+			},
+			audio,
+		};
+
+		let stream: any;
+		let isAllowed = false;
+
+		console.log("[Camera.js] Requesting:", requestedMediaConstraints);
+		const res = await requestCamera({ audio });
+		if (!res) {
+			setTimeout(function () {
+				handleError({ name: "Error", message: "NotSupported" });
+			}, 50);
+		}
+
+		// start requesting media permissions:
+
+		// console.log("[Camera.js] Requesting:", requestedMediaConstraints);
+
+		// if (navigator.mediaDevices.enumerateDevices === undefined) {
+		// 	setTimeout(function () {
+		// 		handleError({ name: "Error", message: "NotSupported" });
+		// 	}, 50);
+		// } else {
+		navigator.mediaDevices.enumerateDevices().then(parseDevices).catch(handleError);
+		// }
+
+		function parseDevices(devices: MediaDeviceInfo[]) {
+			inputCameras = [];
+			let backCameras: any[] = [];
+
+			devices.forEach(function (device) {
+				if (device.kind == "videoinput" && typeof device.deviceId != "undefined" && device.deviceId != "") {
+					inputCameras.push(device);
+				}
+			});
+			// //alert (JSON.stringify (devices));
+			console.log("[Camera.js] inputCameras:", inputCameras);
+
+			if (inputCameras.length > 0) {
+				let cams = "";
+				let backCamera: any;
+
+				inputCameras.map((cam, index) => {
+					cams += `[${cam.deviceId}] ${cam.kind} | ${cam.label}\n`;
+					// console.log(cam);
+					let label = cam.label.toLowerCase();
+					if (label.indexOf("back") > -1 || label.indexOf("facetime") > -1) {
+						backCamera = cam;
+						backCameras.push(backCamera);
+					}
+				});
+
+				if (backCameras.length > 1) {
+					backCamera = backCameras[backCameras.length - 1];
+				}
+
+				console.log(`[Camera.js] All input sources:`, cams);
+				console.log(`[Camera.js] This device has ${backCameras.length} back camera${backCameras.length > 1 ? "s" : ""}.`);
+				console.log("[Camera.js] backCameras:", JSON.stringify(backCameras));
+
+				currentCamera = backCamera;
+
+				// if (scope.onGotDevices) {
+				// 	scope.onGotDevices(devices);
+				// }
+
+				// Lấy stream của camera sau
+				// (Lấy cái cuối cùng trong danh sách trước, thường sẽ là camera chính trên Android)
+				getStreamOfCameraId(backCamera.deviceId)
+					.then(onStreamReceived)
+					.catch((e) => {
+						if (backCameras.length > 1) {
+							// nếu thiết bị có nhiều hơn 1 camera sau -> thử lấy camera khác
+							backCamera = backCameras[backCameras.length - 2];
+							getStreamOfCameraId(backCamera.deviceId).then(onStreamReceived).catch(handleError);
+						} else if (backCameras.length > 2) {
+							// nếu thiết bị có nhiều hơn 2 camera sau -> thử lấy camera khác nữa
+							backCamera = backCameras[backCameras.length - 3];
+							getStreamOfCameraId(backCamera.deviceId).then(onStreamReceived).catch(handleError);
+						} else {
+							// nếu thiết bị đéo có camera sau...
+							handleError(e);
+						}
+					});
+			} else {
+				navigator.mediaDevices.getUserMedia(requestedMediaConstraints).then(onStreamReceived).catch(handleError);
+
+				// if (scope.onGotDevicesFailed) scope.onGotDevicesFailed();
+			}
+		}
+
+		function onStreamReceived(stream: any): void {
+			if (inputCameras.length == 0) {
+				console.log("[Camera.js] Not found any back cameras, request again?");
+				navigator.mediaDevices.enumerateDevices().then(parseDevices).catch(handleError);
+				return;
+			}
+
+			isAllowed = true;
+
+			playWebcamVideo(stream);
+		}
+
+		function playWebcamVideo(_stream: any) {
+			stream = _stream;
+
+			if ("srcObject" in video) {
+				// //alert ('GOT STREAM VIDEO OBJECT');
+				video.srcObject = _stream;
+			} else {
+				// //alert ('GOT STREAM VIDEO SOURCE URL');
+				// Avoid using this in new browsers, as it is going away.
+				video.src = window.URL.createObjectURL(_stream);
+			}
+
+			// required to tell iOS safari we don't want fullscreen
+			video.setAttribute("playsinline", "true");
+			video.setAttribute("muted", "true");
+			video.setAttribute("autoplay", "true");
+			video.muted = true;
+			video.autoplay = true;
+			video.style.objectFit = "cover";
+			video.play();
+
+			// auto play
+			video.addEventListener("canplay", function (e: any) {
+				// //alert ('CAN PLAY');
+			});
+
+			video.addEventListener("canplaythrough", function (e: any) {
+				// //alert ('CAN PLAY THROUGH');
+			});
+
+			video.addEventListener("error", (e: any) => console.log("[Camera.js] <video> error:", e));
+
+			video.addEventListener("stalled", function (e: any) {
+				// //alert ('CANNOT GET METADATA');
+				isAllowed = false;
+				console.log("[Camera.js] <video> stalled:", e);
+
+				reject();
+			});
+
+			video.addEventListener("loadedmetadata", function (e: any) {
+				if (currentCamera.label.toLowerCase().indexOf("facetime") > -1) {
+					video.style.transform = "scaleX(-1)";
+					video.style.webkitTransform = "scaleX(-1)";
+				}
+
+				video.play();
+
+				resolve(video);
+			});
+		}
+
+		function getStreamOfCameraId(id: any) {
+			const constraints = {
+				video: { deviceId: { exact: id } },
+				audio: false,
+			};
+
+			return new Promise((resolve, reject) => {
+				navigator.mediaDevices.getUserMedia(constraints).then(resolve).catch(reject);
+			});
+		}
+
+		function handleError(err: any) {
+			console.error(err);
+			const errMsg = "[Camera.js] " + err.name + ": " + err.message;
+			console.error(errMsg);
+
+			isAllowed = false;
+
+			reject();
+		}
+	});
+}