Skip to main content
100%

VideoIO duration issue

✓ Published0🌍 Public
WWikunia
Last edited Jul 20, 2021
Created on Jul 20, 2021

This visualization demonstrates a duration mismatch issue in VideoIO by comparing video playback time against the number of frames processed. The code, authored by Wikunia and available as a gist, uses Julia's FFMPEG bindings to render a simple animated scene. It tracks and plots the elapsed time versus the expected frame-based duration, revealing a discrepancy where the reported playback duration does not match the actual time taken to process frames. The visualization highlights the timing bug through a line chart or similar plot, making the drift between real elapsed time and the video's internal clock immediately apparent.

AI-generated description

Similar vizzes

Loading thumbnail…

Video loss measurement (Generate by Kiro (kiro.dev))

This example compares video quality loss between a source clip and two transcoded outputs (H.264 and H.265) by calculating PSNR and SSIM metrics for matched frames. It demonstrates how to align timecodes using FFmpeg's `setpts=PTS-STARTPTS` filter and then applies the `psnr` and `ssim` lavfi filters to compute per-frame scores, with a note that PSNR above 40 and SSIM above 0.8 indicate acceptable quality. The visualization shows the numeric metric results directly from the FFmpeg console output, highlighting the trade-offs between codec presets.

VVioletVivirand
55% match
Loading thumbnail…

Video Dependency Graph

This example displays a dependency graph of video tutorials from a data visualization course, showing each video as a node with its title and duration. The initial state renders the raw JSON data as text in a `<pre>` element, demonstrating the dataset structure with empty links. The code uses D3 v5’s `json()` method to asynchronously load `videos.json` and then appends a formatted string via `JSON.stringify`. No visualization is drawn yet, as the implementation focuses on data loading and inspection.

AAjayyy
52% match
Loading thumbnail…

Video Dependency Graph

This example displays a video dependency graph, showing a list of tutorial videos with titles and durations. The visualization presents each video as a node, though the links between them are initially empty. The code fetches the video data from a local `videos.json` file and uses D3.js’s `json` function to load it. It then uses D3’s `select` and `append` methods to create a `<pre>` element, inserting the raw JSON data as formatted text for display. The example demonstrates a basic data-loading and rendering workflow with D3 v5.

CCurran Kelleher
52% match
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
52% match
Loading thumbnail…

Performance Visualization Dashboard

This dashboard visualizes runtime performance across frames using three coordinated D3 v6 SVG charts. A bar chart shows functions with the longest total runtime, while a scatter plot details the breakdown of the longest frame by function. An interactive line chart connects performance points over tick time, enabling selection of specific frames. The visualization uses d3.csv for data loading, scaleBand, scalePoint, scaleLinear, axisLeft, axisBottom, and d3.timeParse to structure the CSV data containing Tick, Identifier, and Runtime fields.

IINDIGOBLIN
52% match
Loading thumbnail…

Untitled

This example presents a video-based visualization embedded within a minimal HTML page. The code relies on an iframe to stream YouTube content directly, rather than generating a custom graphic. It does not employ JavaScript plotting libraries or data-processing APIs. The rendering approach is simple web embedding via the standard iframe element, with no native visualization framework. The visualization’s meaning depends entirely on the external video source, which supplies the narrative and graphical content.

SSebastian Ruggero
51% match
Loading thumbnail…

A4 Box Plot (D3)

This visualization shows the distribution of average video game play lengths from 2004 to 2008 using a single horizontal box plot, with outliers removed via the interquartile range method. The chart displays the min, max, median, Q1, and Q3 values, and hovering over any of these elements reveals the exact numeric value via SVG `<title>` tooltips. Built with D3 v7, the code loads CSV data from a GitHub gist, uses `d3.quantile` to compute quartiles, and renders the plot using SVG shapes, scales, and axes.

NNoah C.
51% match
Loading thumbnail…

Gist 4cd8f6cf6b2c29372f82424c1363d08a

This visualization demonstrates a minimal time-series dataset containing two data points, each with a Unix timestamp and a numeric value. It uses D3.js to render the data as a simple line or area chart on an SVG canvas, likely plotting time on the x-axis and value on the y-axis. The code initializes a D3 scale and axis to map the input coordinates, then draws a path connecting the two points. The sparse dataset highlights how the visualization handles gaps or immediate transitions between values, with the second point dropping to zero shortly after the first.

VVioletVivirand
51% match