v1.4.0 · Features
阅读约 1 分钟
使用浏览器 Screen Capture API (`getDisplayMedia`) 替代 Canvas 手动绘制录制
问题
使用浏览器 Screen Capture API (`getDisplayMedia`) 替代 Canvas 手动绘制录制
痛点
Features
解决方案
Screen Capture 录制
• 使用浏览器 Screen Capture API (`getDisplayMedia`) 替代 Canvas 手动绘制录制
• 录制内容直接捕获浏览器标签页，回放与录制视频完美一致，彻底消除双渲染不一致问题
示例
• 删除约 900 行 Canvas 手动绘制代码（intro、photo card、avatar、watermark、transport badge）
• 录制期间自动屏蔽系统声音、隐藏鼠标光标，输出更干净
• 录制期间禁止切换共享标签页，防止误操作
录制 UI 优化
• 录制期间自动隐藏菜单按钮和回放控制栏，视频画面无干扰
• 录制期间显示 DOM 水印（"Powered by Locusify"），被自然捕获进视频
• 回放结束后 2 秒自动停止录制
Refactor
• 移除 `mediabunny` 依赖（WebCodecs MP4 编码）——不再需要
• 移除 `iconPaths.ts` Canvas SVG 渲染数据——不再被引用
• 新增 `recordingActive` 状态到 replay store，统一管理录制期间的 UI 显隐
决策阶段关注点：可信度、迁移成本、结果确定性
Bottom 阶段用户已经在比较方案，真正关心的是“值不值得切换”和“能不能稳定产出”。
这时文章应聚焦决策维度：上手时间、替换成本、结果可控性，而不是泛泛功能列表。
围绕关键词“locusify 更新”应明确你的差异化判断标准，帮助读者快速做选择。
比较框架与验证方法
建议用同一份真实素材进行并行测试，并记录三项指标：完成时间、修正次数、最终可发布质量。
可参考主流程：Screen Capture 录制 • 使用浏览器 Screen Capture API (`getDisplayMedia`) 替代 Canvas 手动绘制录制 • 录制内容直接捕获浏览器标签页，回放与录制视频完美一致，彻底消除双渲染不一致问题。如果对比文章只停留在主观体验，转化说服力会很弱。
把结论写成“适用人群 + 场景边界”，而不是绝对优劣，更容易建立信任。
Bottom 转化动作
文末要给明确动作：下载试跑、导入真实素材、导出首个版本。动作越具体，决策推进越快。
同时保留风险说明与替代路径，能降低用户的心理防御，反而提升实际转化。
对于品牌词内容，相关文章应优先链接教程页与案例页，形成“比较 -> 试用 -> 复盘”的闭环。
目标关键词
如果这个更新解决了你的流程问题，下一次旅行素材可以直接试用。
用你的旅行照片试试 Locusify常见问题
什么是“locusify 更新”最实用的开始方式？
先用一段最近旅行素材跑通完整流程：导入照片、校验时间线、修复异常点、导出短版本。先完成，再优化。
如果照片里有缺失 GPS 信息怎么办？
可以先按有坐标素材生成主路线，再把无坐标照片作为补充素材放在章节节点，不要强行参与轨迹连线。
如何让输出内容更适合社交平台传播？
优先短时长和清晰节奏：开场总览、关键节点、结尾收束，同时按目标平台画幅导出，减少二次裁切损耗。
Locusify 在这个流程里适合什么场景？
如果这个更新解决了你的流程问题，下一次旅行素材可以直接试用。