我正在编写通过 websocket 传输 mp4 视频的代码

Question

编写通过 websocket 传输 mp4 视频的代码。
通过 websocket 从服务器端发送块数据到客户端，并在客户端想要播放该视频。
数据到达客户端但不播放视频，为什么？

server.js代码：

const WebSocket = require('ws');
const fs = require('fs');
const path = require('path');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
    console.log('Client connected');

    const filePath = path.join(__dirname, 'play.mp4');
    const stream = fs.createReadStream(filePath);
let count =0
    stream.on('data', (chunk) => {
        ws.send(chunk);
        // if(count<1)console.log(new Uint8Array(chunk) )
        count++;
    });

    stream.on('end', () => {
        ws.close();
    });

    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

console.log('WebSocket server is running on ws://localhost:8080');

index.html代码：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebSocket Video Stream</title>
</head>

<body>
    <video  id="video" autoplay controls></video>
    <script>
        const video = document.getElementById('video');
        const ws = new WebSocket('ws://localhost:8080');

        let mediaSource = new MediaSource();
        let queue = [];
        let sourceBuffer;

        mediaSource.addEventListener('sourceopen', () => {
            try {
                // sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001e, mp4a.40.2"');
                sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001e, mp4a.40.2"');

                sourceBuffer.addEventListener('updateend', () => {
                    if (queue.length > 0 && !sourceBuffer.updating) {
                        try {
                            sourceBuffer.appendBuffer(queue.shift());
                        } catch (error) {
                            console.error('Error appending buffer in updateend:', error);
                        }
                    }
                });

                sourceBuffer.addEventListener('error', (event) => {
                    console.error('SourceBuffer error:', event);
                });
            } catch (error) {
                console.error('Error adding SourceBuffer:', error);
            }
        });

        ws.onmessage = (event) => {
            if (!sourceBuffer) return; // Ensure sourceBuffer is defined

            const reader = new FileReader();
            reader.onload = () => {
                try {
                    if (sourceBuffer.updating || mediaSource.readyState !== 'open') {
                        return;
                    }

                    const arrayBuffer = reader.result;
                    const uint8Array = new Uint8Array(arrayBuffer);

                    console.log('Received data:', uint8Array);
                    queue.push(uint8Array);

                    if (!sourceBuffer.updating && queue.length > 0) {
                        try {
                            sourceBuffer.appendBuffer(queue.shift());
                        } catch (error) {
                            console.error('Error appending buffer:', error);
                        }
                    }
                } catch (error) {
                    console.error('Error processing data:', error);
                }
            };

            reader.onerror = (error) => {
                console.error('FileReader error:', error);
            };

            reader.readAsArrayBuffer(event.data);
            console.log("eventdata= ",event.data)
        };

        mediaSource.addEventListener('error', (event) => {
            console.error('MediaSource error:', event);
        });

        video.src = URL.createObjectURL(mediaSource);
    </script>
</body>

</html>

在客户端有数据到来但未播放视频。

要播放的视频：

https://drive.google.com/file/d/1KaaBd-orhc-C5Uc1YVaL-QCAdHla6e4e/view?usp=sharing

请从提供的链接下载视频，然后阅读视频数据。不要直接从链接读取视频数据。
如果视频是（video.ts）文件那么我需要更改什么？.
只想通过 websocket 进行流传输，而不是任何其他方法。
非常感谢您的帮助。

Answer 1

我看到的唯一错误是你使用：

mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001e, mp4a.40.2"');

解决方案：

将

codecs="avc1.64001e

替换为

codecs="avc1.640820

，这对于该 MP4 文件是正确的。

mediaSource.addSourceBuffer('video/mp4; codecs="avc1.640820, mp4a.40.2"');

我正在编写通过 websocket 传输 mp4 视频的代码

问题描述投票：0回答：1

1个回答

最新问题

我正在编写通过 websocket 传输 mp4 视频的代码

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1