Amazing rundown by Ryan Pickren on how he gained unauthorized Camera access on iOS and macOS. We started on a normal HTTP website and ended up on a bastardized blob URI in a Secure Context. Here is a quick summary of how we did it: Open evil HTTP website HTTP website becomes a data: URI […]
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 →
Stinkmoji – Animoji on the web
Powered by getUserMedia() and WebGL: Stinkmoji →
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 (GitHub) → Original repo was removed. Forked repos can be found below Did this help […]
WebCamMesh
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 modifying the Z positions based on a 2D noise field. CSS3 filters are used to […]
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 → (via Jeremy) Related: headtrackr →
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 into the browser, users can avoid problems with first-time installs and buggy plugins, and developers […]
headtrackr
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) →
Fun with face detection, canvas and webcam video
With the getUserMedia API, a video element, a canvas element and LiuLiu’s excellent face detection algorithm, we can easily play around with webcam video data in the browser, plug-in free. Mask overlay experiment: Scaling content experiment: Cool! Fun with face detection, canvas and webcam video → Related: getUserMedia Moustache (via Webappers.com)
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)