当前位置：网站首页>JS实现视频录制-以Cesium为例

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

2022-07-27 17:33:00 【giao00000】

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

文章目录

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

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"
  });
  // 创建指向二进制数据的URL
  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();
  // 释放URL
  window.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>