[JS] Save Genshin Impact Version Announcement Animated Canvas Video (Figures etc.)

grabVideoGenshinImpactCanvas.js

// ex. https://webstatic-sea.mihoyo.com/ys/event/e20211227-pre/index.html?...
// get link from ingame messages (seem to contains some cookie/timestamp-key for which the URL is valid)

// credits to:
// - https://developers.google.com/web/updates/2016/10/capture-stream#demos
// - https://stackoverflow.com/a/34259326/9360161

// --- steps ---
// 1. open url/page normally
// 2. open dev tools
// 2.1 detach dev tools window into own/free-floating window (so page is full-size
// 2.2 clear cache/network tag/console
// 3. paste code below in dev tools console tab (without `recorder.stop()` code), do not press enter
// 3.1 (optional) reload page if you want the opening animation
// 4. immediately execute JS code pasted in step 3. by pressing Enter in the console dev tools window
// 5. interact with page
// 6. if done, type `recorder.stop()` and execute with Enter in dev tools console tab
// 7. repeat from step 3. if required
// 7.1 also possible to restart the recording with just `recorder.start()` (without page reloading)

// --- code ---

const body = document.body;
const ul = document.createElement('ul');
ul.style.display = 'block';
body.appendChild(ul);

// you may need to search for the canvas element
const canvas = document.querySelector('#webglCanvas');
// the framerate (30 seemed to be much smoother compared to 25)
const stream = canvas.captureStream(30);

// format: `video/mp4` not supported?
recorder = new MediaRecorder(stream, {
  mimeType: 'video/webm'
});
recorder.ondataavailable = e => {
  var a = document.createElement('a');
  var li = document.createElement('li');
  a.download = ['video_', (new Date() + '').slice(4, 28), '.webm'].join('');
  a.href = URL.createObjectURL(e.data);
  a.textContent = a.download;
  li.appendChild(a);
  ul.appendChild(li);
  a.click();
};

// start recording with:
recorder.start();

// stop recording, will add a download link to the page but will also click it to prompt save-file dialog
// do not run this immediately, otherwise the video will be to short ...
recorder.stop();