getusermedia – Bram.us

Webcam Hacking – The story of how I gained unauthorized Camera access on iOS and macOS

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

data: URI becomes a blob: URI (with magic blank origin)

Manipulate window.history (in 2 parts!)

Create an about:blank iframe and document.write to it

Dynamically give this iframe the sandbox attribute

Attempt an impossible frame navigation using X-Frame-Options

From within the iframe, window.open a new popup and document.write to it

Profit

From this popup, we can use the mediaDevices Web API to access the webcam (front or rear), microphone, screen sharing (macOS only) and much more!

The hack in action (user must have previously trusted skype.com, which is not unlikely):

🤯🤯🤯

Webcam Hacking – The story of how I gained unauthorized Camera access on iOS and macOS →

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

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 you out? Please consider making a donation:

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 add contrast and saturation effects.

WebCamMesh →

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 can deploy their apps much more easily and universally.

Hello Chrome, it’s Firefox calling! →

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: