无头Linux服务器将动态网页转视频流并与RTMP视频合成方案问询

工具选型 #

用Puppeteer（无头Chromium控制工具）处理动态JS网站的渲染与视频捕获，配合ffmpeg完成流的接收与合成，全程无GUI、纯命令行/脚本化。

1. 安装依赖 #

在Ubuntu服务器上执行以下命令：

sudo apt update && sudo apt install -y nodejs npm ffmpeg chromium-browser
PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1 npm install puppeteer

注：PUPPETEER_SKIP_CHROMIUM_DOWNLOAD参数让工具复用系统已安装的Chromium，节省存储空间。

2. 编写网站捕获脚本 #

创建site-capture.js文件，内容如下：

const puppeteer = require('puppeteer');
const { spawn } = require('child_process');

(async () => {
  // 启动无头Chromium实例
  const browser = await puppeteer.launch({
    executablePath: '/usr/bin/chromium-browser',
    headless: 'new',
    args: ['--no-sandbox', '--disable-dev-shm-usage', '--window-size=1920,1080']
  });

  const page = await browser.newPage();
  await page.setViewport({ width: 1920, height: 1080 });
  // 加载目标网站，等待JS渲染完成
  await page.goto('https://vscore.ch/home', { waitUntil: 'networkidle2' });

  // 以30fps帧率捕获页面视频流
  const stream = await page.captureStream(30);
  const videoTrack = stream.getVideoTracks()[0];

  // 用ffmpeg将原始视频帧转成适合合成的MPEG-TS流
  const ffmpeg = spawn('ffmpeg', [
    '-f', 'rawvideo', '-pixel_format', 'rgba', '-video_size', '1920x1080', '-framerate', '30', '-i', '-',
    '-c:v', 'libx264', '-preset', 'ultrafast', '-f', 'mpegts', 'pipe:1'
  ]);

  // 将捕获的视频帧写入ffmpeg输入管道
  const writer = new WritableStream({ write(chunk) { ffmpeg.stdin.write(chunk); } });
  videoTrack.start().pipeTo(writer);

  // 将ffmpeg处理后的流输出到标准输出，供后续合成使用
  ffmpeg.stdout.pipe(process.stdout);

  // 捕获退出信号，清理进程
  process.on('SIGINT', async () => {
    await browser.close();
    ffmpeg.kill();
    process.exit(0);
  });
})();

3. 合成网站流与游戏RTMP流 #

运行捕获脚本，同时拉取游戏RTMP流，用ffmpeg完成画面叠加（示例为将网站流放在游戏流左上角）：

node site-capture.js | ffmpeg \
  -i - \
  -i rtmp://your-game-stream-endpoint \
  -filter_complex "[1:v][0:v]overlay=x=10:y=10:shortest=1" \
  -c:v libx264 -preset fast \
  -f flv rtmp://your-final-stream-endpoint

关键优化提示 #

• 若服务器无GPU支持，在Chromium启动参数中添加--disable-gpu。
• 降低捕获分辨率（如1280x720）或改用superfast编码预设，可大幅减少CPU占用。
• 若网站存在延迟加载内容，可在page.goto后添加await page.waitForTimeout(3000)等待渲染完成。

内容的提问来源于stack exchange，提问作者Muppet1856