JS实现视频录制-以Cesium为例_cesium 录屏-CSDN博客

本文链接：https://blog.csdn.net/wml00000/article/details/126005100

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>