<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Lorcuz</title>
    <description>The latest articles on DEV Community by Lorcuz (@lorcuz).</description>
    <link>https://dev.to/lorcuz</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4183236%2Fad7c221e-3e5d-4588-9edc-9e2dd9e2afe0.jpg</url>
      <title>DEV Community: Lorcuz</title>
      <link>https://dev.to/lorcuz</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/lorcuz"/>
    <language>en</language>
    <item>
      <title>WebScaly: local video enhancement in Chrome</title>
      <dc:creator>Lorcuz</dc:creator>
      <pubDate>Tue, 13 Oct 2026 23:39:59 +0000</pubDate>
      <link>https://dev.to/lorcuz/webscaly-local-video-enhancement-in-chrome-2ch6</link>
      <guid>https://dev.to/lorcuz/webscaly-local-video-enhancement-in-chrome-2ch6</guid>
      <description>&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Updated for WebScaly 0.4.0:&lt;/strong&gt; a new one-minute film, adaptive performance, content-aware engine suggestions and a redesigned popup and settings page.&lt;/p&gt;

&lt;p&gt;I maintain the project. This post shows the actual output, explains how to try it, and covers the permission and rendering decisions behind it.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://chromewebstore.google.com/detail/webscaly/hdcnniaagmhkocoeahemlpgjecgpchfa" rel="noopener noreferrer"&gt;Chrome Web Store&lt;/a&gt; · &lt;a href="https://github.com/Lorcuz/WebScaly" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt; · &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/PRIVACY.md" rel="noopener noreferrer"&gt;Privacy policy&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  A one-minute tour of 0.4.0
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/ZoKox_mrUsw" width="710" height="399"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;&lt;em&gt;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, &lt;a href="https://creativecommons.org/licenses/by/4.0/" rel="noopener noreferrer"&gt;CC BY 4.0&lt;/a&gt;. Earth from the International Space Station: NASA (public domain; NASA does not endorse WebScaly). "4K Nature Cinematography" by Aliioss Film, &lt;a href="https://creativecommons.org/licenses/by/3.0/" rel="noopener noreferrer"&gt;CC BY 3.0&lt;/a&gt;. Music: &lt;a href="https://chriszabriskie.com/divider/" rel="noopener noreferrer"&gt;“Divider” by Chris Zabriskie&lt;/a&gt;, CC BY 4.0. Effects: &lt;a href="https://kenney.nl/assets/interface-sounds" rel="noopener noreferrer"&gt;Kenney Interface Sounds&lt;/a&gt;, CC0. &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/docs/media/ATTRIBUTIONS.md" rel="noopener noreferrer"&gt;Full credits&lt;/a&gt;. No endorsement implied.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What's new in 0.4.0
&lt;/h2&gt;

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

&lt;p&gt;At the time of writing the Chrome Web Store still lists 0.3.1, and the 0.4.0 source is already on &lt;a href="https://github.com/Lorcuz/WebScaly" rel="noopener noreferrer"&gt;GitHub&lt;/a&gt;, where the film is also available as a &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/docs/media/webscaly-presentation-720p.mp4" rel="noopener noreferrer"&gt;720p download&lt;/a&gt; with &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/docs/media/webscaly-presentation.en.srt" rel="noopener noreferrer"&gt;English captions&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  What the enhancement actually changes
&lt;/h2&gt;

&lt;p&gt;The still comparisons below were captured with &lt;strong&gt;WebScaly 0.3.1 and Anime4K CNN set to Quality&lt;/strong&gt;; 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.&lt;/p&gt;

&lt;h3&gt;
  
  
  Illustration: the full frame
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpwp9iumog1s8g0bytgpp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fpwp9iumog1s8g0bytgpp.png" alt="Full-frame illustration comparison: original video on the left, Anime4K Quality output on the right" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;960×540 input → 1920×1080 output, 2× output scale. &lt;a href="https://raw.githubusercontent.com/Lorcuz/WebScaly/main/docs/media/original-anime-comparison-1920x1080.png" rel="noopener noreferrer"&gt;Open the full 1920×1080 image&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h3&gt;
  
  
  Illustration: a closer look at a lower-resolution source
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqqdwxh75yt6sv7fsjbm7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqqdwxh75yt6sv7fsjbm7.png" alt="Enlarged eye detail from a 360p video: enhancement OFF above, Anime4K Quality ON below" width="800" height="1072"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;640×360 input → 1920×1080 output, Automatic output scale. Identical 304×144 regions are enlarged 3× in both panels. &lt;a href="https://raw.githubusercontent.com/Lorcuz/WebScaly/main/docs/media/original-anime-360-detail-1000x1340.png" rel="noopener noreferrer"&gt;Open the large detail image&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;This second example uses a separately prepared &lt;strong&gt;360p video&lt;/strong&gt;, 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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h3&gt;
  
  
  Hero: a film example
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffsab3f3j4b89p0cvvokx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Ffsab3f3j4b89p0cvvokx.png" alt="Hero full-frame comparison: original video on the left, Anime4K Quality output on the right" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;960×540 input → 1920×1080 output, 2× output scale. &lt;a href="https://raw.githubusercontent.com/Lorcuz/WebScaly/main/docs/media/hero-comparison-1920x1080.png" rel="noopener noreferrer"&gt;Open the full 1920×1080 image&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F647w90b9m5p6x1csn7gq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F647w90b9m5p6x1csn7gq.png" alt="Enlarged Hero face detail: native video above, Anime4K Quality output below" width="800" height="1072"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The same source and settings, with identical 304×144 crops enlarged 3×. &lt;a href="https://raw.githubusercontent.com/Lorcuz/WebScaly/main/docs/media/hero-detail-1000x1340.png" rel="noopener noreferrer"&gt;Open the large detail image&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Hero is © 2018 Blender Foundation, Daniel Martínez Lara, licensed under &lt;a href="https://creativecommons.org/licenses/by/4.0/" rel="noopener noreferrer"&gt;CC BY 4.0&lt;/a&gt;. These excerpts are cropped, resized and enhanced; no endorsement is implied. &lt;a href="https://studio.blender.org/projects/hero/" rel="noopener noreferrer"&gt;Original film&lt;/a&gt; · &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/docs/media/ATTRIBUTIONS.md" rel="noopener noreferrer"&gt;Complete media credits and capture details&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;h2&gt;
  
  
  Trying it on a website
&lt;/h2&gt;

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

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcez42bq5w6324kkh7gx0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fcez42bq5w6324kkh7gx0.png" alt="WebScaly popup showing website approval, enhancement options and optional overlay controls" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The actual extension popup on a controlled demonstration website.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Choosing an enhancement method
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Method&lt;/th&gt;
&lt;th&gt;When to try it&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Spatial Detail&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Lightweight sharpening and denoise. Start here for a smaller processing workload.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Anime4K CNN&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Animation and drawn contours, as in the comparisons above.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;FSRCNNX&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Learned 2× upscaling for fine detail. Compare the result against the source.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3sfm6035hzkly1uyfn0i.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3sfm6035hzkly1uyfn0i.png" alt="WebScaly advanced settings showing the processing engine, output limits, spatial controls and optional player tools" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;WebScaly processes decoded frames at their native cadence. It does not generate intermediate frames or increase the source frame rate.&lt;/p&gt;

&lt;h2&gt;
  
  
  Website access stays under your control
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;For implementation details, see the &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/docs/ARCHITECTURE.md" rel="noopener noreferrer"&gt;architecture notes&lt;/a&gt;, Chrome's &lt;a href="https://developer.chrome.com/docs/extensions/reference/api/scripting" rel="noopener noreferrer"&gt;scripting documentation&lt;/a&gt; and the project's &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/PRIVACY.md" rel="noopener noreferrer"&gt;privacy policy&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Rendering and compatibility limits
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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 &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/docs/COMPATIBILITY.md" rel="noopener noreferrer"&gt;compatibility notes&lt;/a&gt;; simulated capability checks are not physical testing of every GPU.&lt;/p&gt;

&lt;h2&gt;
  
  
  Feedback that helps
&lt;/h2&gt;

&lt;p&gt;If a player behaves incorrectly, please report the player, source resolution, selected algorithm, expected result and steps to reproduce it in &lt;a href="https://github.com/Lorcuz/WebScaly/issues" rel="noopener noreferrer"&gt;GitHub Issues&lt;/a&gt;. For picture-quality problems, matching OFF/ON crops are useful. Please leave private video addresses and personal configuration exports out of public reports.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://chromewebstore.google.com/detail/webscaly/hdcnniaagmhkocoeahemlpgjecgpchfa" rel="noopener noreferrer"&gt;Install WebScaly&lt;/a&gt; · &lt;a href="https://github.com/Lorcuz/WebScaly" rel="noopener noreferrer"&gt;Browse the source&lt;/a&gt; · &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/docs/media/README.md" rel="noopener noreferrer"&gt;Full-size comparison gallery&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webgpu</category>
      <category>opensource</category>
      <category>webdev</category>
      <category>showdev</category>
    </item>
  </channel>
</rss>
