Bring the magic of Snapchat Lenses to your live streams and video chats with Snap Camera

Snap Camera is a desktop application by the Snapchat folks which allows you to apply their filters (“Lenses” as they call it) onto your webcam footage. The cool part is the fact that the app also exposes itself as a webcam to your system. That way you can use the (fake) Snap Camera as the input source for Google Hangouts, Skype, Slack, Zoom, Twitch, etc.

To create your own Lenses, you can use Lens Studio. This YouTube video should have you covered.

Snap Camera →

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 →

Setting Up Your Webcam, Lights, and Audio for Remote Work, Podcasting, Videos, and Streaming

Matt Staufer has done an extensive writeup on his video/streaming setup.

I’ve spent quite a bit of time obsessing over lights and camera, and I wanted to help youβ€”new streamer, podcaster, new remote worker, or someone trying to level up their setupβ€”see a few different types of option for your remote work or streaming setup.

The post is packed with good tips and short product reviews. The final result – shown above – looks really good I must say!

Setting Up Your Webcam, Lights, and Audio for Remote Work, Podcasting, Videos, and Streaming →

Tiny Mirror – Mirror your Webcam into the Favicon

Fun little experiment that mirrors your webcam into your favicon.

Tiny Mirror →

πŸ”₯ The aforementioned favico.js (from 2013!) also comes with a β€œWebcam video to icon” option. Next to mirroring the webcam into your favicon it also supports badges, videos, etc.

🍰 Looking to display (pie)charts in your favicon? Piecon can do that for you!

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:

lolcommits

lolcommit

Takes a snapshot with your Mac’s built-in iSight/FaceTime webcam every time you git commit code, and archives a lolcat style image with it.

UPDATE 2017.01.03: Jelle Vandebeeck has written down some instructions on setting this up. Since this was originally posted, lolcommits now apparently supports recording video (yielding a gif) πŸ™‚

lolcommits →

getUserMedia Moustache

This demo uses getUserMedia (formerly known as HTML5 <device>) to get data from a device camera, then copies it into HTML5 <canvas> in order to analyse the pixel data. It then peforms facial recognition in order to superimpose a marvellous magical moustache.

Special Opera Developer Build required.

Magical getUserMedia moustache →
Opera getUserMedia Labs Build →
getUserMedia: accessing the camera and privacy UI (how to)