<?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 applies sharpening, light denoise and upscaling to accessible web video. Processing happens on the user's device, on websites the user explicitly approves.&lt;/p&gt;

&lt;p&gt;I maintain the project. This article explains the design decisions behind its rendering, website permissions and player integration, including the limits of the current release.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://chromewebstore.google.com/detail/webscaly/hdcnniaagmhkocoeahemlpgjecgpchfa" rel="noopener noreferrer"&gt;Install from the Chrome Web Store&lt;/a&gt; · &lt;a href="https://github.com/Lorcuz/WebScaly" rel="noopener noreferrer"&gt;Source code&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Three enhancement options
&lt;/h2&gt;

&lt;p&gt;Spatial Detail provides lightweight sharpening and denoise. Anime4K uses neural shaders intended for animation. FSRCNNX provides learned 2× upscaling. Quality, output size and per-site profiles let users choose an appropriate workload.&lt;/p&gt;

&lt;p&gt;These methods change the appearance of the available frames. They cannot recover a missing original master, guarantee better results for every video, or remove the browser's media protections. Excessive sharpening can accentuate compression artifacts; larger output sizes require more GPU work.&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. The website continues to handle playback and audio.&lt;/p&gt;

&lt;h2&gt;
  
  
  A real comparison
&lt;/h2&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%2F6ngklzac723e5w4qnson.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%2F6ngklzac723e5w4qnson.png" alt="WebScaly's actual comparison controls over original procedural demonstration footage" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The screenshot shows the installed extension processing original procedural footage: a 640×360 source, Spatial Detail, Balanced quality, 2× output scale, 35% sharpening and 12% denoise. The built-in comparison places the original and enhanced portions within one player.&lt;/p&gt;

&lt;p&gt;This is a controlled interface demonstration, not a benchmark or a promise of equivalent improvement on natural footage. Its capture procedure is available in &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/scripts/store-capture.mjs" rel="noopener noreferrer"&gt;the source&lt;/a&gt;. Player tools are hidden by default and were explicitly enabled for this demonstration.&lt;/p&gt;

&lt;h2&gt;
  
  
  Rendering follows the decoded video
&lt;/h2&gt;

&lt;p&gt;The renderer follows decoded frames with requestVideoFrameCallback. It takes stable frame snapshots, closes them after use and limits queued GPU work. Bounded surfaces and backpressure help prevent processing from accumulating behind playback.&lt;/p&gt;

&lt;p&gt;WebGPU runs the enhancement pipelines where supported. Missing or lost WebGPU support can use a WebGL spatial fallback where available. If a neural pipeline cannot initialize, the extension can fall back to Spatial Detail and explain the change. A fallback does not make all algorithms available on every device.&lt;/p&gt;

&lt;p&gt;Video discovery accounts for replaced elements, accessible embedded frames and open Shadow DOM. It checks whether a video is decoded, visible and usable. Hidden videos should not appear as active enhancement targets. At most two visible players per frame are processed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Website access is an ongoing decision
&lt;/h2&gt;

&lt;p&gt;The manifest uses storage, scripting and activeTab, with optional HTTP and HTTPS host permissions. No website is approved by default. Storage keeps settings locally; scripting activates the content code on approved websites; activeTab supplies temporary context when the user opens the extension.&lt;/p&gt;

&lt;p&gt;The approval operation is owned by the Manifest V3 worker. It starts the Chrome permission request before asynchronous work, records the pending intent in session storage, and completes activation after approval even if Chrome closes the popup. Denial must not create an approved site.&lt;/p&gt;

&lt;p&gt;Embedded video needs approval for both the player origin and its containing website. Approving a shared player service does not authorize every website that embeds it.&lt;/p&gt;

&lt;p&gt;Revocation also has to stop code that is already running. Removing a script registration alone does not remove previously injected code. WebScaly invalidates active renderers, cancels pending initialization, removes overlays and reconciles its script registrations. The authorization checks continue during use.&lt;/p&gt;

&lt;p&gt;The relevant Chrome behavior is documented in &lt;a href="https://developer.chrome.com/docs/extensions/reference/api/scripting" rel="noopener noreferrer"&gt;scripting&lt;/a&gt; and &lt;a href="https://developer.chrome.com/docs/extensions/develop/concepts/activeTab" rel="noopener noreferrer"&gt;activeTab&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Keeping native player controls usable
&lt;/h2&gt;

&lt;p&gt;The enhancement canvas and statistics are transparent to pointer input. Interactive extension controls and the comparison slider live in bundled extension frames outside the player's DOM event tree. Messages are restricted to the owning renderer and a small set of validated actions; those frames cannot manage website access.&lt;/p&gt;

&lt;p&gt;This separation matters when a player handles clicks during the capture phase. Toolbar clicks and comparison dragging should not turn into native player actions. Native controls and captions must also remain visibly above the enhanced image. The validation includes interaction checks and a regression check for those pixels.&lt;/p&gt;

&lt;p&gt;Native video-element fullscreen can show the original video. Container fullscreen can retain enhancement. If a website blocks the extension's interactive frame, the popup remains available for settings.&lt;/p&gt;

&lt;h2&gt;
  
  
  What has been checked, and what remains limited
&lt;/h2&gt;

&lt;p&gt;Controlled fixtures cover native HTML5 video, a JW-style container, Video.js, Plyr, HLS and DASH, along with pause, seek, source replacement, cleanup and permission revocation. Recorded live results distinguish passed, partial and unverified players. They are documented in &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/docs/COMPATIBILITY.md" rel="noopener noreferrer"&gt;compatibility results&lt;/a&gt; and &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/docs/TESTING.md" rel="noopener noreferrer"&gt;testing&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Simulated capability limits are not physical qualification of every AMD, Intel or other GPU. Quality and speed depend on the video, device and browser. Protected media and browser pixel-access restrictions can prevent direct enhancement.&lt;/p&gt;

&lt;p&gt;An optional compatibility player uses an explicit Chrome tab-sharing choice and lets the user select the video area for local enhancement. Audio stays in the source tab. Protected content can still remain black.&lt;/p&gt;

&lt;h2&gt;
  
  
  Privacy and useful feedback
&lt;/h2&gt;

&lt;p&gt;WebScaly has no tracking, analytics, user accounts, cloud inference or automatic video uploads. Frames, website addresses and diagnostics are handled locally for enhancement. Settings and approved sites stay in the browser. Optional external support links open only when selected; those services have their own policies. The details are in &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/PRIVACY.md" rel="noopener noreferrer"&gt;the privacy policy&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Useful feedback includes the affected player, source resolution, selected algorithm, expected behavior and reproducible steps. A cropped comparison can help with picture-quality problems. Please omit private video addresses, browser profiles and personal configuration exports from public reports.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/Lorcuz/WebScaly/issues" rel="noopener noreferrer"&gt;GitHub Issues&lt;/a&gt; is the place for reproducible problems. The &lt;a href="https://github.com/Lorcuz/WebScaly/blob/main/docs/ARCHITECTURE.md" rel="noopener noreferrer"&gt;architecture notes&lt;/a&gt; describe the implementation in more detail.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Disclosure: AI assisted development and the preparation of this article. Technical statements are based on the linked source and recorded validation.&lt;/em&gt;&lt;/p&gt;

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