Feed webcam sur un canvas js

code/client/borne/assets/js/main.js

@@ -1,52 +1,72 @@
-let canvas = document.getElementById('camera');
-let video = document.getElementById('video');
+// Pour l'explication complète du code : https://developer.mozilla.org/en-US/docs/Web/API/Media_Capture_and_Streams_API/Taking_still_photos#javascript
+(() => {
+	// The width and height of the captured photo. We will set the
+	// width to the value defined here, but the height will be
+	// calculated based on the aspect ratio of the input stream.
 
-const width = 320; // We will scale the photo width to this
-let height = 0; // This will be computed based on the input stream
-let streaming = false;
+	const width = 500; // We will scale the photo width to this
+	let height = 0; // This will be computed based on the input stream
 
-function startup() {
-    video = document.getElementById("video");
-    canvas = document.getElementById("canvas");
+	// |streaming| indicates whether or not we're currently streaming
+	// video from the camera. Obviously, we start at false.
 
-    navigator.mediaDevices
-        .getUserMedia({ video: true, audio: false })
-        .then((stream) => {
-            video.srcObject = stream;
-            video.play();
-        })
-        .catch((err) => {
-        console.error(`An error occurred: ${err}`);
-        });
+	let streaming = false;
 
-    video.addEventListener(
-        "canplay",
-        (ev) => {
-            if (!streaming) {
-                height = video.videoHeight / (video.videoWidth / width);
+	// The various HTML elements we need to configure or control. These
+	// will be set by the startup() function.
 
-                // Firefox currently has a bug where the height can't be read from
-                // the video, so we will make assumptions if this happens.
+	let video = null;
+	let canvas = null;
 
-                if (isNaN(height)) {
-                    height = width / (4 / 3);
-                }
+	function startup() {
+	video = document.createElement("video");
+	canvas = document.getElementById("canvas");
 
-                video.setAttribute("width", width);
-                video.setAttribute("height", height);
-                canvas.setAttribute("width", width);
-                canvas.setAttribute("height", height);
-                streaming = true;
-                drawVideoOnCanvas();
-            }
-        },
-        false
-    );
-}
+	navigator.mediaDevices
+		.getUserMedia({ video: true, audio: false })
+		.then((stream) => {
+		video.srcObject = stream;
+		video.play();
+		})
+		.catch((err) => {
+		console.error(`An error occurred: ${err}`);
+		});
 
-window.addEventListener("load", startup, false);
+	video.addEventListener(
+		"canplay",
+		(ev) => {
+		if (!streaming) {
+			height = video.videoHeight / (video.videoWidth / width);
 
-const drawVideoOnCanvas = () => {
-    canvas.getContext("2d").drawImage(video, 0, 0, width, height);
-    requestAnimationFrame(drawVideoOnCanvas);
-}
+			// Firefox currently has a bug where the height can't be read from
+			// the video, so we will make assumptions if this happens.
+
+			if (isNaN(height)) {
+			height = width / (4 / 3);
+			}
+
+			video.setAttribute("width", width);
+			video.setAttribute("height", height);
+			canvas.setAttribute("width", width);
+			canvas.setAttribute("height", height);
+			streaming = true;
+		}
+		},
+		false
+	);
+	}
+
+	function updateCanvas() {
+	const context = canvas.getContext("2d");
+	if (width && height) {
+		canvas.width = width;
+		canvas.height = height;
+		context.drawImage(video, 0, 0, width, height);
+		/* Ajouter Ici le code pour supperposer les animations */
+	}
+	requestAnimationFrame(updateCanvas);
+	}
+
+	window.addEventListener("load", startup, false);
+	window.addEventListener("load", updateCanvas, false);
+})();