Photobooth

100%

✓ Published0🌍 Public

Last edited May 28, 2015

Created on May 28, 2015

This example creates a photobooth that captures images from a user's webcam and displays them in a gallery. The video monitor cycles through CSS filter effects—including grayscale, sepia, blur, hue rotations, and inversion—when clicked, while a hidden canvas draws the current video frame to generate snapshot images. The capture process uses the `navigator.getUserMedia` API for webcam streaming and the canvas element's `drawImage` and `toDataURL` methods to save frames as webp images. The animations are powered by JavaScript timers controlling the video element and canvas operations.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 8b397c6c25320dd8963daebaa9c8b847

A webcam feed is displayed as a continuously distorted, glitching video stream. The visualization captures the user's webcam video using the `getUserMedia` API and renders it to a canvas, which is then processed in real-time. The glitch effect is achieved by taking the canvas's JPEG data and randomly corrupting individual characters within its base64 encoding using JavaScript, before displaying the result as a dynamically updating image. The animation runs on a timer, cycling the corruption process to create a perpetually shifting, pixelated output.

MMAKIO135

66% match

Loading thumbnail…

[Run it!](https://bl.ocks.org/curran/raw/3184b45f555dae6bebb1536110763824/)

This example displays a live webcam feed as an immersive digital mirror, filling the entire viewport with the video stream. It uses the MediaDevices `getUserMedia` API to request camera access and the `webrtc-adapter` library for cross-browser compatibility, with `window.URL.createObjectURL` to bind the stream to an HTML5 video element. The page relies on minimal CSS and JavaScript, drawing from the camera-control techniques in David Walsh’s tutorial and the MDN documentation for media capture.

CCurran Kelleher

62% match

Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed

62% match

Loading thumbnail…

Gist 2d272134b57b02eb8cdd0c5904249591

This example tests the archival fidelity of a web page by loading a series of images and scripts that mimic dynamic behavior, including DOM manipulation, AJAX requests, and delayed updates. It uses JavaScript’s `XMLHttpRequest` to fetch remote images and replaces them via base64 data URLs, while `setTimeout` and scroll events trigger asynchronous content changes. The page is rendered within an iframe by the pywb web archiving tool, with a banner and rewrite layer applied. The visualization demonstrates how archived sites handle live interactions and resource loading over time.

NN0taN3rd

58% match

Loading thumbnail…

Auto Image Slider

This example displays an automatic image slider for navigating three nature photographs. It cycles through images every two seconds, with preview and next arrow buttons and clickable dots for direct slide selection. The code uses vanilla JavaScript with `getElementsByClassName`, `addEventListener`, and `setTimeout` for automation, while CSS manages positioning, transitions, and active states for navigation elements.

KKacieW

58% match

Loading thumbnail…

Image Carousel

This example demonstrates a simple image carousel, displaying a sequence of three thematically labeled images—Zip, Zap, and Zop—that users can cycle through. The code uses jQuery (via the `carousel.js` file) to handle click events on the previous and next frame links, shifting the horizontal position of a `.frames` list. The layout relies on a fluid CSS approach where the carousel container hides overflow, and each slide takes up a third of the overall track width. The styling, defined in `main.css`, includes navigation buttons and responsive image sizing. The data source is static image URLs embedded directly in the HTML, with no external data loading or animation libraries beyond core jQuery.

EElaineYu

58% match

Loading thumbnail…

W3.CSS

This example builds a simple slideshow-style homepage for “PHAMERATOR” using the W3.CSS framework. It displays a series of images in a carousel with left and right navigation buttons, controlled by custom JavaScript functions that show and hide slides. The page also embeds two iframes, one for a YouTube video and one for a Gitter chat, alongside the slideshow. The content is styled with dark blue background and a white, centered title, relying on W3.CSS classes for layout and button styling.

BBrieLewis

57% match

Loading thumbnail…

Screencasting Framework from CodeSchool.com

This example is a guided tour of a screencasting framework, showing the step-by-step workflow and best practices for creating educational videos. It presents the framework’s key concepts, from scripting to camera use, using a series of interactive slides and panels. The visualization is rendered with WebGL, with the content structured around the accompanying markdown document from the source gist. The code uses raw WebGL for rendering, displaying text and layout information without relying on higher-level charting libraries like D3.

IIoTeacher

57% match