莫姐1. 项目背景与核心价值
去年参与某智慧城市项目时，客户突然提出一个需求："能否在三维地图界面直接录制操作演示视频？"这个看似简单的功能需求，却让我们团队折腾了整整两周。今天就把这套基于Vue3+Cesium的屏幕录制解决方案完整分享出来，包含那些官方文档不会告诉你的性能优化技巧。
在三维GIS应用场景中，操作录屏功能的价值远超普通网页：
- 城市规划汇报时实时记录方案调整过程
- 应急指挥系统中回溯灾害模拟推演
- 远程协作时标注重点区域并生成讲解视频
传统录屏软件无法捕获Cesium的WebGL渲染层，而浏览器原生API又存在帧率不稳定问题。接下来要介绍的这套方案，实测在中等配置电脑上能稳定保持45FPS的录制帧率。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构设计
2.1 核心组件选型
这套方案的技术栈组合就像精密的手表齿轮，每个部件都有其不可替代的作用：
- Cesium核心层：采用1.95版本，其新引入的
Scene.debugShowFramesPerSecond属性对帧率监控至关重要 - 录制控制器：基于MediaRecorder API封装，关键解决了WebM格式的兼容性问题
- Canvas捕获：通过
HTMLCanvasElement.captureStream()获取渲染流 - 状态管理：Pinia管理录制状态机，处理复杂的交互状态（准备→录制→暂停→生成）
特别注意：必须使用Chrome 94+或Edge 109+浏览器，Firefox在混合录制系统音频时存在已知bug
2.2 性能优化设计
三维场景录制的性能瓶颈主要出现在三个环节：
- 内存泄漏：未释放的纹理缓存会导致录制10分钟后内存暴涨
- 帧率波动：相机快速移动时容易丢帧
- 文件体积：原始视频流1分钟可达300MB
我们的解决方案：
javascript复制// 关键帧采样优化（实测减少42%体积）
const mediaRecorder = new MediaRecorder(stream, {
mimeType: 'video/webm;codecs=vp9',
videoBitsPerSecond: 3500000,
bitsPerSecond: 3500000