当前位置：网站首页>JS realizes video recording - Take cesium as an example

JS realizes video recording - Take cesium as an example

2022-07-27 20:15:00 【giao00000】

JS Video recording - With Cesium For example

List of articles

JS Video recording - With Cesium For example

1. Requirements describe

It is required to be able to Cesium The motion of the three-dimensional earth is recorded as a video .

2. Concrete realization

2.1 Main principle

You can directly call MediaStream Recording API, Video recording . The core sample code is as follows ：

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"
  });
  //  Create a pointer to binary data 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();
  //  Release URL
  window.URL.revokeObjectURL(url);
}

// demo: to download after 9sec
setTimeout(event => {
    
  console.log("stopping");
  mediaRecorder.stop();
}, 9000);

2.2 Complete example

<!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()"> record video </button>
    <button onclick="stopRecord()"> The end of the recording </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(() => {
       //  video recording  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); } //  Start recording  function startRecord() {
       console.log("starting"); mediaRecorder.start(); } //  The end of the recording  function stopRecord() {
       console.log("stopping"); mediaRecorder.stop(); } </script>
  </div>
</body>

</html>