container pour l'interface de la borne

code/interface_borne/assets/js/camera_editor.js

@@ -0,0 +1,85 @@
+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.streaming) {
+            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();
+            }
+        }
+        requestAnimationFrame(() => this._frame());
+    }
+
+    _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;
+    }
+}

code/interface_borne/assets/js/main.js

@@ -0,0 +1,6 @@
+let cameraEditor;
+let client
+window.addEventListener("load", () => {
+	cameraEditor = new CameraEditor(document.getElementById("canvas"));
+	client = new WebsocketClient((effects) => { cameraEditor.setEffects(effects); });
+}, false);

code/interface_borne/assets/js/network.js

@@ -0,0 +1,14 @@
+class WebsocketClient {
+    constructor(onNewEffects) {
+        this.socket = new WebSocket("ws://localhost:5000");
+        this.socket.addEventListener("open", (event)  => {
+            this.socket.send("connected");
+        });
+        this.socket.addEventListener("message", (event) => {
+            let msg = JSON.parse(event.data);
+            if (msg.type == "effects") {
+                onNewEffects(msg.effects);
+            }
+        });
+    }
+}