The video on the site does not play

Question

I want to make a web service to stream video from my webcam. In the server code, we access the camera and take the image, then we pass it to my simple site where the video should be broadcast. When starting the server with the command: http://localhost:8000/video.html, the site opens and the camera turns on (when my camera is working, a white light is lit next to it) and turns off almost immediately. The following message is also displayed in the console: ('127.0.0.1', 55917) - "WebSocket /video_stream" [accepted]. But the site does not play video from the camera...

Here is the FastAPI server code

# import the necessary packages
import uvicorn
import nest_asyncio
import cv2
from fastapi import FastAPI, WebSocket
from fastapi.staticfiles import StaticFiles
import asyncio
import mediapipe as mp

app = FastAPI()

# The function of processing frames from a video stream and sending them via WebSocket
async def video_stream(websocket: WebSocket):
    mp_drawings = mp.solutions.drawing_utils
    mp_pose = mp.solutions.pose
    cap = cv2.VideoCapture(0)
    with mp_pose.Pose(min_detection_confidence=0.5, min_tracking_confidence=0.5) as pose:
        while True:
            ret, frame = cap.read()
            if not ret:
                break
            # Convert the image to WEBM format and send it via WebSocket
            image = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
            image.flags.writeable = False
            result = pose.process(image)
            image.flags.writeable = True
            image = cv2.cvtColor(image, cv2.COLOR_RGB2BGR)
            _, image_buffer = cv2.imencode('.webm', image, [cv2.IMWRITE_WEBP_QUALITY, 80])
            try:
                await websocket.send_bytes(image_buffer.tobytes())
            except:
                break
            await asyncio.sleep(0.1)  # 0.1 second delay
    #cap.release()

# Route to connect to WebSocket
@app.websocket("/video_stream")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()
    while True:
        try:
            await video_stream(websocket)
        except:
            break

# Path for static files
app.mount("/", StaticFiles(directory="static"), name="static")

if __name__ == '__main__':
    uvicorn.run(app, host="0.0.0.0", port=8000, access_log=False)

And here is the code of my site

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Live Video Stream</title>
    <base href="/">
</head>
    <body>
        <video id="video" width="640" height="480" autoplay></video>
        <script type="text/javascript">
            var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
            var ws_url = ws_scheme + '://' + window.location.host + '/video_stream';
            var video = document.getElementById('video');
            var ws = new WebSocket(ws_url);
            ws.binaryType = 'arraybuffer';
            var mediaSource = new MediaSource();
            video.src = URL.createObjectURL(mediaSource);

            mediaSource.addEventListener('sourceopen', function() {
                var sourceBuffer = mediaSource.addSourceBuffer('video/webm');
                var queue = [];

                ws.onmessage = function(event) {
                    queue.push(event.data);
                    if (!sourceBuffer.updating && queue.length > 0) {
                        sourceBuffer.appendBuffer(queue.shift());
                    }
                };

                setInterval(function() {
                    if (queue.length > 0 && !sourceBuffer.updating) {
                        sourceBuffer.appendBuffer(queue.shift());
                    }
                }, 500);
            });
        </script>
    </body>
</html>

Help me play webcam videos on my site

I tried changing the encoding and many other things. Nothing helped so far...

The video on the site does not play

0 Answers0