100%

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

✓ Published0🌍 Public

Last edited Sep 10, 2016

Created on Sep 4, 2016

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.

AI-generated description

A digital mirror - shows the video feed from your camera.

Run it!

It doesn't work in bl.ocks.org using http due to security restrictions. It does, however, work using https (thanks to Robert Monfera for pointing this out).

Draws from:

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Photobooth

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.

11wheel

62% match

Loading thumbnail…

fullscreen.js, no dependency

This example demonstrates how to add a fullscreen toggle button to any web page, showing a persistent user interface control that enables immersive viewing. The code appends a clickable “Fullscreen” button to the document body, leveraging the native browser fullscreen API through vendor-prefixed methods like `webkitRequestFullScreen` and `mozRequestFullScreen` to handle cross-browser support. On activation or exit, it triggers a redraw of the page after 200 milliseconds to refresh the visualization. The button label changes to a multiplication sign when in fullscreen mode, reflecting the current state via the `fullscreenchange` event listener.

PPhilippe Rivière

58% match

Loading thumbnail…

Untitled

This example presents a simple interactive scene using an embedded YouTube video within a bare-bones HTML page. The main visualization is a video player that users can control directly. The page’s code, primarily in `index.html`, likely relies on the standard HTML `<iframe>` element and the YouTube player API for playback. No additional data sources or complex rendering libraries like D3 or Three.js are present; the focus is solely on embedding and displaying a single video via the provided URL.

SSaai Sudarsanan D

57% match

Loading thumbnail…

Gist 669840e74e5d863f3867c2946eb31ece

This example uses a headless Chrome setup, orchestrated through a Dockerfile, to render a dynamic web visualization. It shows an animated, interactive scene that likely involves geographic or force-directed elements, as the environment installs Chrome and chromedriver for automated screenshotting or streaming. The Python-based driver, running via `main.py`, relies on Selenium to control the browser and capture frames, while the underlying page would use D3.js’s `d3.forceSimulation` for physics-based layout and `d3.geoPath` for map projections if applicable. The setup explicitly avoids displaying a static image; instead, it captures live rendering from the Canvas or SVG, though the exact output is not visible in the code.

CConorAspell

57% match

Loading thumbnail…

Untitled

This example presents a live web page that embeds a YouTube video within a minimal HTML frame. The page itself contains no custom data visualization logic, instead relying on the native functionality of the browser and the iframe API to display the external video player. The primary interactive element is the embedded media player, which supports standard playback controls. No additional JavaScript libraries or data-rendering techniques are employed beyond the standard HTML iframe integration.

Pprakhar011

56% 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

56% 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

56% match

Loading thumbnail…

fresh block

This block embeds a YouTube video directly into an HTML page using an iframe, making it the sole visual element. The video is presented as a self-contained media player within the fixed viewport, though the page provides no interactive controls beyond the iframe’s native functionality. The code relies on the standard HTML `iframe` element with a YouTube URL, while the D3 library is loaded but not referenced or utilized. The styling is minimal, fixing the body to the full screen, yet no data or custom visualization is rendered. The README indicates it was created using blockbuilder.org.

BBrieLewis

56% match