From 4bbbe36d281a833be8834b63f0dc593df9f463ef Mon Sep 17 00:00:00 2001
From: Quentin Roussel <quentin.roussel11@gmail.com>
Date: Wed, 4 Jan 2023 22:24:07 +0100
Subject: [PATCH] Feed webcam sur un canvas js

---
 code/client/borne/assets/js/main.js | 106 +++++++++++++++++-----------
 code/client/borne/index.html        |   4 +-
 2 files changed, 65 insertions(+), 45 deletions(-)

diff --git a/code/client/borne/assets/js/main.js b/code/client/borne/assets/js/main.js
index 3570d6c..5fb9727 100644
--- a/code/client/borne/assets/js/main.js
+++ b/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);
-}
\ No newline at end of file
+			// 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);
+})();
diff --git a/code/client/borne/index.html b/code/client/borne/index.html
index 8883aa3..e561a18 100644
--- a/code/client/borne/index.html
+++ b/code/client/borne/index.html
@@ -7,7 +7,7 @@
     <title>Téléreview</title>
 </head>
 <body>
-    <canvas id="camera"></canvas>
-    <video id="video"></video>
+    <canvas id="canvas"></canvas>
+    <script src="assets/js/main.js"></script>
 </body>
 </html>
\ No newline at end of file