cecilemuller/index.html

## 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>

## 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);

## 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;
	}