diff --git a/api/index.js b/api/index.js
index 8bbd74d3..1f10df4b 100644
--- a/api/index.js
+++ b/api/index.js
@@ -66,10 +66,16 @@ var connect_to_api = function () {
             send_events_to_clients(msg);
         } else {
             console.log("got image");
-            //TODO handle image
         }
     } catch (error) {
-      console.log("could not parse as json");
+        console.log("could not parse as json, must be bytes");
+        let image = new Image();
+        image.src = URL.createObjectURL(message.data);
+        image.addEventListener("load", function () {
+            console.log("image loaded with width: " + image.width + " and height: " + image.height);
+
+        });
+        
     }
   });
 
diff --git a/api/views/index.ejs b/api/views/index.ejs
index c318ad87..e9f2ff89 100644
--- a/api/views/index.ejs
+++ b/api/views/index.ejs
@@ -14,6 +14,7 @@
     <div class="video">
         <div class="mainvideo">
             <p>Camera view:</p>
+            <canvas id="msg" width="960" height="720" style="display: inline-block; border: 1px solid blue;"></canvas>
             <div id="connectedbuttons">
                 <div id="connectedstatus">
                     <p id="connectedlabel">Connected: <%- api_connected %></p>
diff --git a/src/api_communication/api_communication/api_listener.py b/src/api_communication/api_communication/api_listener.py
index ed9f3848..f623e795 100644
--- a/src/api_communication/api_communication/api_listener.py
+++ b/src/api_communication/api_communication/api_listener.py
@@ -12,6 +12,7 @@ import json
 from enum import Enum
 from functools import partial
 import base64
+import cv2
 
 # communication: client always sends commands that have a command id.
 # server always sends messages back that have a message type
@@ -81,6 +82,9 @@ class ApiListener(Node):
             target=self.handle_responses, daemon=True)
         self.response_thread.start()
 
+        self.video_trhead = threading.Thread(target=self.send_video)
+        self.video_trhead.start()
+
     def drone_status_callback(self, msg):
         self.status_data_received = True
         self.status_data['battery_percentage'] = msg.battery_percentage
@@ -89,6 +93,21 @@ class ApiListener(Node):
         self.status_data['control_mode'] = msg.control_mode
         self.status_data['route_setpoint'] = msg.route_setpoint
 
+    def send_video(self):
+        self.get_logger().info('Starting video thread')
+        while True:
+            vid = cv2.VideoCapture(0)
+            try:
+                while vid.isOpened():
+                    img,frame = vid.read()
+                    frame = cv2.resize(frame,(640,480))
+                    encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), 65]
+                    man = cv2.imencode('.jpg', frame, encode_param)[1]
+                    self.message_queue.append(man.tobytes())
+
+            except Exception as e:
+                self.get_logger().error('Something went wrong while reading video: ' + str(e))
+
     def publish_message(self, message):
         # self.get_logger().info(f'Publishing message: {message}')
         if self.websocket is not None: