使用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协议分发。