This application applies real-time filters to your webcam feed. Click "Start Camera" to begin. Choose a filter and use the sliders to fine-tune the effect. All processing is handled in the main thread for simplicity.
Blur uses a traditional box blur algorithm, which averages all pixels in a square region around each pixel. This method is simple but can be computationally intensive, especially for larger blur radii, because it processes a large number of pixels for every output pixel.
Blur 2.0 uses a more efficient separable blur algorithm. It first blurs horizontally, then vertically, which dramatically reduces the number of calculations needed. This makes Blur 2.0 much faster, especially for higher blur settings, while producing a visually similar result.
Both blur filters are included for educational purposes, so you can compare their performance and visual effects. Try switching between them and adjusting the blur radius to see the difference in speed and appearance. The processing time for each filter is shown below the video.
This tool demonstrates real-time video filtering in the browser. All code is in a single HTML file for easy use and sharing.
The Frame Rate slider lets you control how many video frames per second (FPS) the app processes and displays. You can set this up to 60 FPS, but most browsers and computers will not reach a true 60 FPS for real-time video processing, especially with complex filters. Even if your screen supports 60 Hz, the website's processing speed, browser limitations, and your computer's performance will usually result in a lower actual frame rate.
When you lower the FPS, the app processes fewer frames per second. This means your computer has more time to process each frame, but the processing time per frame (shown below the video) usually stays about the same, because each frame still requires the same amount of work. However, the total work per second goes down, so your computer may run cooler or use less CPU. At higher FPS, the app tries to process more frames per second, but if the processing time per frame is too high, it may not keep up, and the actual FPS will be lower than the slider value.
In summary: Lower FPS = fewer frames processed per second, but each frame takes about the same time to process. Higher FPS = more frames processed, but only if your computer and browser can keep up. The processing time per frame is determined by the filter and your hardware, not the FPS setting.
The app shows both the Set FPS (your target) and the Actual FPS (what your browser and computer are achieving) below the video. If the processing for each frame takes too long, the app can't keep up with the target FPS, so the actual FPS will be lower. This is normal for real-time video processing—your system will always run as fast as it can, but heavy filters or slower hardware will reduce the actual FPS compared to your chosen maximum.
Channel Swap rearranges the red, green, and blue (RGB) channels of each pixel in a fixed order (such as RGB, BGR, GBR, etc.). This produces abrupt, discrete color changes by shuffling the color components, but does not alter the actual color values themselves.
Hue Rotate smoothly shifts all colors around the color wheel by a specified angle, using a mathematical transformation in color space. This results in continuous, smooth color changes for all pixels, creating a very different visual effect from channel swapping.
In summary: Channel Swap is a discrete permutation of color channels, while Hue Rotate is a continuous transformation of color hue. Their effects and underlying algorithms are fundamentally different.