使用说明

🎬 剧作家MCP服务器——HTML转视频/截图

A. 模型上下文协议（MCP）服务器 将HTML内容或URL转换为 MP4视频, 截图，以及 幻灯片视频 使用剧作家铬。在Ubuntu/Linux上本机运行——不需要Docker。用途 VAAPI 硬件编码 可用时（回退到 libx264 软件编码）。

需求

操作系统：Ubuntu 20.04+（或基于Debian的Linux）
Node.js：v20或更高版本
FFmpeg：MP4输出和幻灯片放映需要(sudo apt install ffmpeg)
磁盘：铬无头外壳约150 MB
随机存取存储器：最低512 MB（对于更高的分辨率，建议使用1 GB）

安装

cd ~/playwright-mcp-server
bash install-native.sh

安装程序将：

检查先决条件（Node.js≥20——如果缺少则安装）
安装npm依赖项（MCP SDK、Playwright、Zod）
通过Playwright安装Chromium+系统库
构建TypeScript→ dist/index.js
自动配置克劳德代码和/或克劳德桌面
运行烟雾测试

卸载

bash ~/playwright-mcp-server/uninstall-native.sh

手动设置

cd ~/playwright-mcp-server
npm install
npx playwright install chromium
npm run build

注： Chromium构建被固定到已安装的Playwright版本。如果升级或重新安装Playwright，请重新运行 npx playwright install chromium 否则第一次录制将失败 “可执行文件不存在”.

然后添加到您的Claude配置中(~/.claude.json 或 ~/.config/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "playwright-video": {
      "command": "node",
      "args": ["/home/YOUR_LINUX_USER/playwright-mcp-server/dist/index.js"],
      "env": {
        "OUTPUT_DIR": "/home/YOUR_LINUX_USER/Videos/playwright-mcp"
      }
    }
  }
}

建筑学

┌─────────────────┐     stdio      ┌──────────────────────────────────┐
│   Claude Code   │ ◄────────────► │  Node.js process                 │
│   or Claude     │                │  ┌──────────────────────────────┐ │
│   Desktop       │                │  │  MCP Server (dist/index.js)  │ │
│                 │                │  │  ├─ html_to_video            │ │
│                 │                │  │  ├─ html_to_screenshot       │ │
│                 │                │  │  ├─ slideshow_to_video       │ │
│                 │                │  │  ├─ list_recordings          │ │
│                 │                │  │  ├─ browser_status           │ │
│                 │                │  │  └─ warm_browser             │ │
│                 │                │  ├──────────────────────────────┤ │
│                 │                │  │  Persistent Chromium (warm,  │ │
│                 │                │  │  auto-closes when idle)      │ │
│                 │                │  └──────────────────────────────┘ │
└─────────────────┘                └──────────────┬───────────────────┘
                                                  │  ffmpeg (VAAPI / libx264)
                                                  ▼
                                        ~/Videos/playwright-mcp/

Chromium实例保持不变温暖在快速重复的呼叫之间转换，以及 自动关闭后 IDLE_TIMEOUT_MS 不活动 释放 RAM（它在下次调用时透明地重新启动）。

工具

`html_to_video`

将HTML内容或URL转换为视频。默认输出为四个（H.264， VAAPI在可用时加速）以主机的屏幕分辨率。

参数	类型	默认值	说明
`html`	string	--	要呈现的HTML字符串（互斥w/ `url`)
`url`	string	--	要导航到的URL（互斥w/ `html`)
`filename`	string	auto	输出文件名（无扩展名）
`format`	enum	`mp4`	`mp4` / `mkv` （H.264，需要ffmpeg）或 `webm` （原生VP8）
`width`	数字	屏幕宽度	视口宽度（320–3840）
`height`	数字	屏幕高度	视口高度（240–2160）
`duration_ms`	number	5000	录制持续时间（1000–`MAX_DURATION_MS`)
`auto_scroll`	boolean	false	录制时自动平滑滚动
`wait_for_selector`	string	--	录制前要等待的CSS选择器
`dark_mode`	boolean	false	模拟深色配色方案
`ffmpeg_tune`	enum	`animation`	x264调谐： `animation` / `stillimage` / `film`

`html_to_screenshot`

从HTML或URL捕获PNG或JPEG。比静态视频快得多内容。

参数	类型	默认值	说明
`html` / `url`	string	--	内容源（互斥）
`filename`	string	auto	输出文件名（无扩展名）
`format`	enum	`png`	`png` （无损）或 `jpeg` （较小）
`width` / `height`	数字	屏幕	视口大小
`wait_for_selector`	string	--	捕获前要等待的CSS选择器
`selector`	string	--	仅捕获此元素（覆盖 `full_page`)
`full_page`	boolean	false	捕获整个可滚动页面的高度
`transparent`	boolean	false	保留透明度而不是白色背景（仅PNG）
`dark_mode`	boolean	false	模拟深色配色方案

`slideshow_to_video`

从幻灯片URL列表构建一个MP4，每个URL都有自己的持续时间。每幻灯片被截屏，然后每张幻灯片的剪辑被 并行编码跨CPU内核 并连接起来。需要ffmpeg。

参数	类型	默认值	说明
`slides`	数组	--	`[{ url, duration_s }, …]` （订购）
`width` / `height`	数字	屏幕	视口大小
`format`	enum	`mp4`	`mp4` / `mkv` （H.264）或 `webm` （第9页）
`filename`	string	auto	输出文件名（无扩展名）
`dark_mode`	boolean	false	模拟深色配色方案
`wait_for_selector`	string	--	每张幻灯片上要等待的CSS选择器
`ffmpeg_tune`	enum	`stillimage`	x264调谐： `stillimage` / `animation` / `film`

`list_recordings`

列出所有输出文件(.mp4, .webm, .png, .jpg)有尺寸和日期。

`browser_status`

报告持久Chromium是否正在运行，以及分辨率、格式、， ffmpeg/VAAPI可用性、空闲关机超时和输出目录。

`warm_browser`

预启动Chromium，因此第一次录制是即时的。

使用示例

记录HTML

"Record a video of this HTML:
<html><body style='display:flex;align-items:center;justify-content:center;
height:100vh;background:#1a1a2e;color:white;font-family:sans-serif'>
<h1 style='font-size:4rem'>Welcome to DAM/DAW</h1></body></html>"

全页面截图

"Take a full_page PNG screenshot of https://example.com in dark_mode"

幻灯片放映

"Make a slideshow video from these slide URLs, 4s each: <url1>, <url2>, <url3>"

环境变量

变量	默认值	描述
`OUTPUT_DIR`	`~/Videos/playwright-mcp`	视频/截图输出目录
`DEFAULT_FORMAT`	`mp4`	默认视频格式(`mp4` 或 `webm`)
`DEFAULT_WIDTH`	屏幕宽度	默认视口宽度
`DEFAULT_HEIGHT`	屏幕高度	默认视口高度
`DEFAULT_DURATION_MS`	`5000`	默认录制持续时间
`MAX_DURATION_MS`	`600000`	最大允许持续时间（10分钟）
`IDLE_TIMEOUT_MS`	`300000`	N毫秒空闲后关闭热浏览器（0=关闭）
`VAAPI_DEVICE`	`/dev/dri/renderD128`	用于VAAPI硬件编码的DRM渲染节点
`SCREEN_WIDTH` / `SCREEN_HEIGHT`	自动检测	覆盖屏幕分辨率检测

编码

MP4/MKV（VAAPI） --何时 VAAPI_DEVICE 存在并且ffmpeg具有 h264_vaapi: GPU上编码的硬件(High 轮廓， bf=3CQP qp=21).最小CPU。
MP4/MKV（软件回退） — libx264, preset slow, CRF 21, 自动线程化所有内核，按 ffmpeg_tune.
WebM --原生剧作家VP8（视频）/VP9（幻灯片），无需ffmpeg 为了 html_to_video.

mp4 和 mkv 携带相同的H.264流——相同的编码，不同的容器。 MKV便于存档/编辑（VLC，编辑器）；偏爱四个无论如何嵌入浏览器中 <video> 标签，因为MKV本身不能在网络上播放。

有用的命令

# View output
ls -la ~/Videos/playwright-mcp/

# Rebuild after code changes
cd ~/playwright-mcp-server && npm run build

# Reinstall the matching browser after a Playwright upgrade
npx playwright install chromium

许可证

麻省理工学院——专为DAM/DAW职业培训项目的教学而建。

使用说明

🎬 剧作家MCP服务器——HTML转视频/截图

需求

安装

卸载

手动设置

建筑学

工具

html_to_video

html_to_screenshot

slideshow_to_video

list_recordings

browser_status

warm_browser

使用示例

记录HTML

全页面截图

幻灯片放映

环境变量

编码

有用的命令

许可证

相关 MCP

网络摄像头服务

浏览器自动化服务

浏览器自动化服务

前端开发AI集成服务器

PC系统工具套件

浏览器自动化服务

`html_to_video`

`html_to_screenshot`

`slideshow_to_video`

`list_recordings`

`browser_status`

`warm_browser`