support de différentes tailles de camera

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);