[使用场景](https://openscreenshot.app/zh-cn/use-cases/)

# 如何在 Chrome 中录制产品演示视频

录制浏览器标签页并带上摄像头和语音，在每次点击处添加缩放，剪辑录像并导出 MP4，全部在你电脑上的 Chrome 中完成。

作者 [OpenScreenShot](https://github.com/pghqdev/OpenScreenShot)

要从浏览器标签页录制一段简短的产品演示，使用 OpenScreenShot Chrome 扩展中的**录屏**。选择整个标签页或其中一部分，开启麦克风、标签页音频或摄像头，然后录制演示。之后编辑器会在每次点击处添加缩放，让你剪辑录像，并导出 MP4。Firefox 版只支持截图，没有录屏功能。

## 逐步录制演示

1. 在普通浏览器标签页中准备好演示：登录、加载示例数据并关闭通知。浏览器内部页面无法录制。
2. 在默认设置下，点击工具栏图标会截图。右键点击图标并取消勾选**一键 Express 模式**，这样下一次点击会打开弹出窗口。
3. 点击弹出窗口中的**录屏**。录屏标签页会在你的页面旁边打开。第一次使用时，Chrome 会请求一次截取标签页的权限。
4. 根据需要开启**麦克风**、**标签页音频**或**摄像头**，并在浏览器的权限提示中允许。
5. 保持**整个标签页**，或在你页面的画面上拖动，只录制其中一部分。
6. 点击**开始录制**。OpenScreenShot 会切换到你的页面。以平稳的节奏进行演示，点击要从容明确。
7. 按 `Alt+Shift+X` 停止，或回到录屏标签页点击**停止**。录像编辑器会在同一个标签页中打开。
8. 调整缩放，剪掉开头和结尾，然后点击**导出 MP4**。

录屏标签页还有“暂停/继续”和“取消”按钮。录制的页面上不会添加任何内容，因此视频中不会出现控件。

## 在点击处缩放

编辑器会在你光标的每次点击处添加平滑的 2 倍缩放。在时间轴上，你可以调整或删除每个缩放块。点击**添加缩放**可放置你自己的 1.5 倍、2 倍或 3 倍缩放块，例如用在一个不经点击就会变化的数字上。

点击波纹标出你点击的位置。光标设置可以显示沿你录制路径移动的平滑指针，也可以只显示点击，或隐藏指针。

如果演示转到另一个网站，点击跟踪需要在**设置**中开启可选的**跨网站录制**权限。没有这项权限，工具栏徽章会变成琥珀色，视频剩余部分的缩放和点击效果都会停止。视频本身会继续录制。

## 摄像头、语音和标签页音频

摄像头画面以圆形气泡的形式加入导出。在编辑器中，可以把它放在任意角落、改变大小或隐藏它。麦克风音量和标签页音量由各自的滑块控制，因此你可以让自己的声音盖过产品本身的声音。

先录一段简短的测试，检查音量和气泡位置。

## 剪辑录像并加边框

拖动片段开头或结尾的手柄即可剪辑。撤销和重做适用于时间轴。侧边面板中的 **Beautify** 面板会在视频周围添加内边距、圆角、阴影和背景，与截图编辑器提供的边框相同。

## 导出视频

**导出 MP4** 会把你的缩放、音轨、摄像头气泡和边框渲染进录像，并下载一个 H.264 视频、AAC 音频的 MP4 文件。要得到 WebM 文件，从按钮旁的选择器中选择 WebM。渲染期间请让编辑器标签页保持可见，因为标签页隐藏时渲染会暂停。

MP4 的上限为 4096×2304 像素，因此更大的标签页会被缩小以适应。不支持 MP4 录制的浏览器只能导出 WebM。文件按**设置**中的**文件名模板**命名。

## 限制与存储

录屏功能只截取一个浏览器标签页。它不会录制其他窗口、其他应用或你的桌面。浏览器内部页面或受保护页面无法录制。

录像、光标记录以及摄像头和麦克风数据流都保存在你设备上的浏览器存储中，直到你删除它们。开启**导出后删除录像**，可在文件保存后删除录像。除非你分享导出的文件，否则不会上传任何内容。

[录屏参考](https://openscreenshot.app/zh-cn/docs/#record)介绍了每个控件。要为同一个 bug 或功能截取静态图片，请参阅[bug 报告截图](https://openscreenshot.app/zh-cn/use-cases/bug-reports/)。

## 继续阅读

[阅读文档](https://openscreenshot.app/zh-cn/docs/)、[浏览所有指南](https://openscreenshot.app/zh-cn/blog/)，或[获取截图帮助](https://openscreenshot.app/zh-cn/support/)。

---

Canonical page: https://openscreenshot.app/zh-cn/use-cases/product-demos/