capture video stream from a website to Flutter App

Question

i am trying to build an app that runs video stream after performing some image processing in python. which after processing lives it on a site.

        from flask import Flask,render_template,Response
        import string
        from datetime import datetime
        from datetime import date
        import cv2 
        import os
        import ctypes  # An included library with Python install.   

        cascPath=os.path.dirname(cv2.__file__)+"/data/haarcascade_frontalface_default.xml"
        faceCascade = cv2.CascadeClassifier(cascPath)
        app=Flask(__name__)


        def generate_frames():
        posx=0
        posy=0
        video_capture = cv2.VideoCapture(0)
        while True:
        # Capture frame-by-frame
        ret, frames = video_capture.read()

        gray = cv2.cvtColor(frames, cv2.COLOR_BGR2GRAY)

        faces = faceCascade.detectMultiScale(
        gray,
        scaleFactor=1.1,
        minNeighbors=5,
        minSize=(200, 200),
        flags=cv2.CASCADE_SCALE_IMAGE
        )

        # Draw a rectangle around the faces
        for (x, y, w, h) in faces:
        rec=cv2.rectangle(frames, (x, y), (x+w, y+h), (0, 255, 0), 1)
        posy=y
        posx=x
    
    
        cv2.line(img=frames, pt1=(100, 0), pt2=(100, 1000), color=(0, 255, 0), thickness=5, 
        lineType=8, shift=0)
    
        if (posx<(100) and posx!=0 and posy <1000 and posy!=0 ):
        s="Collision Detected at  x {} and y {}"
        ctypes.windll.user32.MessageBoxW(0,s.format(posx,posy), "Collision Detected", 1) 
        now = datetime.now()
        #9:17:45.44343
        today = date.today()
        
        current_time = now.strftime("%H-%M-%S")
        str="{} {} Capture.jpg"
        sk=str.format(today,current_time)
        cv2.imwrite(sk, frames)
        print("capture saved at ",sk)
       
    ret,buffer=cv2.imencode('.jpg',frames)
    frame=buffer.tobytes()
    
    

    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

    yield(b'--frame\r\n'b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
    cv2.imshow('Video', frames)


    @app.route('/')
    def index():
    return render_template('index.html')

    @app.route('/video')
    def video():
    return Response(generate_frames(),mimetype='multipart/x-mixed-replace; boundary=frame')

    if __name__=="__main__":
    app.run(host='0.0.0.0', port=8080)

using command:

         <img class=".img-fluid" src="{{ url_for('video') }}" 
         width="1200"height="700">
    

i am trying to figure out a way to access it on flutter. video_player extension doesn't seem to help as my stream is based on continuous stream of images.

Answer 1

Video Stream Coming from RTSP Protocol can easily be Streamed on to Flutter using Flutter VLC Player. So you don't need to integrate it with Python Server.

Just Add Link in the Controller:

  _videoPlayerController = VlcPlayerController.network(
  'rtsp://your Link',
  hwAcc: HwAcc.FULL,
  autoPlay: false,
  options: VlcPlayerOptions(),
  );