optimisation retour video avec un element video

code/interface_borne/assets/css/main.css

@@ -6,4 +6,22 @@ html, body {
 .page {
     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,16 +6,18 @@ 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(
             (effects) => this._cameraPage.setEffects(effects),
             (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>