Remotion Canvas Capture 扩展详解用 Chrome 实验性 HTML-in-canvas 把网页录制成高清 MP4/WebM【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotionRemotion Canvas Capture 是 Remotion 仓库中的一个 Chrome 扩展packages/canvas-capture-extension它基于 Chromium 的实验性 HTML-in-canvas 实现可以将网页中的任意区域或整个页面录制为高分辨率的 H.264 MP4 或 VP9 WebM 视频。读完本文你将掌握如何在 macOS 上搭建该扩展所需的固定版本 Chrome for Testing 环境、开发与构建扩展的完整流程、录制工作流的交互细节以及扩展底层的页面包装、离屏画布裁剪、Mediabunny 实时编码与免下载直传 Convert的源码级实现原理。一、扩展定位与核心技术依赖Canvas Capture 扩展的核心价值在于在浏览器内直接录制网页录制不依赖屏幕捕获而是通过 Chromium 的 HTML-in-canvas 实验性 APICanvasDrawElement特性把 DOM 子树当作图像绘制到画布上再逐帧送入硬件编码器。这带来两个关键特性输出分辨率可超过屏幕显示尺寸整页内容按显示器的原生像素密度绘制再按用户选择的输出比例scale裁剪合成到OffscreenCanvas因此可以录出高于屏幕物理分辨率的视频输出即 Remotion Convert 的输入录制结束后可以直接把视频送入 remotion.dev/convert 在线编辑无需先下载到本地。扩展的运行时依赖声明在 package.json 中mediabunny浏览器端媒体封装/编解码库、React/React-DOM录制器窗口 UI开发依赖包括 WXT 0.21.4Manifest V3 扩展框架、Vite 7.3.6 与vitejs/plugin-react。二、为什么必须使用固定版本的浏览器该扩展依赖 Chromium 实验性的 HTML-in-canvas 实现README 中明确指定了已知可用的精确版本Chrome for Testing150.0.7842.0revisionr1631007且要求在 Apple Silicon 的 mac-arm64 构建上运行。选择该构建的原因有三个这是已知可运行所需 HTML-in-canvas 实现的确切 Chromium 版本Chrome for Testing不会自动更新而 Chrome Canary 或普通 Chrome 会自动更新可能移除或改动这个实验性 API与开源 Chromium 构建不同Chrome for Testing内置专有编解码器支持浏览器既能编码又能回放本扩展产出的 H.264 MP4。构建脚本 rebuild-extension.sh 在运行时会校验--version输出必须严格等于Google Chrome for Testing 150.0.7842.0版本不符直接报错退出——从源码结构看这种版本钉死是刻意为之的兼容性保护。安全前提由于该浏览器被有意固定且不会接收安全更新README 明确要求只用于可信网站。三、macOS 上固定浏览器的完整搭建步骤1. 获取并固定浏览器下载 Chrome for Testing150.0.7842.0revisionr1631007的 mac-arm64 压缩包解压后把应用移动到一个持久化位置并重命名例如/Users/jonathanburger/Applications/Recorder Chrome.app2. 以专用 Profile 启动并开启 HTML-in-canvas 特性/Users/jonathanburger/Applications/Recorder Chrome.app/Contents/MacOS/Google Chrome for Testing \ --user-data-dir/Users/jonathanburger/Library/Application Support/Chrome for Testing Canvas Capture r1631007 \ --enable-featuresCanvasDrawElement \ --enable-blink-featuresCanvasDrawElement \ --disable-component-update \ --no-first-run \ --no-default-browser-check各参数含义--user-data-dir使用独立的专用 Profile与日常浏览器互不干扰--enable-featuresCanvasDrawElement与--enable-blink-featuresCanvasDrawElement同时从 Chrome 层与 Blink 层开启 HTML-in-canvas 特性这是扩展必需的前置条件--disable-component-update禁用组件自动更新--no-first-run、--no-default-browser-check跳过首运行向导和默认浏览器检查。上述参数与 wxt.config.ts 中webExt.chromiumArgs的定义完全一致webExt.binaries.chrome也指向同一个Recorder Chrome.app路径说明开发模式启动的就是这套固定环境。3. 手动加载解包扩展生产模式下扩展安装在持久化目录/Users/jonathanburger/Applications/Remotion Canvas Capture Extension在chrome://extensions中开启Developer mode选择Load unpacked指向该目录即可。若 HTML-in-canvas 尚未启用还需在chrome://flags/#canvas-draw-element中将 Canvas Draw Element 设为 Enabled 并完全重启浏览器。四、开发工作流WXT Vite HMR如果已经用 Canvas Capture 专用 Profile 启动了 Recorder Chrome先将其关闭然后cd packages/canvas-capture-extension bun run devdev脚本实际执行bunx --bun wxt见 package.json。WXT 会启动 Vite把开发版扩展写入持久化目录~/Applications/Remotion Canvas Capture Extension Dev——这个路径由 wxt.config.ts 中的outDir按npm_lifecycle_event dev动态决定生产构建则输出到dist以所需的特性 flags 和持久化 Profile 启动固定版本的 Chrome for Testing并自动加载扩展提供差异化热更新在src/entrypoints/recorder下编辑 React 组件或 CSS 时走Vite HMR无需重建或重新加载录制器窗口而 background、capture、receiver 或 manifest 变更时WXT 才会重建并重新加载对应的扩展上下文。开发扩展与手动加载的生产扩展是两套独立实体因此它们的路径和扩展 ID 在多个 git worktree 下保持稳定——这对依赖固定扩展 ID 的消息路由和 storage 命名空间很重要。五、构建与安装从仓库根目录运行构建脚本.agents/skills/canvas-capture-extension/scripts/rebuild-extension.sh --repo $PWD脚本支持三个参数见脚本头部 usage 与参数解析逻辑参数作用--repo PATH指定包含packages/canvas-capture-extension的 Remotion 仓库路径缺省时尝试git rev-parse --show-toplevel--install-dir PATH覆盖默认安装目录默认/Users/jonathanburger/Applications/Remotion Canvas Capture Extension--browser-executable PATH浏览器不在默认路径时指定 Chrome for Testing 可执行文件位置脚本的执行逻辑结合 rebuild-extension.sh 源码校验浏览器可执行文件存在且版本严格等于150.0.7842.0revisionr1631007要求环境中有bun然后进入包目录执行bun run make即bunx --bun wxt build生成生产 WXT 包校验dist产物完整性manifest.json、background.js、capture.js、recorder.html、logo.svg、content-scripts/receiver.js及assets/下的 recorder CSS 缺一即报错把完整解包扩展安装到 worktree 之外的持久化目录。安装后按 README 流程操作打开chrome://extensions→ 启用 Developer mode → Load unpacked → 选择安装目录 → 确认chrome://flags/#canvas-draw-element已启用。六、录制工作流从选区到 Convert在任意网页上点击扩展图标会打开录制器窗口manifest 中action.default_popup指向recorder.html见 wxt.config.ts。完整交互流程选择格式H.264 MP4 或 VP9 WebM源码中对应CaptureFormat mp4 | webm见 messages.ts设置输出比例scale 参数决定输出分辨率相对布局尺寸的倍率选择区域拖拽选择一块区域拖拽期间页面保持聚焦录制器窗口仍然打开或选择Whole page录整页。选区几何计算见 selection.ts 中的makeSelectionRectangle按下 Record录制器会显示圆整后的输出尺寸并且只有当浏览器确认 Mediabunny 的精确高质量实时配置受支持后才会启用 Record 按钮录制中即使关闭录制器窗口录制也会继续进行重新点击扩展图标可再次打开停止Stop and open in Convert会把录制结果直接加载到 remotion.dev/convert无需先下载或Stop and download直接保存文件。已知限制README 明确说明录制期间页面内容会被临时放进一个layoutSubtree画布中录制结束后恢复。依赖直接子代 CSS 选择器如body div的站点在录制期间可能显示不同Chrome 自带页面chrome://与 Chrome 商店页面不允许扩展脚本注入无法录制。七、源码级原理页面如何被画成视频1. 整页包装layoutSubtree画布录制整页时capture.ts 中的wrapWholePage()执行一次DOM 搬家创建一个canvas设置canvas.layoutSubtree true和layoutsubtree属性使其内部子树按真实布局渲染把body的全部子节点移入画布内的一个绝对定位divinset: 0画布尺寸取自getWholePageSize()——即documentElement/body的scrollWidth/scrollHeight与window.innerWidth/innerHeight取最大值从而覆盖完整可滚动页面而不仅是视口用MutationObserver监听body的childList变化录制期间页面新加到 body 的节点会被动态移入内容容器保证捕获不丢内容结束时restore()把节点按原顺序移回 body 并移除画布——这就是 README 所说临时放置、事后恢复的实现也解释了直接子代选择器为何会受影响内容在录制期间从body的直接子代变成了画布内div的孙代。2. 每帧绘制显示画布 离屏裁剪画布PageCapture类维护两级画布见 capture.ts显示画布包装用的layoutSubtreecanvassyncDisplayCanvasSize将其内部分辨率设为width × devicePixelRatio即按显示器原生像素密度绘制整页子树捕获画布OffscreenCanvas尺寸由syncCanvasSize设为裁剪区域 × scale且经getScaledCanvasSize向下取整到偶数H.264/VP9 的宏块对齐要求。每帧的绘制流程由画布的paint事件#onPaint触发先用context.drawElementImage(content, ...)把内容元素画进显示画布再用canvas.captureElementImage(content)取出元素图像在离屏画布上以 3 种底色白、html背景、body背景逐层铺底后drawElementImage裁剪绘制到目标尺寸最后交给编码器。同时ResizeObserver监听内容尺寸变化并调用canvas.requestPaint()请求重绘。尺寸上限由validateCaptureSize强制执行显示画布任一边不超过32767像素编码帧任一边按 scale 放大后不超过32766偶数像素超限抛出带提示的错误。3. 编码Mediabunny 实时高质量档recorder.ts 中的CanvasCaptureRecorder负责编码启动前调用assertCanEncodeCapture即 Mediabunny 的canEncodeVideo按QUALITY_HIGH码率、latencyMode: realtime探测avcMP4或vp9WebM在该分辨率下是否可编码——这正是 UI 上Record 按钮只在浏览器确认支持后才可用的实现startRecording创建BufferTargetOutputMp4OutputFormat或WebMOutputFormatVideoSampleSource每帧通过VideoFrame带微秒级timestamp/duration入队编码循环串行消费、失败即标记hasEncodingError并丢弃后续帧停止时finalizeRecording等待最后一帧编码完成然后把录制元数据起止时间、captureMetadata的 density/内容矩形/画布尺寸/视口滚动、鼠标移动轨迹mouseMovements、指针点击pointerClicks序列化为 JSON通过 Mediabunny 的Conversion以tags.raw写入文件标签REMOTION_CAPTURE_DATA并重新封装——鼠标轨迹与点击不占用视频轨而是随文件元数据一起交付。4. 免下载直传 Convertstorage 分块 消息协议Stop and open in Convert 的实现横跨三个文件handoff.tsopenCaptureInConvert生成随机captureId把视频文件按1MBCHUNK_SIZE切片base64 编码后以remotion-canvas-capture:id:chunk:index键写入browser.storage.local对应 manifest 的unlimitedStorage权限另存一条 metadata文件名、MIME 类型、分块数最后发消息通知 background 打开 Convert 页面失败时回滚已写入的键receiver.ts注入到 Convert 页面的内容脚本识别 URL 中的?canvas-captureid参数等页面发出 ready 消息后按序读出分块经window.postMessage以start/chunk/complete三段式协议投递投完即删除 storage 键并清理 URL 参数全程校验 originmessages.ts录制器 UI 与控制端之间的命令协议get-state、set-options、select-area、select-whole-page、start-recording、stop-recording、open-in-convert、download-recording等及控制器状态机encoderSupport: unavailable | checking | supported | unsupported等字段。5. 扩展结构与权限扩展为 Manifest V3wxt.config.ts 中manifestVersion: 3权限为activeTab、scripting、storage、unlimitedStorage。源码入口组织如下文件职责src/background.ts后台脚本图标点击、打开 Convert 等运行时消息src/capture.ts页面捕获核心整页包装、画布绘制、尺寸校验、PageCapture类src/recorder.tsCanvasCaptureRecorder编码循环、HTML-in-canvas 能力检测、API 类型声明src/content.ts / src/receiver.content.ts内容脚本页面侧控制器与 Convert 侧接收端src/entrypoints/recorder/录制器弹窗 UIReact index.htmlsrc/handoff.ts分块存储与直传 Convertsrc/selection.ts选区矩形几何计算八、适用前提与限制小结平台限定README 描述的搭建流程面向 macOSApple Silicon mac-arm64 Chrome for TestingLinux/Windows 用户需自行寻找含相同 HTML-in-canvas 实现的构建源码中的能力检测函数isHtmlInCanvasAvailable会在运行时校验requestPaint、captureElementImage、drawElementImage与VideoFrame是否齐备不满足则抛出指引用户开启chrome://flags/#canvas-draw-element的错误浏览器钉死在150.0.7842.0/r1631007升级浏览器会使构建脚本直接失败该浏览器无安全更新仅限可信站点使用录制期间页面 DOM 被临时改写依赖直接子代选择器的站点外观可能变化结束后自动恢复chrome://页面与 Chrome 商店页面不可录制输出上限编码帧任一边 ≤ 32766 像素偶数显示画布任一边 ≤ 32767 像素超出需降低 scale 或缩小选区扩展包为private随 Remotion monorepo 以 workspace 方式构建版本与仓库其他包同步当前4.0.521。总体而言Canvas Capture 把浏览器实验性 HTML-in-canvas API Mediabunny 浏览器端编码 Remotion Convert 在线编辑串成了一条从网页选区到可编辑视频工程的完整链路其源码页面包装、离屏裁剪、元数据注入、分块直传也展示了在纯浏览器环境内做高清录制的工程化做法。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考