纵享丝滑!Cesium + ffmpegserver 生成高质量动态视频【逐帧生成】

工作中需要提供一些在三维场景下的视频动画素材,屏幕录制会出现掉帧等其他问题,看到 ffmpegserver 后,眼前一亮

Cesium + ffmpegserver 生成高质量视频

1.自建 ffmpegserver

首先,克隆 ffmpegserver 仓库代码

bash 复制代码
git clone https://github.com/greggman/ffmpegserver.js.git

安装依赖

bash 复制代码
cd ffmpegserver.js && npm install

启动服务

bash 复制代码
npm start

ffmpegserver 中有两个 demo 案例,可以打开源代码看看具体实现

效果的预览地址是:

1.普通 canvas案例: http://localhost:8080/test.html

2.threejs 案例 http://localhost:8080/test2.html

原理是通过一帧一帧截取图片,最后用 ffmpeg 逐帧将图片合成为视频。

2. 在 cesium中 集成

以定点环绕来举例

首先,初始化 CCapture 实例

js 复制代码
const capturer = new CCapture({
  format: 'ffmpegserver',
  framerate: 60,
  onProgress: () => {},
  extension: '.mp4',
  name: 'cesium'
});

开始环绕

js 复制代码
const lat = 45.2013
const lng = 82.08887889
const position = Cesium.Cartographic.fromDegrees(lng, lat);
// 获取点位所在地形高度
const updatedPosition = await Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, [position]);
const [destination] = updatedPosition;
const height = destination.height;

capturer.start();

const center = Cesium.Cartesian3.fromDegrees(lng, lat, height);
let heading = Cesium.Math.toRadians(40.0);
const pitch = Cesium.Math.toRadians(-45.0);
const range = 2000.0;
let totalRotation = 0
const speed = 1; // 环绕速度,每帧转多少度

capturer.capture(viewer.canvas);

function showVideoLink(url, size) {
  size = size ? ' [size: ' + (size / 1024 / 1024).toFixed(1) + 'meg]' : ' [unknown size]';
  let filename = url;
  const slashNdx = filename.lastIndexOf('/');
  if (slashNdx >= 0) {
    filename = filename.substr(slashNdx + 1);
  }
  // 视频下载链接
  console.log("http://127.0.0.1:8080" +  url)
}

function animate() {
  if (totalRotation >= 360) {
    if (screenRecording) {
      capturer.stop();
      capturer.save(showVideoLink);
    }
    totalRotation = 0;
    return;
  }
  viewer.render();
  capturer.capture(viewer.canvas); // 一定要加这一行,不然视频是纯黑的
  totalRotation += speed;
  heading = Cesium.Math.toRadians(x);
  viewer.camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, range));
  viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
  requestAnimationFrame(animate);
}

animate();
相关推荐
脑子缺根弦3 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
肥or胖11 小时前
【FFmpeg 快速入门】本地播放器 项目
开发语言·qt·ffmpeg·音视频
笑虾12 小时前
bat 批处理实现 FFmpeg 命令导出 mov 到 png 序列帧
ffmpeg·png·mov·序列帧
DogDaoDao14 小时前
GitHub开源轻量级语音模型 Vui:重塑边缘智能语音交互的未来
大模型·github·音视频·交互·vui·语音模型·智能语音
张海森-1688201 天前
视频码率是什么?视频流分辨率 2688x1520_25fps采用 h264格式压缩,其码率为
音视频
mortimer2 天前
当AI配音遇上视频:实现音画同步的自动化工程实践
python·ffmpeg·ai编程
DogDaoDao2 天前
视频HDR技术全解析:从原理到应用的深度探索
音视频·hdr·sdr·视频渲染·hdr10·视频hdr技术标准·人眼视觉系统
IoT砖家涂拉拉2 天前
萌宠语聊新模板!借助On-App AI降噪与音频处理技术,远程安抚宠物更轻松、更安心!
人工智能·ai·app·音视频·智能家居·智能硬件·宠物
AI视觉网奇3 天前
截取视频 截取mp4 视频缩放
音视频
DogDaoDao3 天前
2025年 GitHub 主流开源视频生成模型介绍
人工智能·深度学习·开源·大模型·github·音视频·视频生成