Mpegts.js+FFmpeg+WebSocket+Node实时视频流实现方案

原创于 2026-05-30 18:11:47 发布 · 517 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#mpegts.js #FFmpeg #WebSocket #Node

ffmpeg 同时被 3 个专栏收录

27 篇文章

订阅专栏

20 篇文章

订阅专栏

node.js

15 篇文章

订阅专栏

nodejs调用ffmpeg录屏推流到websocket地址，网页端调用mpegts.js播放视频流.

执行步骤：

1, node server.js
2, 浏览器打开test.html

server.js

const { spawn } = require('child_process');
const WebSocket = require('ws');

const express = require('express');
const http = require('http');
// 创建 WebSocket 服务器
//const wss = new WebSocket.Server({ port: 8080 });
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

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

// 启动 FFmpeg 进程
const ffmpeg = spawn('ffmpeg', [
//'-rtsp_transport', 'udp', // 使用 TCP 传输 RTSP 流（如果 UDP 不稳定）
       //'-f', 'x11grab', linux
       '-f', 'gdigrab',
       //'-s', '1920x1080', // 分辨率 linux
       //'-i', ':0.0+0,00', //linux
'-i', 'desktop', //
'-f', 'mpegts', // 输出格式为 MPEG-TS
'-c:v', 'libx264', // 使用 MPEG-1 编码
'-s', '1920x1080', // 分辨率
       '-preset', 'ultrafast',
       '-tune', 'zerolatency',
//'-b:v', '800k', // 视频比特率
'-bf', '0', // 禁用 B 帧
'-an', // 禁用音频
'pipe:1' // 输出到标准输出
]);

// 将 FFmpeg 的输出发送到 WebSocket 客户端
ffmpeg.stdout.on('data', (data) => {
if (ws.readyState === ws.OPEN) {
ws.send(data); // 发送二进制数据
}
});

// 处理 FFmpeg 的错误输出
ffmpeg.stderr.on('data', (data) => {
console.error(`FFmpeg error: ${data}`);
});

// 处理 FFmpeg 进程退出
ffmpeg.on('close', (code) => {
console.log(`FFmpeg process exited with code ${code}`);
});

// 客户端断开连接时关闭 FFmpeg 进程
ws.on('close', () => {
console.log('Client disconnected');
ffmpeg.kill(); // 杀死 FFmpeg 进程
});
});

server.listen(80, () => {

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

}
);

test.html

<!DOCTYPE html>
<html>
<head>
<title>H264流播放</title>
<script src="mpegts.js"></script>
</head>
<body>
<video id="videoPlayer" controls autoplay muted style="width: 100%; max-width: 1280px;"></video>
<script>
const videoDom = document.getElementById('videoPlayer');
if (mpegts.getFeatureList().mseLivePlayback) {
const player = mpegts.createPlayer({
type: 'mpegts', // 告知解码器这是 MPEG2-TS 格式[citation:10]
isLive: true, // 开启实时流模式
url: 'ws://127.0.0.1:80' // 需保持与FFmpeg推送地址一致
},{
               liveBufferLatencyChasing: true,
               liveBufferLatencyMaxLatency: 1.5,
               liveBufferLatencyMinRemain: 0.5
           }
           );
player.attachMediaElement(videoDom);
player.load();
player.play();
} else {
console.error("当前浏览器不支持mpegts.js解码");
}
</script>
</body>
</html>