JS实现视频录制-以Cesium为例

文章目录

JS实现视频录制-以Cesium为例
- 1. 需求描述
- 2. 具体实现
- - 2.1 主要原理
  - 2.2 完整示例
- 3. 示例效果
- 4. 参考链接

1. 需求描述

要求能够将Cesium三维地球的运动过程录制成视频。

2. 具体实现

2.1 主要原理

可以直接调用前端中的MediaStream Recording API，实现视频录制。核心示例代码如下：

var canvas = document.querySelector("canvas");// Optional frames per second argument.
var stream = canvas.captureStream(25);
var recordedChunks = [];console.log(stream);
var options = { mimeType: "video/webm; codecs=vp9" };
mediaRecorder = new MediaRecorder(stream, options);mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();function handleDataAvailable(event) {console.log("data-available");if (event.data.size > 0) {recordedChunks.push(event.data);console.log(recordedChunks);download();} else {// ...}
}
function download() {var blob = new Blob(recordedChunks, {type: "video/webm"});// 创建指向二进制数据的URLvar url = URL.createObjectURL(blob);var a = document.createElement("a");document.body.appendChild(a);a.style = "display: none";a.href = url;a.download = "test.webm";a.click();// 释放URLwindow.URL.revokeObjectURL(url);
}// demo: to download after 9sec
setTimeout(event => {console.log("stopping");mediaRecorder.stop();
}, 9000);

2.2 完整示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><!-- Include the CesiumJS JavaScript and CSS files --><script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head><body><div id="cesiumContainer"><button onclick="startRecord()">录制视频</button><button onclick="stopRecord()">结束录制</button></div><script>// Your access token can be found at: https://cesium.com/ion/tokens.// Replace `your_access_token` with your Cesium ion access token.// Cesium.Ion.defaultAccessToken = 'your_access_token';// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.const viewer = new Cesium.Viewer('cesiumContainer', {terrainProvider: Cesium.createWorldTerrain()});// Fly the camera to San Francisco at the given longitude, latitude, and height.viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),orientation: {heading: Cesium.Math.toRadians(0.0),pitch: Cesium.Math.toRadians(-15.0),}});var mediaRecorder, recordedChunks;setTimeout(() => {// 视频录制var canvas = document.querySelector(".cesium-widget>canvas");// Optional frames per second argument.var stream = canvas.captureStream(25);recordedChunks = [];console.log(stream);var options = { mimeType: "video/webm; codecs=vp9" };mediaRecorder = new MediaRecorder(stream, options);mediaRecorder.ondataavailable = handleDataAvailable;}, 2000);function handleDataAvailable(event) {console.log("data-available");if (event.data.size > 0) {recordedChunks.push(event.data);console.log(recordedChunks);download();} else {// ...}}function download() {var blob = new Blob(recordedChunks, {type: "video/webm"});var url = URL.createObjectURL(blob);var a = document.createElement("a");document.body.appendChild(a);a.style = "display: none";a.href = url;a.download = "test.webm";a.click();window.URL.revokeObjectURL(url);}// 开始录制function startRecord() {console.log("starting");mediaRecorder.start();}// 结束录制function stopRecord() {console.log("stopping");mediaRecorder.stop();}</script></div>
</body></html>

3. 示例效果

4. 参考链接

[1] MediaStream Recording API

[2] URL.createObjectURL和URL.revokeObjectURL

JS实现视频录制-以Cesium为例相关推荐

开发ASP.NET MVC 在线录音录像（音视频录制并上传）
开发ASP.NET MVC 在线录音录像(音视频录制并上传) 最近有个在线招聘录音的开发需求,需要在招聘网站上让招聘者上传录音和视频. 找到两个不错的javascript开源,可以在除了IE以外的浏览 ...
WebRtc实现多人视频会议以及视频录制上传
1.前言最近公司做的一个项目需求是实现多人视频会议聊天,查阅资料,决定使用HTML5新支持的WebRtc来作为视频通讯.客户端使用支持HTML5浏览器即可,如chrome,服务器段需要提供两个主要的 ...
视频录制，压缩实现源码
实现代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...
神策数据王磊：如何用 JS 实现页面录制与回放
本文根据神策数据资深前端研发工程师王磊<如何用 JS 实现页面录制与回放>的直播整理而成.以下为正文: 一.业务背景对于研发来说,总是需要处理一些线上问题.To B 和 To C 企业在 ...
互动直播的视频录制与合成—支持多人离线重入
实现的效果图: 上图合成了2个人视频,中途有1个人先离开之后又重新加入了房间. 一.业务场景业务场景是这样的:多个用户(2-4人)直播的视频,合成为一个视频,这期间要满足2个条件:首先,录制途中可能 ...
java 视频录制软件有哪些_有哪些好用的视频录制工具？
我是岳航运: 大家好,在猴子数据分析学院毕业后,在零售行业从事数据分析工作多年,这期间也在参与了"睡后收入项目",也就是畅销书<数据分析思维>中有一章是我写的. 正是因 ...
高仿微信拍照,视频录制-----JCameraView
JCameraView(1.1.9) 使用方法 Gradle依赖: compile 'cjt.library.wheel:camera :1.1.9' 引用源码 : clone源码后引入lib - ...
Swift - 视频录制教程3（设置拍摄窗口大小，录制正方形视频）
在之前的两篇文章中,我介绍了如何通过 AVFoundation.framework 框架提供的 AVCaptureSession 类来实现视频的录制.以及通过 AVMutableComposit ...
【愚公系列】2022年04月微信小程序-实时音视频录制
文章目录前言一.实时音视频录制 1.js代码 2.wxml代码 3.效果前言小程序的实时音视频播放需要先去微信开发者平台开通权限,「开发」-「接口设置」中自助开通该组件权限. 类目属性如下: ...

JS实现视频录制-以Cesium为例

JS实现视频录制-以Cesium为例

文章目录

1. 需求描述

2. 具体实现

2.1 主要原理

2.2 完整示例

3. 示例效果

4. 参考链接

JS实现视频录制-以Cesium为例相关推荐

最新文章

热门文章