使用FFmpeg + WebSocket + HTML5视频播放直播展示windows的vps服务器上的实时画面
1.安装FFmpeg在Windows VPS上下载并安装FFmpeg(官网:https://ffmpeg.org/download.html)。
确保FFmpeg的路径添加到系统环境变量中,方便命令行调用。
2.捕获屏幕并推流
使用FFmpeg捕获Windows屏幕并将其编码为视频流。
示例命令:
ffmpeg -f gdigrab -framerate 15 -i desktop -c:v libx264 -preset ultrafast -tune zerolatency -f mpegts udp://127.0.0.1:1234
说明
gdigrab:Windows屏幕捕获工具。
-framerate 15:每秒15帧,降低资源占用。
-preset ultrafast 和 -tune zerolatency:优化编码速度和低延迟。
udp://127.0.0.1:1234:将流输出到本地UDP端口(可改为其他地址/端口)。
3.搭建轻量级流媒体服务器
在VPS上运行一个简单的流媒体服务器来接收FFmpeg的流并分发给网页。
推荐工具:Node.js + ws(WebSocket)
安装Node.js(https://nodejs.org/)。
创建一个简单的WebSocket服务器脚本(server.js):
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
const { spawn } = require('child_process');
wss.on('connection', ws => {
console.log('新用户连接');
const ffmpeg = spawn('ffmpeg', [
'-i', 'udp://127.0.0.1:1234',
'-f', 'mpegts',
'-c:v', 'copy',
'-an', // 无音频
'pipe:1'
]);
ffmpeg.stdout.on('data', data => {
ws.send(data);
});
ws.on('close', () => {
ffmpeg.kill();
});
});
console.log('WebSocket服务器运行在 ws://localhost:8080');
安装依赖:npm install ws。
运行脚本:node server.js。
4.创建网页播放器
在网页端使用HTML5 <video> 标签配合JavaScript接收WebSocket流。
示例代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>实时画面直播</title>
</head>
<body>
<video id="video" autoplay muted></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
const video = document.getElementById('video');
if (HLS.isSupported()) {
const hls = new HLS();
hls.loadSource('udp://your-vps-ip:1234'); // 替换为VPS公网IP和端口
hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'udp://your-vps-ip:1234'; // 原生支持情况
}
const ws = new WebSocket('ws://your-vps-ip:8080'); // 替换为VPS公网IP
ws.binaryType = 'arraybuffer';
ws.onmessage = (event) => {
// 处理流数据(可选)
};
</script>
</body>
</html>
将此HTML文件托管在任意Web服务器上(可以用Node.js的http-server或Nginx)。
5.优化与部署
将FFmpeg命令和Node.js脚本设置为开机自启(Windows可以用任务计划程序)。
确保VPS防火墙开放相关端口(例如1234和8080)。
如果有公网IP,直接用公网IP访问网页;如果没有,可以用内网穿透工具(如Ngrok)。
优点
简单:无需复杂配置,FFmpeg和Node.js即可搞定。
低资源占用:15帧率和快速预设减少CPU负载。
稳定:FFmpeg和WebSocket组合经过广泛验证。
无需用户操作:纯观看体验。
注意事项
如果VPS性能较低,可以进一步降低帧率(例如10帧)或分辨率(加-s 1280x720参数)。
如果需要多人观看,可以考虑用Nginx-RTMP模块替换WebSocket,配合HLS协议分发。