⚗️ ✨ #1 Now could able to stream webcam data

app/templates/base.html

@@ -69,8 +69,10 @@
     </footer>
   </body>
   <!-- Socketio library and establishing connection with python flask server -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script> -->
   <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js" integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==" crossorigin="anonymous"></script> -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
 
   <script type="text/javascript" charset="utf-8">
     const socket = io.connect('http://127.0.0.1:5000'); // url of the python server
@@ -80,9 +82,10 @@
         msg: 'CONN_ESTABLISHED'
       });
       console.log('Connected to server')
-      socket
-      if(confirm("Start streaming?") == true)
-        socket.emit('BEGIN_STREAM')
+
+      // if(confirm("Start streaming?") == true)
+      console.log('streaming begins...')
+      socket.emit('stream', {msg: 'start streaming'})
     });
 
     socket.on('disconnect', function(){

app/templates/index.html

@@ -43,17 +43,10 @@ <h1 class="jumbotron-heading">Self-Driving car</h1>
     // Connection is already setup with variable `socket` in `base.html`, which will be top of this in final rendering.
     // here just using setting up those events, which are specific to the page
     // FIXME: Currently this page doesn't need cam feed. Later move to that specific pages
-    socket.on('img_data', function(data){
+    socket.on('img_data', function(msg){
       console.log("Image received")
-      var arrayBufferView = new Uint8Array(data['image']);
-      var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
-
-      var img_url = URL.createObjectURL(blob);
-      document.getElementById("cam_img").src = img_url;
-
-      console.log("image data placed .. Sending ack")
-      // send ack
-      socket.emit('ack', 'IMG_YES')
+      img_element = document.getElementById("cam_img")
+      img_element.src="data:image/jpeg;base64,"+msg;
     })
 
 </script>

main.py

@@ -1,90 +1,36 @@
 from app import create_app
 import cv2
 import time
+import base64
 socketio, app = create_app()
 
 # FIXME: later figure out the way to place this in some file like, `web` and `feed`
 
-
-def send_image():
-    with open('640x480.jpg', 'rb') as f:
-        image_data = f.read()
-    socketio.emit('img_data', {'image': image_data})
-
-
-is_img_recvd, is_conn_handshake_done, is_begin_stream = True, False, False
-
-
-@socketio.on('ack')
-def handle_acknowledge(response):
-    """When received ack from client - that image has received, then send the next frame"""
-    global is_img_recvd, is_conn_handshake_done, is_begin_stream
-    if response['msg'] == 'CONN_ESTABLISHED':
-        print("Connection Established")
-        is_conn_handshake_done = True
-    elif response['msg'] == 'BEGIN_STREAM':
-        print("Start stream, recvd ack")
-        is_begin_stream = True
-    elif response['msg'] == 'IMG_YES':
-        is_img_recvd = True
-        print("Recvd ack from client. Send next frame")
-    else:
-        print('Unknown response received. Got '+str(response))
-
-
-def stream_webcamera():
-    global is_img_recvd
-    # define a video capture object
-    vid = cv2.VideoCapture(0)
-
-    while True:
-        # Capture the video frame
-        # by frame
-        ret, frame = vid.read()
-
-        # Display the resulting frame
-        cv2.imshow('frame', frame)
-
-        # Now encode it to send over connection
-        ret, buffer = cv2.imencode('.jpg', cv2.flip(frame, 1))
-        frame = buffer.tobytes()
-        socketio.emit('img_data', {'image': frame})
-        print("Sent image. Waiting for ack.")
-        is_img_recvd = False
-        if cv2.waitKey(1) == 27:
-            break
-
-        time.sleep(0.5)
-    # After the loop release the cap object
-    vid.release()
-    # Destroy all the windows
-    cv2.destroyAllWindows()
-
-# Event handlers for connection events
-
-
 @socketio.on('connect')
 def handle_connect():
-    print("Client connected successfully")
-    # send image data..
-    if is_conn_handshake_done:
-        print("Handshake successful")
-
-@socketio.on('/stream')
-def handle_stream():
-    print("Waiting for ack - to begin stream")
-    if is_begin_stream == True:
-        print("Server about to send the image")
-        input("Enter some key to send image")
-        send_image()
-        if input("Enter some key to begin stream") == 'y':
-            stream_webcamera()
-        print("Server sent the image")
+    print("Client connected successfully")\
+
+@socketio.on('stream')
+def handle_stream(response):
+    print("client sent: "+str(response))
+    print("[[[[[[[[[[[[[[[[[[[[[[[[[[[STREAMING BEGINS]]]]]]]]]]]]]]]]]]]]]]]]]]]")
+    cap = cv2.VideoCapture(0)
+    while (cap.isOpened()):
+        ret, img = cap.read()
+        if ret:
+            img = cv2.resize(img, (0, 0), fx=0.5, fy=0.5)
+            frame = cv2.imencode('.jpg', img)[1].tobytes()
+            frame = base64.encodebytes(frame).decode("utf-8")
+            socketio.emit('img_data', frame)
+            socketio.sleep(0)
+        else:
+            print("Can't stream ")
+            break
 
 
 @socketio.on('disconnect')
-def handle_connect():
-    print("Client connected successfully")
+def handle_disconnect():
+    print("Client disconnected successfully")
 
 # Handle specific events -- client uses `emit` for these