Querela · January 7, 2022 20:39
diff --git a/grabVideoGenshinImpactCanvas.js b/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();
	// 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();