Amélioration effets sur la camera

code/borne/backend/exemple.py

@@ -1,14 +0,0 @@
-import asyncio
-import json
-import websockets
-
-# create handler for each connection
-async def handler(websocket):
-    data = await websocket.recv()
-    print(data)
-    await websocket.send(json.dumps({"type": "effects", "effects": [{"type": "thumbs_up", "x":13, "y": 30, "width": 50, "height": 50}]}))
-
-
-start_server = websockets.serve(handler, "localhost", 5000)
-asyncio.get_event_loop().run_until_complete(start_server)
-asyncio.get_event_loop().run_forever()

code/borne/backend/exemple_overlay_camera.py

@@ -0,0 +1,28 @@
+import asyncio
+import json
+import websockets
+import numpy as np
+import random
+
+class WebsocketServer:
+    def __init__(self,getEffects,port=5000,host="localhost") -> None:
+        self.host = host
+        self.port = port
+        self.getEffects = getEffects
+    
+    async def run(self):
+        async with websockets.serve(self.handler, self.host, self.port):
+            await asyncio.Future()
+
+
+    async def handler(self,websocket):
+        while True:
+            messages = self.getEffects()
+            await websocket.send(json.dumps(messages))
+
+#Remplacer ça par la fonction qui récupère les effets (dans le module de reconnaissance de gestes)
+def getEffects():
+    return {"type": "effects", "effects": [{"type": "thumbs_up", "x":random.randint(0,100), "y": random.randint(0,100), "width": 50, "height": 50}]}
+
+server = WebsocketServer(getEffects)
+asyncio.run(server.run())

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

@@ -54,12 +54,15 @@ class CameraEditor {
 
     _frame() {
         const context = canvas.getContext("2d");
-        if (this.width && this.height) {
+        if(this.streaming) {
-            canvas.width = this.width;
+            if (this.width && this.height) {
-            canvas.height = this.height;
+                canvas.width = this.width;
-            context.drawImage(this.video, 0, 0, this.width, this.height);
+                canvas.height = this.height;
-            this._drawEffects();
+                context.drawImage(this.video, 0, 0, this.width, this.height);
+                this._drawEffects();
+            }
         }
+        requestAnimationFrame(() => this._frame());
     }
 
     _drawEffects() {

code/borne/interface/assets/js/main.js

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