cecilemuller · January 4, 2023 16:04
diff --git a/index.html b/index.html
 <!DOCTYPE HTML>
 <html lang="en">
 <head>
 	<title>Record WebGL to WebM (Chrome only)</title>
 	<meta charset="utf-8">
 	<link rel="stylesheet" href="styles.css" charset="utf-8">
 </head>
 <body>

 	<div class="buttons">
 		<button id="start">Start recording to WebM</button>
 		<button id="stop">Stop (or wait 4 seconds)</button>
 	</div>

 	<!--
 		Thirdparty files can be found at:
 		https://github.com/mrdoob/three.js/blob/r80/build/three.min.js
 		https://github.com/spite/ccapture.js/blob/master/build/CCapture.all.min.js
 	-->
 	<script src="thirdparty/three.min.js"></script>
 	<script src="thirdparty/CCapture.all.min.js"></script>
 	<script src="script.js"></script>

 </body>
 </html>
diff --git a/script.js b/script.js
 'use strict';
 /* global THREE */
 /* global CCapture */
 /* eslint-disable init-declarations */

 let renderer;
 let scene;
 let camera;
 let sphere;

 const recorder = new CCapture({
 	verbose: false,
 	display: true,
 	framerate: 60,
 	quality: 100,
 	format: 'webm',
 	timeLimit: 4,
 	frameLimit: 0,
 	autoSaveTime: 0
 });


 function render(){
 	sphere.rotation.x += 0.005;
 	sphere.rotation.y += 0.005;
 	renderer.render(scene, camera);
 	recorder.capture(renderer.domElement);
 	requestAnimationFrame(render);
 }


 function resize(width, height){
 	camera.aspect = width / height;
 	camera.updateProjectionMatrix();
 	renderer.setSize(width, height);
 }


 function setupButtons(){
 	const $start = document.getElementById('start');
 	const $stop = document.getElementById('stop');
 	$start.addEventListener('click', e => {
 		e.preventDefault();
 		recorder.start();
 		$start.style.display = 'none';
 		$stop.style.display = 'block';
 	}, false);

 	$stop.addEventListener('click', e => {
 		e.preventDefault();
 		recorder.stop();
 		$stop.style.display = 'none';
 		recorder.save();
 	}, false);
 }


 function setupScene(width, height){
 	renderer = new THREE.WebGLRenderer({
 		antialias: true
 	});
 	renderer.setSize(width, height);
 	document.body.appendChild(renderer.domElement);

 	scene = new THREE.Scene();
 	camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 500);
 	camera.position.set(0, 0, 8);

 	const light0 = new THREE.PointLight(0xffffff, 1, 0);
 	light0.position.set(0, 200, 0);
 	scene.add(light0);

 	const light1 = new THREE.PointLight(0xffffff, 1, 0);
 	light1.position.set(100, 200, 100);
 	scene.add(light1);

 	const light2 = new THREE.PointLight(0xffffff, 1, 0);
 	light2.position.set(-100, -200, -100);
 	scene.add(light2);

 	scene.add(new THREE.AmbientLight(0x000000));

 	sphere = new THREE.Mesh(
 		new THREE.SphereGeometry(5, 16, 16),
 		new THREE.MeshPhongMaterial({
 			color: 0x156289,
 			emissive: 0x072534,
 			side: THREE.DoubleSide,
 			shading: THREE.FlatShading
 		})
 	);
 	scene.add(sphere);
 }


 function start(width, height){
 	setupScene(width, height);
 	setupButtons();
 	resize(width, height);
 	render();
 }


 start(600, 400);
diff --git a/styles.css b/styles.css

 html, body {
 	height: 100%;
 }

 body {
 	position: relative;
 	margin: 0;
 	padding: 0;
 	overflow: hidden;
 }

 .buttons {
 	position: absolute;
 	top: 20px;
 	left: 20px;
 }

 #stop {
 	display: none;
 }
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<title>Record WebGL to WebM (Chrome only)</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="styles.css" charset="utf-8">
	</head>
	<body>

	<div class="buttons">
	<button id="start">Start recording to WebM</button>
	<button id="stop">Stop (or wait 4 seconds)</button>
	</div>

	<!--
	Thirdparty files can be found at:
	https://github.com/mrdoob/three.js/blob/r80/build/three.min.js
	https://github.com/spite/ccapture.js/blob/master/build/CCapture.all.min.js
	-->
	<script src="thirdparty/three.min.js"></script>
	<script src="thirdparty/CCapture.all.min.js"></script>
	<script src="script.js"></script>

	</body>
	</html>
	'use strict';
	/* global THREE */
	/* global CCapture */
	/* eslint-disable init-declarations */

	let renderer;
	let scene;
	let camera;
	let sphere;

	const recorder = new CCapture({
	verbose: false,
	display: true,
	framerate: 60,
	quality: 100,
	format: 'webm',
	timeLimit: 4,
	frameLimit: 0,
	autoSaveTime: 0
	});


	function render(){
	sphere.rotation.x += 0.005;
	sphere.rotation.y += 0.005;
	renderer.render(scene, camera);
	recorder.capture(renderer.domElement);
	requestAnimationFrame(render);
	}


	function resize(width, height){
	camera.aspect = width / height;
	camera.updateProjectionMatrix();
	renderer.setSize(width, height);
	}


	function setupButtons(){
	const $start = document.getElementById('start');
	const $stop = document.getElementById('stop');
	$start.addEventListener('click', e => {
	e.preventDefault();
	recorder.start();
	$start.style.display = 'none';
	$stop.style.display = 'block';
	}, false);

	$stop.addEventListener('click', e => {
	e.preventDefault();
	recorder.stop();
	$stop.style.display = 'none';
	recorder.save();
	}, false);
	}


	function setupScene(width, height){
	renderer = new THREE.WebGLRenderer({
	antialias: true
	});
	renderer.setSize(width, height);
	document.body.appendChild(renderer.domElement);

	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 500);
	camera.position.set(0, 0, 8);

	const light0 = new THREE.PointLight(0xffffff, 1, 0);
	light0.position.set(0, 200, 0);
	scene.add(light0);

	const light1 = new THREE.PointLight(0xffffff, 1, 0);
	light1.position.set(100, 200, 100);
	scene.add(light1);

	const light2 = new THREE.PointLight(0xffffff, 1, 0);
	light2.position.set(-100, -200, -100);
	scene.add(light2);

	scene.add(new THREE.AmbientLight(0x000000));

	sphere = new THREE.Mesh(
	new THREE.SphereGeometry(5, 16, 16),
	new THREE.MeshPhongMaterial({
	color: 0x156289,
	emissive: 0x072534,
	side: THREE.DoubleSide,
	shading: THREE.FlatShading
	})
	);
	scene.add(sphere);
	}


	function start(width, height){
	setupScene(width, height);
	setupButtons();
	resize(width, height);
	render();
	}


	start(600, 400);

	html, body {
	height: 100%;
	}

	body {
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
	}

	.buttons {
	position: absolute;
	top: 20px;
	left: 20px;
	}

	#stop {
	display: none;
	}