门户网站内容建设,网站有关于我们的好处,建设家装网站,福州关键词自然排名工作中需要提供一些在三维场景下的视频动画素材#xff0c;屏幕录制会出现掉帧等其他问题#xff0c;看到 ffmpegserver 后#xff0c;眼前一亮 Cesium ffmpegserver 生成高质量视频 1.自建 ffmpegserver
首先#xff0c;克隆 ffmpegserver 仓库代码
git clone https://…工作中需要提供一些在三维场景下的视频动画素材屏幕录制会出现掉帧等其他问题看到 ffmpegserver 后眼前一亮 Cesium ffmpegserver 生成高质量视频 1.自建 ffmpegserver
首先克隆 ffmpegserver 仓库代码
git clone https://github.com/greggman/ffmpegserver.js.git安装依赖
cd ffmpegserver.js npm install启动服务
npm startffmpegserver 中有两个 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();
