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:

  1. Open evil HTTP website
  2. HTTP website becomes a data: URI
  3. data: URI becomes a blob: URI (with magic blank origin)
  4. Manipulate window.history (in 2 parts!)
  5. Create an about:blank iframe and document.write to it
  6. Dynamically give this iframe the sandbox attribute
  7. Attempt an impossible frame navigation using X-Frame-Options
  8. From within the iframe, window.open a new popup and document.write to it
  9. 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 →

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:

Responsive Typography using Face Detection

responsive-typography-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! →

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 detection, canvas and webcam video →

(via Webappers.com)