3 ms·
The source code is actually small enough to be posted here navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia; window.onl
by florian_s 7y ago
The source code is actually small enough to be posted here
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.getUserMedia({video: true}, stream => {
video.srcObject = stream;
video.play();
loop();
}, () => {});
// Loop forever
const loop = () => {
// Copy video to canvas
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// Set canvas to favicon
favicon.setAttribute('href', canvas.toDataURL());
// Loop
setTimeout(loop, 100);
};
};
From https://github.com/wybiral/code-art/blob/master/projects/tiny-mirror/index.js https://github.com/wybiral/code-art/blob/master/projects/tin...
- deleted 7y ago[deleted]
- chipperyman573 7y agoIs there a reason that he sets a timeout of 100? Since this is all local (because of canvas.toDataURL()), can't it just run every 16ms (60 fps) instead of 100? I noticed in the gif that it was super choppy but I kind of assumed there was a technical reason, but I can't think of a reason that there would be a reason to have such a long delay.
- wybiral 7y agoThe browser doesn't seem to update the image any faster (at least not Chrome on Linux) than it already does. You can try different framerates though, maybe some platforms allow higher frequency?
- eridius 7y agoThat explains why it does nothing in Safari. Safari doesn't support `navigator.getUserMedia`, as that's deprecated and no longer part of the standard. The standard way to do this is navigator.mediaDevices.getUserMedia