title: Displaying video stream from multiple client TCP sockets in Flask
body: <p>Im trying to display video streams of screen recording from multiple client windows machines in the browser.</p>
  <p>I have client and server scripts where server script is listening to client socket connections and displaying client streams with cv2.imshow(), now im trying to display those streams in Flask application.</p>
  <p>I have found an example where one stream is being displayed, but I'm having trouble modifying the Flask app to display multiple clients.</p>
  <p>Here is the code:</p>
  <p>server.py:</p>
  <pre><code>import socket, cv2, pickle, struct
  import threading
  import cv2
  import numpy
  server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
  host_name = socket.gethostname()
  host_ip = socket.gethostbyname(host_name)
  print('HOST IP:', host_ip)
  port = 10050
  socket_address = (host_ip, port)
  server_socket.bind(socket_address)
  server_socket.listen()
  print(&quot;Listening at&quot;, socket_address)
  def show_client(addr, client_socket):
      try:
          print('CLIENT {} CONNECTED!'.format(addr))
          if client_socket:  # if a client socket exists
              data = b&quot;&quot;
              payload_size = struct.calcsize(&quot;Q&quot;)
              while True:
                  while len(data) &lt; payload_size:
                      packet = client_socket.recv(4 * 1024)  # 4K
                      if not packet: break
                      data += packet
                  packed_msg_size = data[:payload_size]
                  data = data[payload_size:]
                  msg_size = struct.unpack(&quot;Q&quot;, packed_msg_size)[0]
                  while len(data) &lt; msg_size:
                      data += client_socket.recv(4 * 1024)
                  frame_data = data[:msg_size]
                  data = data[msg_size:]
                  frame = pickle.loads(frame_data)
                  frame = numpy.asarray(frame)
                  # cv2.imshow(f&quot;FROM {addr}&quot;, frame)
                  key = cv2.waitKey(1) &amp; 0xFF
                  if key == ord('q'):
                      break
              client_socket.close()
      except Exception as e:
          print(e)
          print(f&quot;CLINET {addr} DISCONNECTED&quot;)
          pass
  while True:
      client_socket, addr = server_socket.accept()
      thread = threading.Thread(target=show_client, args=(addr, client_socket))
      thread.start()
      print(&quot;TOTAL CLIENTS &quot;, threading.activeCount() - 1)
  </code></pre>
  <p>flask app.py:</p>
  <pre><code>from flask import Flask, render_template, Response
  import cv2
  
  app = Flask(__name__)
  
  camera = cv2.VideoCapture('rtsp://freja.hiof.no:1935/rtplive/_definst_/hessdalen03.stream')  # use 0 for web camera   
  
  def gen_frames():  # generate frame by frame from camera
      while True:
          # Capture frame-by-frame
          success, frame = camera.read()  # read the camera frame
          if not success:
              break
          else:
              ret, buffer = cv2.imencode('.jpg', frame)
              frame = buffer.tobytes()
              yield (b'--frame\r\n'
                     b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')  # concat frame one by one and show result
  
  
  @app.route('/video_feed')
  def video_feed():
      #Video streaming route. Put this in the src attribute of an img tag
      return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')
  
  
  @app.route('/')
  def index():
      &quot;&quot;&quot;Video streaming home page.&quot;&quot;&quot;
      return render_template('index.html')
  
  
  if __name__ == '__main__':
      app.run(debug=True)
  </code></pre>
  <p>Failed attempt:</p>
  <pre><code>server_socket =socket.socket(socket.AF_INET, socket.SOCK_STREAM)
  host_ip = '##########'
  print('HOST IP:',host_ip)
  port = 10050
  socket_address = (host_ip, port)
  server_socket.bind(socket_address)
  server_socket.listen()
  print('Socket now listening at:',socket_address)
  
  def show_client(addr, client_socket):
      try:
          print('CLIENT {} CONNECTED!'.format(addr))
          if client_socket: # if a client socket exists
              data = b&quot;&quot;
              payload_size = struct.calcsize(&quot;Q&quot;)
              while True:
                  while len(data) &lt; payload_size:
                      packet = client_socket.recv(4*1024)
                      if not packet: break
                      data+=packet
                  packed_msg_size = data[:payload_size]
                  data = data[payload_size:]
                  msg_size = struct.unpack(&quot;Q&quot;,packed_msg_size)[0]
                  while len(data) &lt; msg_size:
                      data += client_socket.recv(4*1024)
                  frame_data = data[:msg_size]
                  data  = data[msg_size:]
                  frame = pickle.loads(frame_data)
                  frame = numpy.asarray(frame)
                  ret, buffer = cv2.imencode('.jpg', frame)
                  frame = buffer.tobytes()
                  yield (b'--frame\r\n'
                         b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')  # concat frame one by one and show result
                  key = cv2.waitKey(1) &amp; 0xFF
                  if key  == ord('q'):
                       break
              client_socket.close()
      except Exception as e:
          print(e)
          print(f&quot;CLINET {addr} DISCONNECTED&quot;)
          pass
  def run_socket():
    print('run_socket fn')
    while True:
      client_socket,addr = server_socket.accept()
      print(client_socket)
      thread = threading.Thread(target=show_client, args=(addr,client_socket))
      thread.start()
      print(&quot;TOTAL CLIENTS &quot;,threading.activeCount() - 1)
  
  @app.route('/video_feed')
  def video_feed():
      # Video streaming route. Put this in the src attribute of an img tag
      return Response( run_socket(), mimetype='multipart/x-mixed-replace; boundary=frame')
  @app.route('/')
  def index():
      &quot;&quot;&quot;Video streaming home page.&quot;&quot;&quot;
      return render_template('index.html')
  if __name__ == '__main__':
      app.run(debug=True)
  </code></pre>