企业官网建设流程全解析

Recordly动态摄像头气泡叠加：3步在录屏中添加专业级Webcam画面

【免费下载链接】RecordlyCreate polished demo videos without editing skills. Mac/Windows/Linux项目地址: https://gitcode.com/gh_mirrors/re/Recordly

Recordly是一款开源录屏与视频编辑工具，它的核心卖点之一就是Webcam 动态摄像头气泡叠加：无需任何剪辑基础，只需 3 步就能在录屏画面中加上一枚带圆角、阴影、可跟随缩放的摄像头小窗，让产品演示、教程和直播回放瞬间拥有专业感。支持 Mac / Windows / Linux 全平台，免费使用。

什么是「动态」摄像头气泡？

传统录屏里摄像头画面往往是固定不动的贴片，缩放画面时比例失衡，显得很廉价。Recordly 的动态摄像头气泡不同：

• 🫧气泡样式：圆角、阴影、边距都可独立调节，观感精致
• 📐9 种位置预设 + 自定义坐标：四角、四边中点、中心，或精确到像素
• 🪞一键镜像：让摄像头画面像镜子一样自然
• 🔍随缩放呼吸（React to Zoom）：画面推近时气泡自动缩小、拉远时恢复，始终保持视觉平衡
• ✂️独立裁切：只取摄像头的核心区域，不浪费画面

下面开始 3 步实操。

第 1 步：录制前开启摄像头并选择设备

打开 Recordly 的启动界面（HUD），点击工具栏中的摄像头图标，弹出 Webcam 面板：

1. 在设备列表中选择你的摄像头，点击即开启（开启后图标高亮）
2. 录制进行中，屏幕上会出现一块可拖拽的悬浮摄像头预览，方便你确认构图和光线
3. 不想看预览时，点选「隐藏悬浮预览」即可，不影响录制

💡 开启后还可以顺便勾选麦克风与系统声音，一次录齐画面、本人出镜和旁白。

这一步的设备选择逻辑在 WebcamPopover.tsx，悬浮预览的拖拽与显示由 useWebcamPreviewOverlay.ts 驱动，感兴趣可以翻翻源码。

第 2 步：进入编辑器，把气泡调出「专业感」

停止录制后会自动进入编辑器。在左侧设置侧边栏找到Webcam标签页，所有气泡参数都在这里：

如图所示，摄像头气泡悬浮在画面右下角，与背景、时间轴上的缩放区间（2.2x、1.8x 等）完全协同——开启React to Zoom后，推镜时气泡会自动缩小，这正是「动态」二字的含义。

气泡的尺寸、圆角、定位等几何计算集中在 webcamOverlay.ts，UI 面板实现在 SettingsPanel.tsx，裁切交互在 WebcamCropControl.tsx。

第 3 步：导出 MP4 / GIF，一键出片

调好气泡后：

1. 顶部点击Export，选择格式：
   • MP4：适合完整教程、产品演示
   • GIF：适合短片段分享与社媒封面
2. 调整质量、GIF 帧率与输出尺寸（支持预设比例）
3. 点击导出，完成后可直接在系统文件管理器中查看

Recordly 的导出管线与预览使用同一套场景逻辑，气泡的圆角、阴影、随缩放缩放等效果在导出视频里会原样还原，不会出现「预览好看、导出翻车」的问题。

进阶小贴士 🚀

• 搭配合成背景：在 Frame 设置里给录屏加上渐变 / 壁纸背景再配上摄像头气泡，视觉档次再上一级。内置壁纸就在 public/wallpapers/ 目录，例如：

• 换素材：Webcam 面板支持上传、替换或移除摄像头素材，也可以把别人录好的片段当「摄像头画面」用
• 保存工程：随时保存为.recordly项目文件，下次打开气泡参数原样保留
• 光标联动：气泡之外，还可叠加光标平滑、点击回弹、光标循环等效果，源码见 src/components/video-editor/videoPlayback/

总结

用 Recordly 给录屏加一个动态摄像头气泡，真的只需要 3 步：录前开摄像头 → 编辑器调气泡 → 导出成片。位置预设、圆角阴影、镜像、随缩放呼吸这些细节全部可视化调参，新手 10 分钟就能做出不输设计稿的演示视频。项目为 AGPL 3.0 开源，欢迎从 README.md 开始探索。

【免费下载链接】RecordlyCreate polished demo videos without editing skills. Mac/Windows/Linux项目地址: https://gitcode.com/gh_mirrors/re/Recordly