optimisation retour video avec un element video

code/interface_borne/assets/css/main.css

@@ -7,3 +7,21 @@ html, body {
     width: 100%;
     height: 100%;
 }
+
+#camera > video, #camera > canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+}
+
+#camera > video {
+    z-index: 0;
+}
+#camera > canvas {
+    z-index: 1;
+}

code/interface_borne/assets/js/camera_page.js

@@ -1,14 +1,14 @@
 class CameraPage {
-    constructor(canvas) {
+    constructor() {
 
         this.spinnerWeight = 10;
         this.spinnerColor = "#0F0FFF"
 
-        this.canvas = canvas;
-        this.ctx = canvas.getContext("2d");
-        this.video = document.createElement("video");
+        this.canvas = document.getElementById("overlay-canvas");
+        this.ctx = this.canvas.getContext("2d");
+        this.video = document.getElementById("camera-video");
         this.width;
-        this.height; //calculé automatiquement en fonction de la largeur du flux vidéo
+        this.height; //calcule automatiquement en fonction de la largeur du flux vidéo
         this.videoWidth;
         this.videoHeight;
         this.streaming = false;
@@ -80,9 +80,8 @@ class CameraPage {
 
     _frame() {
         if (this.streaming && this.enabled && this.width && this.height) {
-            this.canvas.width = this.width;
-            this.canvas.height = this.height;
-            this.ctx.drawImage(this.video, 0, 0, this.width, this.height);
+            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+            // this.ctx.drawImage(this.video, 0, 0, this.width, this.height);
             this._drawEffects();
         }
         if (this.enabled) {

code/interface_borne/assets/js/main.js

@@ -1,7 +1,5 @@
 let stateManager; 
 
 window.addEventListener("load", () => {
-	let canvas = document.createElement("canvas");
-	document.body.appendChild(canvas);
-	stateManager = new StateManager(canvas);
+	stateManager = new StateManager();
 }, false);

code/interface_borne/assets/js/state_manager.js

@@ -6,10 +6,9 @@ const STATE = {
 };
 
 class StateManager {
-    constructor(canvas) {
-        this.canvas = canvas;
+    constructor() {
         this._state = STATE.sleeping;
-        this._cameraPage = new CameraPage(this.canvas);
+        this._cameraPage = new CameraPage();
         this._sleepingPage = new SleepingPage();
 
         this.wsClient = new WebsocketClient(
@@ -17,6 +16,9 @@ class StateManager {
             (state) => this.changeState(state)
         );
         
+        this._sleepingPage.enabled = true;
+        this._cameraPage.enabled = false;
+
         //TODO: Remove qd implémenté dans le backend
         document.getElementById("sleeping-page-continue").onclick = () => this.setState(STATE.video);
     }

code/interface_borne/index.html

@@ -17,7 +17,8 @@
             <button id="sleeping-page-continue">Continuer</button>
         </div>
         <div id="camera">
-
+            <canvas id="overlay-canvas"></canvas>
+            <video id="camera-video"></video>
         </div>
         <script src="assets/js/camera_page.js"></script>
         <script src="assets/js/network.js"></script>

docs/rapports_pan2/module_hardware/rapport.md

@@ -73,6 +73,7 @@ Package id 0:  +69.0°C  (high = +105.0°C, crit = +105.0°C)
 Core 0:        +69.0°C  (high = +105.0°C, crit = +105.0°C)
 Core 1:        +68.0°C  (high = +105.0°C, crit = +105.0°C)
 ```
+<div style="page-break-after: always;"></div>
 
 ## Impact de l'utilisation de Docker
 Nous nous sommes également posé la question de l'impact de l'utilisation de docker dans les performances de notre projet. Pour mesurer cela, nous avons effectué des benchmark directement sur le système puis dans un container Docker pour mesurer la différence. Nous avons utlisé sysbench pour évaluer les performances du CPU, de la RAM et du disque (écriture/lecture aléatoire).