alphaqiu/html file

## html file
<!doctype html>
<html lang="en">
    <head>
        <title>Tiny Mirror</title>
        <meta name="twitter:card" content="summary">
        <meta name="twitter:site" content="@davywtf">
        <meta name="twitter:title" content="Tiny Mirror">
        <meta name="twitter:description" content="Check yourself out in the favicon.">
        <meta name="twitter:image" content="https://wybiral.github.io/code-art/projects/tiny-mirror/image.jpg">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="index.css">
        <script src="index.js"></script>
    </head>
    <body>
        <p>Hint: Look at the favicon</p>
        <p>(doesn't really work on mobile)</p>
        <p><label><input type="checkbox" name="mirror" id="mirror" /> Mirror image</label></p>
    </body>
</html>

## js file
// Handle FF
navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia;

window.onload = () => {
    // Create favicon link element
    const favicon = document.createElement('link');
    favicon.rel = 'shortcut icon';
    favicon.type = 'image/png';
    favicon.href = '../../images/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(favicon);
    // Create hidden canvas
    const w = 32;
    const h = 32;
    const canvas = document.createElement('canvas');
    canvas.style = 'display: none';
    canvas.width = w;
    canvas.height = h;
    document.body.appendChild(canvas);
    // Grab canvas context
    const ctx = canvas.getContext('2d');
    // Create hidden video element
    const video = document.createElement('video');
    video.style = 'display: none';
    video.width = canvas.width;
    video.height = canvas.height;
    document.body.appendChild(video);
    // Assign user media to video and start loop
    navigator.mediaDevices.getUserMedia({video: true}).then(stream => {
        video.srcObject = stream;
        video.play();
        loop();
    });
    // Flag for mirror image
    let mirror = false;
    // Loop forever
    const loop = () => {
        // save transform
        ctx.save();
        // Mirror image based on checkbox
        if (mirror) {
            ctx.translate(canvas.width, 0);
            ctx.scale(-1, 1);
        }
        // Copy video to canvas
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        // restore transform
        ctx.restore();
        // Set canvas to favicon
        favicon.setAttribute('href', canvas.toDataURL());
        // Loop
        setTimeout(loop, 100);
    };
    // Handle checkbox change event
    document.getElementById('mirror').addEventListener('change', e => {
        mirror = e.target.checked;
    });
};
	<!doctype html>
	<html lang="en">
	<head>
	<title>Tiny Mirror</title>
	<meta name="twitter:card" content="summary">
	<meta name="twitter:site" content="@davywtf">
	<meta name="twitter:title" content="Tiny Mirror">
	<meta name="twitter:description" content="Check yourself out in the favicon.">
	<meta name="twitter:image" content="https://wybiral.github.io/code-art/projects/tiny-mirror/image.jpg">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="index.css">
	<script src="index.js"></script>
	</head>
	<body>
	<p>Hint: Look at the favicon</p>
	<p>(doesn't really work on mobile)</p>
	<p><label><input type="checkbox" name="mirror" id="mirror" /> Mirror image</label></p>
	</body>
	</html>
	// Handle FF
	navigator.getUserMedia = navigator.getUserMedia \|\| navigator.mozGetUserMedia;

	window.onload = () => {
	// Create favicon link element
	const favicon = document.createElement('link');
	favicon.rel = 'shortcut icon';
	favicon.type = 'image/png';
	favicon.href = '../../images/favicon.ico';
	document.getElementsByTagName('head')[0].appendChild(favicon);
	// Create hidden canvas
	const w = 32;
	const h = 32;
	const canvas = document.createElement('canvas');
	canvas.style = 'display: none';
	canvas.width = w;
	canvas.height = h;
	document.body.appendChild(canvas);
	// Grab canvas context
	const ctx = canvas.getContext('2d');
	// Create hidden video element
	const video = document.createElement('video');
	video.style = 'display: none';
	video.width = canvas.width;
	video.height = canvas.height;
	document.body.appendChild(video);
	// Assign user media to video and start loop
	navigator.mediaDevices.getUserMedia({video: true}).then(stream => {
	video.srcObject = stream;
	video.play();
	loop();
	});
	// Flag for mirror image
	let mirror = false;
	// Loop forever
	const loop = () => {
	// save transform
	ctx.save();
	// Mirror image based on checkbox
	if (mirror) {
	ctx.translate(canvas.width, 0);
	ctx.scale(-1, 1);
	}
	// Copy video to canvas
	ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
	// restore transform
	ctx.restore();
	// Set canvas to favicon
	favicon.setAttribute('href', canvas.toDataURL());
	// Loop
	setTimeout(loop, 100);
	};
	// Handle checkbox change event
	document.getElementById('mirror').addEventListener('change', e => {
	mirror = e.target.checked;
	});
	};