本文主要是介绍纵享丝滑!Cesium + ffmpegserver 生成高质量动态视频【逐帧生成】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
工作中需要提供一些在三维场景下的视频动画素材,屏幕录制会出现掉帧等其他问题,看到 ffmpegserver
后,眼前一亮
Cesium + ffmpegserver 生成高质量视频
1.自建 ffmpegserver
首先,克隆 ffmpegserver 仓库代码
git clone https://github.com/greggman/ffmpegserver.js.git
安装依赖
cd ffmpegserver.js && npm install
启动服务
npm start
ffmpegserver 中有两个 demo 案例,可以打开源代码看看具体实现
效果的预览地址是:
1.普通 canvas案例: http://localhost:8080/test.html
2.threejs 案例 http://localhost:8080/test2.html
原理是通过一帧一帧截取图片,最后用 ffmpeg 逐帧将图片合成为视频。
2. 在 cesium中 集成
以定点环绕来举例
首先,初始化 CCapture
实例
const capturer = new CCapture({format: 'ffmpegserver',framerate: 60,onProgress: () => {},extension: '.mp4',name: 'cesium'
});
开始环绕
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();
这篇关于纵享丝滑!Cesium + ffmpegserver 生成高质量动态视频【逐帧生成】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!