I’m trying to implement live video streaming using WebSocket in a test HTML page. The backend sends video stream blobs in response to a message “start” , but the video on the frontend only displays the first frame and then freezes. Below is the HTML and JavaScript code I’m using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Streaming</title>
</head>
<body>
<video id="videoPlayer" controls width="500" height="300"></video>
<script>
const socketServerUrl = "ws://localhost:8080/ws";
const socket = new WebSocket(socketServerUrl);
socket.binaryType = 'arraybuffer';
let mediaSource = new MediaSource();
const video = document.getElementById('videoPlayer');
video.src = URL.createObjectURL(mediaSource);
let sourceBuffer;
mediaSource.addEventListener('sourceopen', () => {
sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
sourceBuffer.addEventListener('updateend', () => {
if (mediaSource.readyState === 'open' && !sourceBuffer.updating && !video.paused) {
video.play();
}
});
sourceBuffer.addEventListener('error', (event) => {
console.log('SourceBuffer error:', event);
});
// Handling WebSocket data
socket.onmessage = (event) => {
const arrayU8 = new Uint8Array(event.data);
if (arrayU8.length == 0) {
return;
}
sourceBuffer.appendBuffer(arrayU8);
};
});
socket.onerror = (error) => {
console.log('WebSocket error:', error);
};
socket.onclose = () => {
console.log('WebSocket connection closed.');
};
socket.onopen = () => {
socket.send(JSON.stringify({"action": "start"}));
};
</script>
</body>
</html>
I tried to accumulate a blob (around 700KB) on the backend and send it, in this case the video plays for a short time, so the problem is not in the video codec.
It’s as if the JavaScript only plays the first blob and then gets stuck. What could be causing the video to freeze after the first frame, and how can I resolve this issue?
PS
the order of sent and received blobs is correct