深入 Remotion Canvas Capture用 Chromium 的 HTML-in-canvas 录制超高清网页视频【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion导读Remotion Canvas Capture 是 Remotion 生态中的一款高保真网页录制 Chrome 扩展它可以选定页面上的任意区域或直接录制整个网页并借助 Chromium 的实验性 HTML-in-canvas 实现输出分辨率高于本机屏幕的 H.264 MP4 或 VP9 WebM 视频。本文以 README.public.md 为骨架结合 monorepo 中该扩展的完整源码与官方安装文档为你讲清它的适用场景、安装步骤、录制工作流以及它如何用「把网页画进 Canvas」的底层机制实现超分辨率捕获——读完你既能上手录制产品演示也能理解其内部实现原理。Remotion Canvas Capture 是什么根据官方公开说明Remotion Canvas Capture 的核心能力是Records an area—or a whole webpage—as a high-resolution H.264 MP4 or VP9 WebM using Chromiums experimental HTML-in-canvas implementation.翻译成大白话就是选择一个页面区域或整个网页录制为高分辨率视频文件。它区别于传统录屏的关键点在于两点不依赖屏幕分辨率传统录屏只能拿到显示器上的像素而 Canvas Capture 使用 Chromium 的实验性 HTML-in-canvasCanvas Draw Element实现把 DOM 直接重绘到 canvas 中因此可以以高于原生显示分辨率的分辨率录制内容输出是标准编码文件录制结果可以是 H.264 编码的 MP4也可以是 VP9 编码的 WebM便于直接放入视频编辑流程或分享。Remotion 官方将其定位为high-fidelity webpage recorder最适合的产品形态是展示 UI 局部特写的产品演示视频product demos showing closeups of UI——例如放大展示某个按钮、某个复杂交互区域的录屏画面仍然清晰锐利。需要注意的是当前的官方文档明确写明Canvas Capture 目前要求 Apple SiliconM 系列Mac并且依赖一个钉死版本pinned的 Chrome for Testing相关前提将在下文详述。使用前提为什么需要固定的 Chrome for TestingHTML-in-canvas 目前是 Chromium 的实验性 API并非每个版本的浏览器都稳定可用。Remotion 团队对此的处理方式非常工程化把一个已知能工作的 Chromium 修订版本固定下来。在 monorepo 的安装文档和扩展包内部 README 中可以看到如下硬性前提操作系统Apple Silicon Mac浏览器Chrome for Testing150.0.7842.0对应 revisionr1631007——这是已知支持所需 HTML-in-canvas API 的确切版本该浏览器不接收安全更新官方建议只用来访问可信网站不能用 Chrome Canary 或普通 Chrome 替代它们会自动更新可能移除或改变这个实验性 API 的行为。为什么必须是 Chrome for Testing 而非开源 Chromium内部 README 给出了明确理由Chrome for Testing不会自动更新且与开源构建不同它内置了专有编解码支持因此浏览器既能编码也能播放本扩展产出的 H.264 MP4 文件。这与项目内通过 wxt.config.ts 声明的一组启动参数完全对应--user-data-dir.../Chrome for Testing Canvas Capture r1631007 --enable-featuresCanvasDrawElement --enable-blink-featuresCanvasDrawElement --disable-component-update --no-first-run --no-default-browser-check其中CanvasDrawElement正是 Chromium 中 HTML-in-canvas 实验能力的开关。安装与首次启动流程完整的分步安装命令以仓库内文档 installation.mdx 为准整体流程如下四步第 1 步下载已构建好的扩展。通过git clone --depth1把 Canvas Capture 的生产构建产物克隆到一个持久化位置例如$HOME/Applications/Remotion Canvas Capture Extension。注意官方文档特别强调该仓库里已经包含生产构建你不需要克隆或构建整个 Remotion。第 2 步安装固定的 Chrome for Testing。运行扩展附带的安装脚本$HOME/Applications/Remotion Canvas Capture Extension/install-browser.sh该脚本会安装上面提到的 Chrome for Testing150.0.7842.0revisionr1631007。第 3 步打开实验开关。启动 Chrome for Testing 后进入chrome://flags搜索Canvas Draw Element将其设为Enabled并选择 Relaunch重启浏览器。第 4 步以开发者模式加载扩展。打开chrome://extensions开启Developer mode开发者模式点击Load unpacked加载已解压的扩展程序在文件选择器中选中前面克隆好的Remotion Canvas Capture Extension目录。之后打开任意网页点击扩展图标即可开始录制。录制工作流区域 / 整页、格式与倍率加载扩展后录制器的交互流程见扩展包内部 README 的 Build and install 一节大致如下在网页上点击扩展图标打开录制器窗口recorder window选择输出格式H.264 MP4或VP9 WebM设定输出倍率output scale选择捕获目标拖拽框选一个区域拖拽过程中页面获得焦点但录制器窗口保持打开或直接选择Whole page整页点击Record开始录制点击Stop结束。这里有两个体现工程细节的交互都值得开发者留意Record按钮并非时刻可点。录制器只有在浏览器确认当前分辨率下 Mediabunny底层媒体封装库的高质量、实时精确编码配置可用后才启用 Record 按钮。换句话说扩展会针对你当前选定的输出尺寸先做一次编码能力预检而不是等录完才发现不行。录制过程中可以关掉录制器窗口。录制不会中断重新点击扩展图标即可再次打开录制器之后可以选择Stop and open in Convert把录制结果直接送入 Remotion Convert 网页工具继续处理无需先下载或Stop and download直接保存文件。底层实现源码级解析整个扩展是一个标准的 WXTMV3Chrome 扩展其源码位于 packages/canvas-capture-extension。先看它的目录布局与关键文件职责src/ ├── entrypoints/ │ ├── background.ts # Service Worker 入口 │ ├── capture.ts # 内容脚本入口区域捕获/整页捕获渲染源 │ ├── receiver.content.ts │ └── recorder/ # 录制器窗口 UIReact │ ├── App.tsx / main.tsx / style.css / index.html ├── public/logo.svg ├── background.ts ├── capture.ts # PageCapture核心捕获与编码逻辑 ├── content.ts # 页面内控制器选区、状态机、录制控制 ├── handoff.ts # 把录制结果交接给 Remotion Convert ├── messages.ts # 扩展与录制器之间的消息协议 ├── receiver.ts ├── recorder.ts # HTML-in-canvas 封装、编码预检 ├── selection.ts # 选区矩形工具扩展清单与权限从 wxt.config.ts 可以看到扩展采用Manifest V3权限包含activeTab、scripting、storage、unlimitedStorageunlimitedStorage显然是为承载大尺寸录制的缓存/中间数据服务默认弹窗default popup被指向录制器页面recorder.html。此外 WXT 配置还顺带定义了开发模式与生产模式的产物位置差异开发构建直接写入~/Applications/Remotion Canvas Capture Extension Dev从而保证开发产物与手动加载的生产扩展互不干扰、扩展 ID 在多个 worktree 间保持稳定。页面内容脚本以 Shadow DOM 实现选区层在 content.ts 中可以看到一套完整的录制状态机其状态字段包括supported、selecting、hasTarget、encoderSupport、outputSize、recording、finalizing、hasCompletedRecording、scale、format、status等。选区交互层通过一个覆盖全页、zIndex为2147483647、pointer-events: none的宿主元素 Shadow DOM实现.selection-layer十字光标、可捕获指针事件用于拖拽框选.selection-box/.highlight用于实时显示选区与选中后的高亮框监听pointerdown/pointermove/pointerup完成框选支持按Escape 取消选区selection.ts 中makeSelectionRectangle以 min/max 归一化拖拽方向保证反向拖拽也能得到正确矩形选区坐标再相对document.body的包围盒换算成页面内的裁剪矩形CaptureCrop之后交给捕获层。内容脚本与录制器窗口之间的所有交互都通过类型化消息协议messages.ts中的CaptureControllerRequest/CaptureControllerState完成命令包括get-state、set-options、select-area、select-whole-page、start-recording、stop-recording、open-in-convert、download等。超分辨率捕获layoutSubtree OffscreenCanvas核心捕获逻辑集中在 capture.ts这里给出了为何能高于屏幕分辨率的实现答案。文件中定义了两个关键常量const maxCanvasDimension 32_767; const maxEncodedDimension 32_766;捕获过程中页面会被临时包进一个设置了canvas.layoutSubtree true的 HTML-in-canvas 画布WrappedPage录完后再恢复原状。整页捕获的尺寸取scrollWidth / scrollHeight与视口宽高的最大值不受当前显示器像素的限制。源码还揭示了整页高保真 裁剪放大的实现策略见扩展包内部 README整页子树先按显示器的原生像素密度DPR绘制再把所选裁剪区域拷贝进一个可复用、尺寸精确的OffscreenCanvas——这正是超分辨率局部特写的来源。整个录制过程中还维护了一个预检preflight流程getCapturePreflight根据scale与crop计算输出尺寸再用 recorder.ts 中的canEncodeCapture(format, outputSize)探测该尺寸下 H.264 / VP9 编码是否可用H.264 不可用时就自动降级尝试 VP9两者都不可用则提示用户降低倍率或缩小选区。底层的媒体封装与高质量实时编码配置来自mediabunny依赖见 package.json。完成后交接下载或送入 Remotion Convert录制结束拿到File后用户有两种出口content.ts 的consumeCompletedRecording直接构造 object URL 触发a download下载或者调用 handoff.ts 交接给 Remotion Convert。background.ts 中可以看到后者的桥接实现扩展收到类型为remotion-canvas-capture-open-convert、携带captureId的消息后就打开 Remotion Convert 页面并在 URL 中附带该捕获 ID让录制结果无缝进入网页端继续处理。已知限制有两处限制来自源码与官方文档值得在使用前了解页面内容会经历包装再还原录制期间页面内容被临时放进一个layoutSubtreecanvas结束后恢复。因此依赖直接子元素 CSS 选择器如body div的网站在捕获过程中可能看起来略有不同Chrome 自带页面与 Chrome Web Store 页面不允许扩展注入脚本这些页面无法直接录制。在 monorepo 中进行开发调试如果你希望在 Remotion monorepo 内开发/调试该扩展官方流程是cd packages/canvas-capture-extension bun run dev对应 package.json 中的dev: bunx --bun wxt。WXT 会启动 Vite把开发版扩展写入独立的~/Applications/Remotion Canvas Capture Extension Dev目录并自动以持久化 profile 启动前面钉死版本的 Chrome for Testing、加载扩展。开发体验上有两个特点录制器窗口支持热更新HMR编辑src/entrypoints/recorder下的 React/CSS 时无需重新构建或重载窗口核心逻辑改动自动重载当 background、capture、receiver 或 manifest 变化时WXT 会重新构建并重载对应扩展上下文。关于本仓库的构建产物说明最后提醒一点关于该文档的定位packages/canvas-capture-extension/README.public.md是随已构建扩展一起发布的公开说明。它明确指出——本目录下的 README.md 更偏内部工程文档而公开仓库中的扩展是由 Remotion monorepo 里的packages/canvas-capture-extension包经发布流水线生成的直接在该仓库内做的修改会被后续发布覆盖bug 反馈与代码贡献都应回到 Remotion 主仓库进行。也就是说本文讲解的所有源码content.ts、capture.ts、recorder.ts、wxt.config.ts 等才是这个扩展的真实源头。小结Remotion Canvas Capture 的技术思路可以概括为一条清晰的链路钉死一个支持实验性 API 的 Chromium → 用 HTML-in-canvas 把 DOM 以任意倍率重绘到 canvas → 框选/整页裁剪后经 Mediabunny 实时编码为 H.264 MP4 或 VP9 WebM → 下载或送入 Remotion Convert 进一步处理。它把网页录屏从像素复制升级成了矢量级重绘从而实现了超越屏幕分辨率的局部特写质量。若你需要在产品演示中呈现清晰的 UI 细节且手头有 Apple Silicon Mac就可以照着官方安装文档和本文给出的源码线索立刻搭起这套录制链路。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
深入 Remotion Canvas Capture：用 Chromium 的 HTML-in-canvas 录制超高清网页视频
深入 Remotion Canvas Capture用 Chromium 的 HTML-in-canvas 录制超高清网页视频【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion导读Remotion Canvas Capture 是 Remotion 生态中的一款高保真网页录制 Chrome 扩展它可以选定页面上的任意区域或直接录制整个网页并借助 Chromium 的实验性 HTML-in-canvas 实现输出分辨率高于本机屏幕的 H.264 MP4 或 VP9 WebM 视频。本文以 README.public.md 为骨架结合 monorepo 中该扩展的完整源码与官方安装文档为你讲清它的适用场景、安装步骤、录制工作流以及它如何用「把网页画进 Canvas」的底层机制实现超分辨率捕获——读完你既能上手录制产品演示也能理解其内部实现原理。Remotion Canvas Capture 是什么根据官方公开说明Remotion Canvas Capture 的核心能力是Records an area—or a whole webpage—as a high-resolution H.264 MP4 or VP9 WebM using Chromiums experimental HTML-in-canvas implementation.翻译成大白话就是选择一个页面区域或整个网页录制为高分辨率视频文件。它区别于传统录屏的关键点在于两点不依赖屏幕分辨率传统录屏只能拿到显示器上的像素而 Canvas Capture 使用 Chromium 的实验性 HTML-in-canvasCanvas Draw Element实现把 DOM 直接重绘到 canvas 中因此可以以高于原生显示分辨率的分辨率录制内容输出是标准编码文件录制结果可以是 H.264 编码的 MP4也可以是 VP9 编码的 WebM便于直接放入视频编辑流程或分享。Remotion 官方将其定位为high-fidelity webpage recorder最适合的产品形态是展示 UI 局部特写的产品演示视频product demos showing closeups of UI——例如放大展示某个按钮、某个复杂交互区域的录屏画面仍然清晰锐利。需要注意的是当前的官方文档明确写明Canvas Capture 目前要求 Apple SiliconM 系列Mac并且依赖一个钉死版本pinned的 Chrome for Testing相关前提将在下文详述。使用前提为什么需要固定的 Chrome for TestingHTML-in-canvas 目前是 Chromium 的实验性 API并非每个版本的浏览器都稳定可用。Remotion 团队对此的处理方式非常工程化把一个已知能工作的 Chromium 修订版本固定下来。在 monorepo 的安装文档和扩展包内部 README 中可以看到如下硬性前提操作系统Apple Silicon Mac浏览器Chrome for Testing150.0.7842.0对应 revisionr1631007——这是已知支持所需 HTML-in-canvas API 的确切版本该浏览器不接收安全更新官方建议只用来访问可信网站不能用 Chrome Canary 或普通 Chrome 替代它们会自动更新可能移除或改变这个实验性 API 的行为。为什么必须是 Chrome for Testing 而非开源 Chromium内部 README 给出了明确理由Chrome for Testing不会自动更新且与开源构建不同它内置了专有编解码支持因此浏览器既能编码也能播放本扩展产出的 H.264 MP4 文件。这与项目内通过 wxt.config.ts 声明的一组启动参数完全对应--user-data-dir.../Chrome for Testing Canvas Capture r1631007 --enable-featuresCanvasDrawElement --enable-blink-featuresCanvasDrawElement --disable-component-update --no-first-run --no-default-browser-check其中CanvasDrawElement正是 Chromium 中 HTML-in-canvas 实验能力的开关。安装与首次启动流程完整的分步安装命令以仓库内文档 installation.mdx 为准整体流程如下四步第 1 步下载已构建好的扩展。通过git clone --depth1把 Canvas Capture 的生产构建产物克隆到一个持久化位置例如$HOME/Applications/Remotion Canvas Capture Extension。注意官方文档特别强调该仓库里已经包含生产构建你不需要克隆或构建整个 Remotion。第 2 步安装固定的 Chrome for Testing。运行扩展附带的安装脚本$HOME/Applications/Remotion Canvas Capture Extension/install-browser.sh该脚本会安装上面提到的 Chrome for Testing150.0.7842.0revisionr1631007。第 3 步打开实验开关。启动 Chrome for Testing 后进入chrome://flags搜索Canvas Draw Element将其设为Enabled并选择 Relaunch重启浏览器。第 4 步以开发者模式加载扩展。打开chrome://extensions开启Developer mode开发者模式点击Load unpacked加载已解压的扩展程序在文件选择器中选中前面克隆好的Remotion Canvas Capture Extension目录。之后打开任意网页点击扩展图标即可开始录制。录制工作流区域 / 整页、格式与倍率加载扩展后录制器的交互流程见扩展包内部 README 的 Build and install 一节大致如下在网页上点击扩展图标打开录制器窗口recorder window选择输出格式H.264 MP4或VP9 WebM设定输出倍率output scale选择捕获目标拖拽框选一个区域拖拽过程中页面获得焦点但录制器窗口保持打开或直接选择Whole page整页点击Record开始录制点击Stop结束。这里有两个体现工程细节的交互都值得开发者留意Record按钮并非时刻可点。录制器只有在浏览器确认当前分辨率下 Mediabunny底层媒体封装库的高质量、实时精确编码配置可用后才启用 Record 按钮。换句话说扩展会针对你当前选定的输出尺寸先做一次编码能力预检而不是等录完才发现不行。录制过程中可以关掉录制器窗口。录制不会中断重新点击扩展图标即可再次打开录制器之后可以选择Stop and open in Convert把录制结果直接送入 Remotion Convert 网页工具继续处理无需先下载或Stop and download直接保存文件。底层实现源码级解析整个扩展是一个标准的 WXTMV3Chrome 扩展其源码位于 packages/canvas-capture-extension。先看它的目录布局与关键文件职责src/ ├── entrypoints/ │ ├── background.ts # Service Worker 入口 │ ├── capture.ts # 内容脚本入口区域捕获/整页捕获渲染源 │ ├── receiver.content.ts │ └── recorder/ # 录制器窗口 UIReact │ ├── App.tsx / main.tsx / style.css / index.html ├── public/logo.svg ├── background.ts ├── capture.ts # PageCapture核心捕获与编码逻辑 ├── content.ts # 页面内控制器选区、状态机、录制控制 ├── handoff.ts # 把录制结果交接给 Remotion Convert ├── messages.ts # 扩展与录制器之间的消息协议 ├── receiver.ts ├── recorder.ts # HTML-in-canvas 封装、编码预检 ├── selection.ts # 选区矩形工具扩展清单与权限从 wxt.config.ts 可以看到扩展采用Manifest V3权限包含activeTab、scripting、storage、unlimitedStorageunlimitedStorage显然是为承载大尺寸录制的缓存/中间数据服务默认弹窗default popup被指向录制器页面recorder.html。此外 WXT 配置还顺带定义了开发模式与生产模式的产物位置差异开发构建直接写入~/Applications/Remotion Canvas Capture Extension Dev从而保证开发产物与手动加载的生产扩展互不干扰、扩展 ID 在多个 worktree 间保持稳定。页面内容脚本以 Shadow DOM 实现选区层在 content.ts 中可以看到一套完整的录制状态机其状态字段包括supported、selecting、hasTarget、encoderSupport、outputSize、recording、finalizing、hasCompletedRecording、scale、format、status等。选区交互层通过一个覆盖全页、zIndex为2147483647、pointer-events: none的宿主元素 Shadow DOM实现.selection-layer十字光标、可捕获指针事件用于拖拽框选.selection-box/.highlight用于实时显示选区与选中后的高亮框监听pointerdown/pointermove/pointerup完成框选支持按Escape 取消选区selection.ts 中makeSelectionRectangle以 min/max 归一化拖拽方向保证反向拖拽也能得到正确矩形选区坐标再相对document.body的包围盒换算成页面内的裁剪矩形CaptureCrop之后交给捕获层。内容脚本与录制器窗口之间的所有交互都通过类型化消息协议messages.ts中的CaptureControllerRequest/CaptureControllerState完成命令包括get-state、set-options、select-area、select-whole-page、start-recording、stop-recording、open-in-convert、download等。超分辨率捕获layoutSubtree OffscreenCanvas核心捕获逻辑集中在 capture.ts这里给出了为何能高于屏幕分辨率的实现答案。文件中定义了两个关键常量const maxCanvasDimension 32_767; const maxEncodedDimension 32_766;捕获过程中页面会被临时包进一个设置了canvas.layoutSubtree true的 HTML-in-canvas 画布WrappedPage录完后再恢复原状。整页捕获的尺寸取scrollWidth / scrollHeight与视口宽高的最大值不受当前显示器像素的限制。源码还揭示了整页高保真 裁剪放大的实现策略见扩展包内部 README整页子树先按显示器的原生像素密度DPR绘制再把所选裁剪区域拷贝进一个可复用、尺寸精确的OffscreenCanvas——这正是超分辨率局部特写的来源。整个录制过程中还维护了一个预检preflight流程getCapturePreflight根据scale与crop计算输出尺寸再用 recorder.ts 中的canEncodeCapture(format, outputSize)探测该尺寸下 H.264 / VP9 编码是否可用H.264 不可用时就自动降级尝试 VP9两者都不可用则提示用户降低倍率或缩小选区。底层的媒体封装与高质量实时编码配置来自mediabunny依赖见 package.json。完成后交接下载或送入 Remotion Convert录制结束拿到File后用户有两种出口content.ts 的consumeCompletedRecording直接构造 object URL 触发a download下载或者调用 handoff.ts 交接给 Remotion Convert。background.ts 中可以看到后者的桥接实现扩展收到类型为remotion-canvas-capture-open-convert、携带captureId的消息后就打开 Remotion Convert 页面并在 URL 中附带该捕获 ID让录制结果无缝进入网页端继续处理。已知限制有两处限制来自源码与官方文档值得在使用前了解页面内容会经历包装再还原录制期间页面内容被临时放进一个layoutSubtreecanvas结束后恢复。因此依赖直接子元素 CSS 选择器如body div的网站在捕获过程中可能看起来略有不同Chrome 自带页面与 Chrome Web Store 页面不允许扩展注入脚本这些页面无法直接录制。在 monorepo 中进行开发调试如果你希望在 Remotion monorepo 内开发/调试该扩展官方流程是cd packages/canvas-capture-extension bun run dev对应 package.json 中的dev: bunx --bun wxt。WXT 会启动 Vite把开发版扩展写入独立的~/Applications/Remotion Canvas Capture Extension Dev目录并自动以持久化 profile 启动前面钉死版本的 Chrome for Testing、加载扩展。开发体验上有两个特点录制器窗口支持热更新HMR编辑src/entrypoints/recorder下的 React/CSS 时无需重新构建或重载窗口核心逻辑改动自动重载当 background、capture、receiver 或 manifest 变化时WXT 会重新构建并重载对应扩展上下文。关于本仓库的构建产物说明最后提醒一点关于该文档的定位packages/canvas-capture-extension/README.public.md是随已构建扩展一起发布的公开说明。它明确指出——本目录下的 README.md 更偏内部工程文档而公开仓库中的扩展是由 Remotion monorepo 里的packages/canvas-capture-extension包经发布流水线生成的直接在该仓库内做的修改会被后续发布覆盖bug 反馈与代码贡献都应回到 Remotion 主仓库进行。也就是说本文讲解的所有源码content.ts、capture.ts、recorder.ts、wxt.config.ts 等才是这个扩展的真实源头。小结Remotion Canvas Capture 的技术思路可以概括为一条清晰的链路钉死一个支持实验性 API 的 Chromium → 用 HTML-in-canvas 把 DOM 以任意倍率重绘到 canvas → 框选/整页裁剪后经 Mediabunny 实时编码为 H.264 MP4 或 VP9 WebM → 下载或送入 Remotion Convert 进一步处理。它把网页录屏从像素复制升级成了矢量级重绘从而实现了超越屏幕分辨率的局部特写质量。若你需要在产品演示中呈现清晰的 UI 细节且手头有 Apple Silicon Mac就可以照着官方安装文档和本文给出的源码线索立刻搭起这套录制链路。【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
