diff --git a/code/borne/backend/exemple.py b/code/borne/backend/exemple.py
new file mode 100644
index 0000000..5797ac5
--- /dev/null
+++ b/code/borne/backend/exemple.py
@@ -0,0 +1,13 @@
+import asyncio
+import json
+import websockets
+# create handler for each connection
+async def handler(websocket, path):
+ 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()
\ No newline at end of file
diff --git a/code/borne/interface/assets/img/thumbs_up.png b/code/borne/interface/assets/img/thumbs_up.png
new file mode 100644
index 0000000..d6f7fb9
Binary files /dev/null and b/code/borne/interface/assets/img/thumbs_up.png differ
diff --git a/code/borne/interface/assets/js/camera_editor.js b/code/borne/interface/assets/js/camera_editor.js
new file mode 100644
index 0000000..36d4e42
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/code/borne/interface/assets/js/main.js b/code/borne/interface/assets/js/main.js
new file mode 100644
index 0000000..bb4652e
--- /dev/null
+++ b/code/borne/interface/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);
\ No newline at end of file
diff --git a/code/borne/interface/assets/js/network.js b/code/borne/interface/assets/js/network.js
new file mode 100644
index 0000000..804b5e3
--- /dev/null
+++ b/code/borne/interface/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);
+ }
+ });
+ }
+}
\ No newline at end of file
diff --git a/code/client/borne/index.html b/code/borne/interface/index.html
similarity index 76%
rename from code/client/borne/index.html
rename to code/borne/interface/index.html
index e561a18..95e456d 100644
--- a/code/client/borne/index.html
+++ b/code/borne/interface/index.html
@@ -9,5 +9,7 @@
+
+