How to broadcast a video stream without reloading the page?

I created a node js server to 1) receive images in udp and transform them into video and
2) display it on a website

I tried but I don’t understand how to broadcast the video live without having to reload the page

node js server code :

const express = require('express');
const dgram = require('dgram');
const fs = require('fs');
const ffmpeg = require('fluent-ffmpeg');
const path = require('path');
const WebSocket = require('ws');

const app = express();
const httpPort = 3000;

const imageDir = path.join(__dirname, 'images');
if (!fs.existsSync(imageDir)) {
    fs.mkdirSync(imageDir);
}

let imageCount = 0;

const udpPort = 15002;
const udpHost = '127.0.0.1';
const server = dgram.createSocket('udp4');

const wss = new WebSocket.Server({ noServer: true });


const createVideo = () => {
    const outputVideo = path.join(__dirname, 'output_video.mp4');

    ffmpeg()
        .input(path.join(imageDir, '%d.jpg'))
        .inputOptions('-framerate 30')
        .output(outputVideo)
        .outputOptions('-c:v libx264')
        .on('end', () => {
            console.log('Vidéo créée avec succès !');

            wss.clients.forEach(client => {
                if (client.readyState === WebSocket.OPEN) {
                    client.send('new-video');
                }
            });
        })
        .on('error', (err) => {
            console.log('Erreur lors de la création de la vidéo:', err);
        })
        .run();
};


app.get('/feed-video', (req, res) => {
    const videoPath = path.join(__dirname, 'output_video.mp4');
    res.sendFile(videoPath);
});

server.on('message', (msg, rinfo) => {
    console.log(`Reçu message de ${rinfo.address}:${rinfo.port}`);

    const imageFilePath = path.join(imageDir, `${imageCount}.jpg`);
    fs.writeFileSync(imageFilePath, msg);

    console.log(`Image ${imageCount}.jpg reçue et sauvegardée`);


    imageCount++;


    if (imageCount > 100) {
        createVideo();
        imageCount = 0;
    }
});


server.on('listening', () => {
    const address = server.address();
    console.log(`Serveur UDP en écoute sur ${address.address}:${address.port}`);
});


app.server = app.listen(httpPort, () => {
    console.log(`Serveur HTTP et WebSocket démarré sur http://localhost:${httpPort}`);
});

app.server.on('upgrade', (request, socket, head) => {
    wss.handleUpgrade(request, socket, head, (ws) => {
        wss.emit('connection', ws, request);
    });
});


server.bind(udpPort, udpHost);

the html page :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drone Video Feed</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #1a1a1a;
            color: #ffffff;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        h1 {
            margin-bottom: 20px;
            font-size: 2rem;
            text-shadow: 1px 1px 5px #00bcd4;
        }

        video {
            width: 80%;
            max-width: 600px;
            border: 2px solid #00bcd4;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
<h1>Drone Video Feed</h1>
<video id="video" controls autoplay></video>

<script>
    const video = document.getElementById('video');
    const ws = new WebSocket('ws://localhost:3000');

    ws.onmessage = (event) => {
        const blob = new Blob([event.data], { type: 'video/mp4' });
        video.src = URL.createObjectURL(blob);
        video.play();
    };
</script>
</body>
</html>

please can you help me to resolve this problem?

I tried with websocket but I didn’t succeed.
the video is correctly created and when I reload the page the new video is played by the player

however I would have been able to see the live stream without having to reload my page all the time