Streaming video from camera in FastAPI results in frozen image after first frame

Question

I am trying to stream video from a camera using FastAPI, similar to an example I found for Flask. In Flask, the example works correctly, and the video is streamed without any issues. However, when I try to replicate the same functionality in FastAPI, I encounter a problem where the video stream freezes after the first frame.

I have followed the example provided in this Flask code https://www.pyimagesearch.com/2019/09/02/opencv-stream-video-to-web-browser-html-page/ but when I adapt it to FastAPI, the video only displays the first frame and then remains frozen. I suspect there might be a difference in how FastAPI handles streaming responses compared to Flask.

Example in Flask (Works normally):

def generate():
    # grab global references to the output frame and lock variables
    global outputFrame, lock
    # loop over frames from the output stream
    while True:
        # wait until the lock is acquired
        with lock:
            # check if the output frame is available, otherwise skip
            # the iteration of the loop
            if outputFrame is None:
                continue
            # encode the frame in JPEG format
            (flag, encodedImage) = cv2.imencode(".jpg", outputFrame)
            # ensure the frame was successfully encoded
            if not flag:
                continue
        # yield the output frame in the byte format
        yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' +
               bytearray(encodedImage) + b'\r\n')

@app.route("/")
def video_feed():
    # return the response generated along with the specific media
    # type (mime type)
    return Response(generate(),
                    mimetype="multipart/x-mixed-replace; boundary=frame")

Here is my FastAPI code:

def generate():
    # grab global references to the output frame and lock variables
    global outputFrame, lock
    # loop over frames from the output stream
    while True:
        # wait until the lock is acquired
        with lock:
            # check if the output frame is available, otherwise skip
            # the iteration of the loop
            if outputFrame is None:
                continue
            # encode the frame in JPEG format
            (flag, encodedImage) = cv2.imencode(".jpg", outputFrame)
            # ensure the frame was successfully encoded
            if not flag:
                continue
        # yield the output frame in the byte format
        yield b''+bytearray(encodedImage)


@app.get("/")
def video_feed():
    # return the response generated along with the specific media
    # type (mime type)
    # return StreamingResponse(generate())
    return StreamingResponse(generate(), media_type="image/jpeg")

I have also reviewed the question Video Streaming App using FastAPI and OpenCV, but I couldn't find a solution that addresses my specific issue.

Could someone please help me understand what modifications I need to make in my FastAPI code to ensure that the video stream is continuously updated and not frozen after the first frame? I would appreciate any guidance or suggestions. Thank you!

Answer 1

A Simple Answer:

def get_video_range_response(request: Request, file_path: str, content_type: str = "video/mp4")
    file_size = os.stat(file_path).st_size
    h = request.headers.get("range").replace("bytes=", "").split("-")
    start = int(h[0]) if h[0] != "" else 0

    maxSize = 200000
    end = start + maxSize  # this is the expected end
    if end >= file_size #if end > file_size then obviously end = file_size - 1
        end = file_size - 1
    size = end - start
    headers = {"content-type": content_type,
               "accept-ranges": "bytes",
               "content-encoding": "identity",
               "content-length": str(size),
               "content-range": f" bytes {start}-{end}/{file_size}",
               }

    file_obj = open(file_path, mode="rb")
    file_obj.seek(start)
    data = file_obj.read(size)
    file_obj.close()
    status_code = status.HTTP_206_PARTIAL_CONTENT

    return Response(content=data,
                    status_code=status_code,
                    headers=headers,
                    media_type=content_type
                    )

Usage

@app.get('/Video')
def video_endpoint(req: Request):
    video_path = r"C:\WOI\pict\videos\Modi.mp4"
    return get_video_range_response(req, file_path = video_path, content_type = "video/mp4")

HTML

<video controls class="w-100">
    <source src="/Video" type="video/mp4">        
</video>

Answer 2

Range request (valid for video/PDF/etc...)

import os
from typing import BinaryIO

from fastapi import HTTPException, Request, status
from fastapi.responses import StreamingResponse


def send_bytes_range_requests(
    file_obj: BinaryIO, start: int, end: int, chunk_size: int = 10_000
):
    """Send a file in chunks using Range Requests specification RFC7233

    `start` and `end` parameters are inclusive due to specification
    """
    with file_obj as f:
        f.seek(start)
        while (pos := f.tell()) <= end:
            read_size = min(chunk_size, end + 1 - pos)
            yield f.read(read_size)


def _get_range_header(range_header: str, file_size: int) -> tuple[int, int]:
    def _invalid_range():
        return HTTPException(
            status.HTTP_416_REQUESTED_RANGE_NOT_SATISFIABLE,
            detail=f"Invalid request range (Range:{range_header!r})",
        )

    try:
        h = range_header.replace("bytes=", "").split("-")
        start = int(h[0]) if h[0] != "" else 0
        end = int(h[1]) if h[1] != "" else file_size - 1
    except ValueError:
        raise _invalid_range()

    if start > end or start < 0 or end > file_size - 1:
        raise _invalid_range()
    return start, end


def range_requests_response(
    request: Request, file_path: str, content_type: str
):
    """Returns StreamingResponse using Range Requests of a given file"""

    file_size = os.stat(file_path).st_size
    range_header = request.headers.get("range")

    headers = {
        "content-type": content_type,
        "accept-ranges": "bytes",
        "content-encoding": "identity",
        "content-length": str(file_size),
        "access-control-expose-headers": (
            "content-type, accept-ranges, content-length, "
            "content-range, content-encoding"
        ),
    }
    start = 0
    end = file_size - 1
    status_code = status.HTTP_200_OK

    if range_header is not None:
        start, end = _get_range_header(range_header, file_size)
        size = end - start + 1
        headers["content-length"] = str(size)
        headers["content-range"] = f"bytes {start}-{end}/{file_size}"
        status_code = status.HTTP_206_PARTIAL_CONTENT

    return StreamingResponse(
        send_bytes_range_requests(open(file_path, mode="rb"), start, end),
        headers=headers,
        status_code=status_code,
    )

Usage

from fastapi import FastAPI


app = FastAPI()


@app.get("/video")
def get_video(request: Request):
    return range_requests_response(
        request, file_path="path_to_my_video.mp4", content_type="video/mp4"
    )

Answer 3

After posting here, I figured out how to fix it.

In the video_feed function, in the media_type parameter, it was just to put it in the same way as in the flask:

@app.get("/")
def video_feed():
    # return the response generated along with the specific media
    # type (mime type)
    # return StreamingResponse(generate())
    return StreamingResponse(generate(), media_type="multipart/x-mixed-replace;boundary=frame")

And in the function generate:

yield (b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' +
               bytearray(encodedImage) + b'\r\n')

My complete code:

http://github.com/mpimentel04/rtsp_fastapi