Save Google Earth Presentation As a Movie File

Save Google Earth Presentation As a Movie File

This script can save a canvas, video or audio element.

60fps の動画に対して video.captureStream().getVideoTracks()[0].getSettings().frameRate でフレームレート調べたら 30 になっていた。 どうやったら 60fps にできるんだろう。applyConstraints は効かなかった。

webrtc.github.io

canvas の captureStream はフレームレートを指定できる。 video を canvas に映して canvas を保存する？音はどうする？

sterfield.co.jp

音についてはこれが答えになるか？

stackoverflow.com

/***************************************************************/
// Definition of GER function

/**
 * @class Google Earth Recorder
 * @param {HTMLCanvasElement|HTMLVideoElement|HTMLAudioElement} [element] an element what you want to record
 */
function GER(element) {
  this.targetElement = element;
  this.stream = this.targetElement.captureStream();
  this.chunk = [];
  this.recorder;
  this.link;
  this.recorder = new MediaRecorder(this.stream);
  this.recorder.ondataavailable = (e) => {
    this.chunk.push(e.data);
  };
  this.recorder.onstart = () => {
    if (this.link && this.link.href) {
      URL.revokeObjectURL(this.link.href);
      this.link = undefined;
    }
    this.chunk = [];
  };
  this.recorder.onstop = () => {
    this.link = document.createElement("a");
    this.link.download = "hoge.webm";
    this.link.href = URL.createObjectURL(new Blob(this.chunk));
    this.download();
  };
  this.start = () => {
    this.recorder.start();
  };
  this.stop = () => {
    this.recorder.stop();
  };
  this.download = () => {
    setTimeout(() => {
      this.link.click();
    }, 10);
  };
}
/***************************************************************/


/***************************************************************/
// Usage

// 0. Prepare script
// Open a browser (recommend Chrome) and go to a target page.
// Open Devtool by pressing F12 key or any way.
// Input the definition of GER function in the console of Devtool.

// 1. You need to get the element waht you want to record.

/** Example1. Google Earth canvas element */
var canvas = document
  .querySelector("body > earth-app")
  .shadowRoot.querySelector("#earthView")
  .shadowRoot.querySelector("#canvas");
/** Example2. Youtube video Element */
var video = document.querySelector(
  "#movie_player > div.html5-video-container > video"
);

// 2. Create an instance of GER
var ger = new GER(canvas); // Example 1
// or
// var ger = new GER(video); // Example 2

// 3. start recording
ger.start();

// 4. stop recording
ger.stop();

/***************************************************************/