ARTICLE DETAIL

资讯详情

深耕商务建站与企业官网运营的一线实战洞察。

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

Recordly动态摄像头气泡叠加:3步在录屏中添加专业级Webcam画面 Recordly动态摄像头气泡叠加3步在录屏中添加专业级Webcam画面【免费下载链接】RecordlyCreate polished demo videos without editing skills. Mac/Windows/Linux项目地址: https://gitcode.com/gh_mirrors/re/RecordlyRecordly是一款开源录屏与视频编辑工具它的核心卖点之一就是Webcam 动态摄像头气泡叠加无需任何剪辑基础只需 3 步就能在录屏画面中加上一枚带圆角、阴影、可跟随缩放的摄像头小窗让产品演示、教程和直播回放瞬间拥有专业感。支持 Mac / Windows / Linux 全平台免费使用。什么是「动态」摄像头气泡传统录屏里摄像头画面往往是固定不动的贴片缩放画面时比例失衡显得很廉价。Recordly 的动态摄像头气泡不同气泡样式圆角、阴影、边距都可独立调节观感精致9 种位置预设 自定义坐标四角、四边中点、中心或精确到像素一键镜像让摄像头画面像镜子一样自然随缩放呼吸React to Zoom画面推近时气泡自动缩小、拉远时恢复始终保持视觉平衡✂️独立裁切只取摄像头的核心区域不浪费画面下面开始 3 步实操。第 1 步录制前开启摄像头并选择设备打开 Recordly 的启动界面HUD点击工具栏中的摄像头图标弹出 Webcam 面板在设备列表中选择你的摄像头点击即开启开启后图标高亮录制进行中屏幕上会出现一块可拖拽的悬浮摄像头预览方便你确认构图和光线不想看预览时点选「隐藏悬浮预览」即可不影响录制 开启后还可以顺便勾选麦克风与系统声音一次录齐画面、本人出镜和旁白。这一步的设备选择逻辑在 WebcamPopover.tsx悬浮预览的拖拽与显示由 useWebcamPreviewOverlay.ts 驱动感兴趣可以翻翻源码。第 2 步进入编辑器把气泡调出「专业感」停止录制后会自动进入编辑器。在左侧设置侧边栏找到Webcam标签页所有气泡参数都在这里参数作用新手建议Position位置预设 / 自定义 X、Y先用「右下角」预设再微调Width / Height气泡宽高宽度 12% 左右最协调Crop裁切摄像头画面裁掉背景杂物聚焦人脸Margin气泡与画面边缘的距离10%~15% 不易顶边Roundness圆角强度拉满接近圆形气泡Shadow阴影加一点立体感立刻提升Mirror镜像画面默认开启更像镜子React to Zoom跟随缩放呼吸建议开启如图所示摄像头气泡悬浮在画面右下角与背景、时间轴上的缩放区间2.2x、1.8x 等完全协同——开启React to Zoom后推镜时气泡会自动缩小这正是「动态」二字的含义。气泡的尺寸、圆角、定位等几何计算集中在 webcamOverlay.tsUI 面板实现在 SettingsPanel.tsx裁切交互在 WebcamCropControl.tsx。第 3 步导出 MP4 / GIF一键出片调好气泡后顶部点击Export选择格式MP4适合完整教程、产品演示GIF适合短片段分享与社媒封面调整质量、GIF 帧率与输出尺寸支持预设比例点击导出完成后可直接在系统文件管理器中查看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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表
PREV
查看更多资讯
NEXT
返回资讯列表