Tag Archives: getusermedia

Video Music – Make music by flashing colored items in front of your webcam

This makes music and needs access to your camera. The average hue from your camera controls which chord will play. Video Music →

Elsewhere , , , , Leave a comment

Stinkmoji – Animoji on the web

Powered by getUserMedia() and WebGL: Stinkmoji →

Elsewhere , , , Leave a comment

HTML Barcode Scanner

window.addEventListener(‘load’, function() { barcode.config.start = 0.1; barcode.config.end = 0.9; barcode.config.video = ‘#barcodevideo’; barcode.config.canvas = ‘#barcodecanvas’; barcode.config.canvasg = ‘#barcodecanvasg’; barcode.setHandler(function(barcode) { document.getElementById(‘result’).innerHTML = barcode; }); barcode.init(); }); An HTML5 barcode scanner which scans EAN-13 barcodes using a webcam. HTML Barcode Scanner … Continue reading

Elsewhere , , , , , 8 Comments


WebCamMesh is a HTML5 demo that projects webcam video onto a WebGL 3D Mesh. It creates a ‘fake’ 3D depth map by mapping pixel brightness to mesh vertex Z positions. Perlin noise is used to create the ripple effect by … Continue reading

Elsewhere , , , Leave a comment

Responsive Typography using Face Detection

Typesetting based upon your distance to your screen. Clever use of WebRTC’s getUserMedia and JavaScript Face Detection In case you don’t have a capable browser, this is what it looks like: Responsive Typography: Breakpoints Demo → Responsive Typography: Realtime Demo … Continue reading

Elsewhere , , , , , Leave a comment

WebRTC RTCPeerConnection interoperability between Firefox and Chrome

RTCPeerConnection (also known simply as PeerConnection or PC) interoperability means that developers can now create Firefox WebRTC applications that make direct audio/video calls to Chrome WebRTC applications without having to install a third-party plugin. Because the functionality is now baked … Continue reading

Elsewhere , , , , , Leave a comment


headtrackr is a javascript library for real-time face tracking and head tracking, tracking the position of a users head in relation to the computer screen, via a web camera and the webRTC/getUserMedia standard. headtrackr (GitHub) →

Elsewhere , , , 1 Comment

Fun with face detection, canvas and webcam video

With the getUser­Me­dia API, a video ele­ment, a can­vas ele­ment and LiuLiu’s excel­lent face detec­tion algo­rithm, we can eas­ily play around with web­cam video data in the browser, plug-in free. Mask over­lay experiment: Scaling content experiment: Cool! Fun with face … Continue reading

Elsewhere , , , , Leave a comment

Photo Booth in your browser

Use Canary Chrome (and enable MediaStream in about:flags) to actually use your webcam instead of the provided recording. Works surprisingly fast. HTML5 Webcam Toy — Photo effects using WebGL and getUserMedia → (via badassjs)

Elsewhere , , , , , , 2 Comments