• 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);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44

    2.2 完整示例

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  
  <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93

    3. 示例效果

    image.png

    4. 参考链接

    [1] MediaStream Recording API

    [2] URL.createObjectURL和URL.revokeObjectURL

  • 相关阅读:
    双指针的问题解法以及常见的leetcode例题。
    前端离职工作项目交接清单
    学习负载均衡的算法
    【excel技巧】如何在Excel表格中添加选项按钮？
    day16_List&Set课后练习题 - 参考答案
    成都理工大学_Python程序设计_第4章
    Hive的相关操作
    SpringBoot+Vue实现前后端分离的社区疫情防控管理系统
    leetcode 345. Reverse Vowels of a String（元音字母逆序）
    语雀停服8小时，P0级事故，故障原因和补偿来了。
  • 原文地址：https://blog.csdn.net/wml00000/article/details/126005100