support de différentes tailles de camera

code/docker-compose.yaml

@@ -26,7 +26,8 @@ services:
     restart: always
     container_name: phpmyadmin
     depends_on:
-      - db
+      db:
+        condition: service_healthy
     environment:
       PMA_ARBITRARY: 1
       PMA_HOST: db

code/interface_borne/assets/css/main.css

@@ -0,0 +1,11 @@
+body {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 16px;
+    line-height: 1.5;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    overflow: hidden;
+}

code/interface_borne/assets/js/camera_editor.js

@@ -3,8 +3,10 @@ class CameraEditor {
         this.canvas = canvas;
         this.ctx = canvas.getContext("2d");
         this.video = document.createElement("video");
-        this.width = canvas.width;
-        this.height;
+        this.width;
+        this.height; //calculé automatiquement en fonction de la largeur du flux vidéo
+        this.videoWidth;
+        this.videoHeight;
         this.streaming = false;
         this.activeEffects = [];
         this.images = {};
@@ -27,15 +29,19 @@ class CameraEditor {
             "canplay",
             (ev) => {
                 if (!this.streaming) {
-                    this.height = this.video.videoHeight / (this.video.videoWidth / this.width);
-
-                    // 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(this.height)) {
-                        this.height = this.width / (4 / 3);
+                    //calcul de la taille de la vidéo en fonction de la taille de la fenêtre pour qu'elle soit toujours visible
+                    let aspectRatio = this.video.videoWidth / this.video.videoHeight;
+                    if(window.innerHeight * aspectRatio > window.innerWidth){
+                        this.width = window.innerWidth;
+                        this.height = window.innerWidth / aspectRatio;
+                    }else{
+                        this.width = window.innerHeight * aspectRatio;
+                        this.height = window.innerHeight;
                     }
 
+                    this.videoHeight = this.video.videoHeight;
+                    this.videoWidth = this.video.videoWidth;
+
                     this.video.setAttribute("width", this.width);
                     this.video.setAttribute("height", this.height);
                     this.canvas.setAttribute("width", this.width);
@@ -65,9 +71,21 @@ class CameraEditor {
         requestAnimationFrame(() => this._frame());
     }
 
+    _scaleEffect(x,y,width,height){
+        let xScale = this.width / this.videoWidth;
+        let yScale = this.height / this.videoHeight;
+        return {
+            x: x * xScale,
+            y: y * yScale,
+            width: width * xScale,
+            height: height * yScale
+        }
+    }
+
     _drawEffects() {
-        for (let {type,x,y,width,height} of this.activeEffects) {
-            if(type == "thumbs_up"){
+        for (let effect of this.activeEffects) {
+            let {x,y,width,height} = this._scaleEffect(effect.x,effect.y,effect.width,effect.height);
+            if(effect.type == "thumbs_up"){
                 this._drawThumbsUp(x,y,width,height);
             }
         }

code/interface_borne/assets/js/main.js

@@ -1,7 +1,11 @@
 let cameraEditor;
 let client
+let canvas;
+
 window.addEventListener("load", () => {
-	cameraEditor = new CameraEditor(document.getElementById("canvas"));
+	canvas = document.createElement("canvas");
+	document.body.appendChild(canvas);
+	cameraEditor = new CameraEditor(canvas);
 	client = new WebsocketClient((effects) => { cameraEditor.setEffects(effects); });
 	cameraEditor._frame();
 }, false);

code/interface_borne/index.html

@@ -4,10 +4,10 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="assets/css/main.css">
     <title>Téléreview</title>
 </head>
 <body>
-    <canvas id="canvas"></canvas>
     <script src="assets/js/main.js"></script>
     <script src="assets/js/camera_editor.js"></script>
     <script src="assets/js/network.js"></script>