effets sur l'interface web depuis python

Tests sur l'implémentation de communication interface web / backend python pour la reconnaissance de main avec webSocket

code/borne/interface/assets/js/camera_editor.js

@@ -0,0 +1,82 @@
+class CameraEditor {
+    constructor(canvas) {
+        this.canvas = canvas;
+        this.ctx = canvas.getContext("2d");
+        this.video = document.createElement("video");
+        this.width = canvas.width;
+        this.height;
+        this.streaming = false;
+        this.activeEffects = [];
+        this.images = {};
+        this._startup();
+        this._loadImages();
+    }
+
+    _startup() {
+        navigator.mediaDevices
+            .getUserMedia({ video: true, audio: false })
+            .then((stream) => {
+                this.video.srcObject = stream;
+                this.video.play();
+            })
+            .catch((err) => {
+                console.error(`Erreur pendant la lecture de la camera: ${err}`);
+            });
+
+        this.video.addEventListener(
+            "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);
+                    }
+
+                    this.video.setAttribute("width", this.width);
+                    this.video.setAttribute("height", this.height);
+                    this.canvas.setAttribute("width", this.width);
+                    this.canvas.setAttribute("height", this.height);
+                    this.streaming = true;
+                }
+            },
+            false
+        );
+    }
+
+    _loadImages() {
+        this.images.thumbsUp = new Image();
+        this.images.thumbsUp.src = "assets/img/thumbs_up.png";
+    }
+
+    _frame() {
+        const context = canvas.getContext("2d");
+        if (this.width && this.height) {
+            canvas.width = this.width;
+            canvas.height = this.height;
+            context.drawImage(this.video, 0, 0, this.width, this.height);
+            this._drawEffects();
+        }
+    }
+
+    _drawEffects() {
+        for (let {type,x,y,width,height} of this.activeEffects) {
+            if(type == "thumbs_up"){
+                this._drawThumbsUp(x,y,width,height);
+            }
+        }
+    }
+
+    _drawThumbsUp(x,y,width,height){
+        this.ctx.beginPath();
+        this.ctx.drawImage(this.images.thumbsUp,x,y,width,height);
+        this.ctx.stroke();
+    }
+
+    setEffects(effects) {
+        this.activeEffects = effects;
+    }
+}