DEV Community

Cover image for WebScaly: local video enhancement in Chrome
Lorcuz
Lorcuz

Posted on Edited on Originally published at github.com AI-assisted

WebScaly: local video enhancement in Chrome

WebScaly is a free, open-source Chrome extension that sharpens and upscales accessible web video. Enhancement runs on your device, on websites you explicitly approve. The website keeps handling playback and audio.

Updated for WebScaly 0.4.0: a new one-minute film, adaptive performance, content-aware engine suggestions and a redesigned popup and settings page.

I maintain the project. This post shows the actual output, explains how to try it, and covers the permission and rendering decisions behind it.

Chrome Web Store · GitHub · Privacy policy

A one-minute tour of 0.4.0

The film shows WebScaly's own comparison divider sweeping across a 640×360 stream, allowing a website, choosing an engine, comparing in the player, each engine on footage that suits it, tuning the picture, and the smart and private defaults. It has instrumental music and quiet interface cues, and the on-screen text works without sound. English captions are included.

Every enhanced picture and interface state is a capture of the extension itself, with both sides of each comparison taken from the same decoded frame. Chrome's own Allow prompt is described, not shown; the captures use a preapproved local test website. Hero © 2018 Blender Foundation, Daniel Martínez Lara, CC BY 4.0. Earth from the International Space Station: NASA (public domain; NASA does not endorse WebScaly). "4K Nature Cinematography" by Aliioss Film, CC BY 3.0. Music: “Divider” by Chris Zabriskie, CC BY 4.0. Effects: Kenney Interface Sounds, CC0. Full credits. No endorsement implied.

What's new in 0.4.0

  • Adaptive performance: WebScaly steps the workload down when the GPU falls behind, and a battery saver applies while the laptop is unplugged.
  • Leave sharp video alone: sources that are already sharp can be left untouched.
  • Engine suggestions: the popup suggests the engine that suits the content.
  • Picture controls: sharpening, denoise, deband, vibrance, contrast and brightness, per-site profiles and presets, with a live before/after preview in settings.
  • Player tools: optional compact controls, a comparison slider, hold-to-show-original, snapshots and a performance HUD, all hidden until you turn them on.
  • Shortcuts: keyboard shortcuts for on/off, comparison, engine and pause, plus a per-tab ON badge on the toolbar icon.

At the time of writing the Chrome Web Store still lists 0.3.1, and the 0.4.0 source is already on GitHub, where the film is also available as a 720p download with English captions.

What the enhancement actually changes

The still comparisons below were captured with WebScaly 0.3.1 and Anime4K CNN set to Quality; the film above shows 0.4.0. OFF is native playback of the decoded source; ON is the extension's actual output. Matching views receive the same crop and presentation enlargement. No extra sharpening is applied in the image editor.

Illustration: the full frame

Full-frame illustration comparison: original video on the left, Anime4K Quality output on the right

960×540 input → 1920×1080 output, 2× output scale. Open the full 1920×1080 image.

This wider view keeps the face, hair and background in context. At article width, small changes can be difficult to inspect, so there is also a larger detail comparison below.

Illustration: a closer look at a lower-resolution source

Enlarged eye detail from a 360p video: enhancement OFF above, Anime4K Quality ON below

640×360 input → 1920×1080 output, Automatic output scale. Identical 304×144 regions are enlarged 3× in both panels. Open the large detail image.

This second example uses a separately prepared 360p video, rather than the 540p source above. The illustration was downsampled and encoded before either capture. The OFF view has not been blurred separately to exaggerate the result. Look at the eye contour and the nearby hair strands.

The illustration is original AI-generated demonstration artwork, not a frame from an anime series. Its creation is separate from WebScaly's local enhancement pipeline.

Hero: a film example

Hero full-frame comparison: original video on the left, Anime4K Quality output on the right

960×540 input → 1920×1080 output, 2× output scale. Open the full 1920×1080 image.

Enlarged Hero face detail: native video above, Anime4K Quality output below

The same source and settings, with identical 304×144 crops enlarged 3×. Open the large detail image.

Hero is © 2018 Blender Foundation, Daniel Martínez Lara, licensed under CC BY 4.0. These excerpts are cropped, resized and enhanced; no endorsement is implied. Original film · Complete media credits and capture details.

These examples demonstrate a change in appearance, not recovery of the original master. Results depend on the source. Sharpening can also make compression artifacts more noticeable.

Trying it on a website

  1. Install WebScaly from the Chrome Web Store and open a video.
  2. Open the extension, choose Add this website, then Allow in Chrome's permission prompt. Approval completes without reopening the popup.
  3. Turn on Enhancement and choose an algorithm and quality level.
  4. Enable Compare if you want to inspect the difference in the player. Controls, comparison and statistics start hidden.

An embedded player may need its own approval in addition to the website containing it. Approving a shared player service does not approve every website that embeds that service.

WebScaly popup showing website approval, enhancement options and optional overlay controls

The actual extension popup on a controlled demonstration website.

Choosing an enhancement method

Method When to try it
Spatial Detail Lightweight sharpening and denoise. Start here for a smaller processing workload.
Anime4K CNN Animation and drawn contours, as in the comparisons above.
FSRCNNX Learned 2× upscaling for fine detail. Compare the result against the source.

Output size and quality affect GPU work. Start conservatively, compare the image, and save a site profile when you find settings that suit a particular player. Spatial sharpening and denoise controls apply to Spatial Detail; the neural methods have their own fixed processing behavior.

WebScaly advanced settings showing the processing engine, output limits, spatial controls and optional player tools

WebScaly processes decoded frames at their native cadence. It does not generate intermediate frames or increase the source frame rate.

Website access stays under your control

No website is approved by default. Settings and approved sites stay in the browser's local storage. WebScaly has no accounts, analytics, tracking scripts or cloud video processing, and it does not automatically upload frames or diagnostics.

Access is checked during use. Removing a website stops its active enhancement, cancels pending initialization and removes overlays. For embedded players, both the parent website and player origin must remain approved.

The popup permission flow is completed by the Manifest V3 service worker, so closing the popup during Chrome's approval prompt does not lose the request. Revocation also stops already-injected code: unregistering a content script by itself would leave that code running.

For implementation details, see the architecture notes, Chrome's scripting documentation and the project's privacy policy.

Rendering and compatibility limits

The renderer follows decoded video frames with requestVideoFrameCallback, closes frame snapshots after use, and bounds queued GPU work. The enhancement canvas is transparent to pointer input; optional interactive controls use isolated extension frames so they can avoid interfering with the native player.

WebGPU runs the enhancement pipelines where available. If a neural pipeline cannot initialize, WebScaly can fall back to Spatial Detail. A WebGL spatial fallback is available when supported. These fallbacks do not make every algorithm available on every device.

Browser pixel-access restrictions and protected media can prevent direct enhancement. The optional compatibility player asks you to select a tab and video area through Chrome's sharing flow, then processes that display stream locally. Audio remains in the source tab; protected content can still stay black.

Video-element fullscreen can show the original video, while container fullscreen can retain enhancement. Website behavior, source quality and hardware all affect the result. The project records supported, partial and unverified cases in its compatibility notes; simulated capability checks are not physical testing of every GPU.

Feedback that helps

If a player behaves incorrectly, please report the player, source resolution, selected algorithm, expected result and steps to reproduce it in GitHub Issues. For picture-quality problems, matching OFF/ON crops are useful. Please leave private video addresses and personal configuration exports out of public reports.

Install WebScaly · Browse the source · Full-size comparison gallery

Top comments (0)