DEV Community: Nishchay

Migrating OG Image Generation from Satori to Takumi: 30%+ Faster Astro Builds

Nishchay — Tue, 13 Oct 2026 14:31:59 +0000

A few months ago, I wrote about how to automate dynamic social images using Satori and Sharp. That pipeline gave me consistent, branded 1200×630 Open Graph (OG) cards for every blog post, tag page, and case study at build time without touching manual design tools.

It worked reliably. But as the number of articles, tag archives, and documentation pages grew past 150 routes, a clear bottleneck emerged: static build times kept creeping up.

Every full site rebuild was spending dozens of seconds spinning inside V8, computing flexbox layouts with Yoga WASM, and generating SVGs.

To fix this, I migrated the entire OG image rendering engine from Vercel's Satori to Takumi (takumi-js)—a high-performance, Rust-native image engine.

Here is why I made the switch, how the two engines compare under the hood, how to execute the migration with zero layout changes, and the exact real-world benchmark numbers from my Astro build pipeline.

Why Migrate? The Hidden Cost of SSG Social Previews

When you generate social cards at static build time (SSG), each unique route requires:

Building a virtual DOM tree (VNode object).
Resolving custom fonts, character glyphs, and line wraps.
Calculating CSS flexbox layouts.
Serializing the layout tree into an SVG string.
Rasterizing the SVG into a compressed WebP or JPEG via Sharp.

SSG Build Pipeline:
[Route Metadata] 
       │
       ▼
[Virtual DOM / JSX Spec] 
       │
       ▼
[Layout & Typography Engine] ─── (Satori Yoga WASM vs. Takumi Rust Core)
       │
       ▼
[Rendered SVG Code] 
       │
       ▼
[Sharp Rasterizer] 
       │
       ▼
[Cached 1200x630 JPEG / WebP Asset]

The Satori Bottleneck

Satori is an incredible tool that popularized JSX-to-SVG generation. However, it relies on a JavaScript orchestration layer combined with Yoga compiled to WebAssembly.

When generating over 150 images in a single build pass:

V8 Garbage Collection Overhead: Constructing thousands of intermediate JS objects for deep JSX trees stresses Node's memory heap.
WASM Boundary Crossing: Passing layout constraints and text metrics back and forth across the JS-WASM boundary adds microsecond overhead that compounds over hundreds of runs.
Single-Thread Execution: While Astro handles concurrency at the route level, heavy CPU work in JavaScript blocks the event loop from resolving file I/O swiftly.

I wanted something faster that would run natively without requiring a redesign of my existing JSX card templates.

What is Takumi?

Takumi (takumi-js) is an open-source, ultra-fast image generation engine written in Rust. It provides a drop-in API compatible with Satori, rendering HTML/JSX-like node trees and CSS flexbox styling directly into SVGs and images with native Rust performance.

GitHub: takumi-rs/takumi | Docs: takumi.kane.tw

Takumi is architected from the ground up for speed:

Native Rust Core (@takumi-rs/core): Ships precompiled N-API native binaries for Linux (x64, ARM64, musl, glibc), macOS (Apple Silicon & Intel), and Windows.
WASM Fallback (@takumi-rs/wasm): If running in edge workers or environments where native binaries cannot load, it falls back seamlessly to WebAssembly.
Advanced CSS Support: In addition to flexbox, Takumi adds cleaner text wrapping, linear & radial gradients, drop shadows, and rich font shaping out of the box.

Satori vs. Takumi: Architecture Comparison

Feature / Metric	Vercel Satori	Takumi (`takumi-js`)
Core Engine	TypeScript + Yoga (WASM)	Pure Rust (`@takumi-rs/core`)
Execution Model	JS runtime + WASM bridge	Native N-API C++ / Rust bindings
API Signature	`satori(element, options)`	`renderSvg(element, options)`
Node Input Schema	JSX / VNode (`{ type, props }`)	Identical JSX / VNode schema
CSS Capabilities	Standard flexbox subset	Flexbox + expanded gradients & shadows
Font Formats	TTF, OTF, WOFF	TTF, OTF, WOFF, WOFF2
Memory Footprint	Moderate (V8 heap allocations)	Low (Rust native memory management)

Because Takumi was designed with Satori API parity in mind, you do not have to redesign your card layouts.

Step-by-Step Migration Guide

Let's walk through the exact code changes made in this repository to migrate from Satori to Takumi.

1. Install Dependencies

Add takumi-js to your project dependencies:

npm install takumi-js

The package automatically resolves the appropriate native binary for your OS (e.g., @takumi-rs/core-linux-x64-gnu on Debian/Ubuntu or @takumi-rs/core-darwin-arm64 on Apple Silicon).

2. Add an Engine Switch to Centralized Config

To allow seamless benchmarking and provide a fallback safety net, I added an ogRender option in src/config.ts:

// src/config.ts
export const siteConfig = {
  // ... other configuration options

  /**
   * OG Image Renderer ('satori' | 'takumi')
   * Controlled via OG_RENDER environment variable
   */
  ogRender: (getEnv('OG_RENDER', 'takumi').toLowerCase() === 'satori'
    ? 'satori'
    : 'takumi') as 'satori' | 'takumi',
} as const;

This lets you toggle between engines instantly using environment variables:

OG_RENDER=takumi npm run build (Default, ultra-fast)
OG_RENDER=satori npm run build (Baseline comparison)

3. Update the Dynamic OG Endpoint

In Astro, dynamic OG images are generated via an endpoint file like src/pages/og/[...slug].jpg.ts.

Here is the diff showing how simple the migration is:

// src/pages/og/[...slug].jpg.ts
import satori from 'satori';
import { renderSvg as takumiRenderSvg } from 'takumi-js';
import { siteConfig } from '../../config';

// 1. Your existing VNode / JSX object definition remains 100% identical:
const ogElement: any = {
  type: 'div',
  props: {
    style: {
      display: 'flex',
      height: '100%',
      width: '100%',
      flexDirection: 'column',
      justifyContent: 'space-between',
      backgroundColor: '#0c0f17',
      padding: '60px 80px',
    },
    children: [
      // Title, author avatar, tags, branding...
    ],
  },
};

// 2. Options configuration:
const renderOptions: any = {
  width: 1200,
  height: 630,
  fonts: [
    { name: 'Inter', data: fontRegularData, weight: 400, style: 'normal' },
    { name: 'Inter', data: fontBoldData, weight: 700, style: 'normal' },
  ],
  embedFont: true,
  loadAdditionalAsset: async (code: string, segment: string) => {
    if (code === 'emoji') {
      return await getEmojiDataUrl(segment);
    }
    return [];
  },
};

// 3. Render SVG dynamically based on configured engine:
const svg =
  siteConfig.ogRender === 'takumi'
    ? await takumiRenderSvg(ogElement, renderOptions)
    : await satori(ogElement, renderOptions);

// 4. Rasterize to high-quality progressive JPEG via Sharp:
const jpegBuffer = await sharp(Buffer.from(svg))
  .jpeg({ quality: 80, progressive: true })
  .toBuffer();

4. Add Comparative Build Scripts to `package.json`

Add dedicated benchmark scripts to your package.json:

{
  "scripts": {
    "dev": "astro dev",
    "btakumi": "OG_RENDER=takumi npm run build",
    "bsatori": "OG_RENDER=satori npm run build",
    "build": "astro check && astro build"
  }
}

Now anyone on your team can verify parity or run isolated performance tests with a single command.

Real-World Performance Benchmarks

To obtain an accurate, unpolluted baseline, I cleared all local caches (rm -rf og-cache dist .astro) before each run and executed both builds against the exact same content set (160 total pages, including articles, tags, projects, and index routes).

Here are the measured numbers:

Build Time Comparison (Cold Cache, 160 Routes)

Metric	Vercel Satori (`npm run bsatori`)	Takumi (`npm run btakumi`)	Improvement
Astro Page Generation Phase	1m 07.00s (67.0s)	42.24s	37.0% faster ⚡
Total Wall Clock Time (`time`)	1m 23.70s (83.7s)	57.94s	30.8% faster ⚡
User CPU Time	1m 24.45s	1m 01.73s	26.9% less CPU load
System Time	5.94s	4.49s	24.4% less kernel overhead

Astro Build Duration (Cold Cache):
Satori: [███████████████████████████████████] 67.0s
Takumi: [██████████████████████] 42.2s  (-37% reduction)

Total Wall Clock Time:
Satori: [████████████████████████████████████████] 83.7s
Takumi: [████████████████████████████] 57.9s  (-30.8% reduction)

Why the Difference is Significant

In Static Site Generation (SSG), continuous integration (CI) pipelines on GitHub Actions or Vercel are billed by compute duration.

Faster Feedback Loops: Saving 25–30 seconds on every build means pull request previews and production deployments finish in under a minute.
Scalability: As the blog grows to 300+ articles, the 37% rendering speed differential prevents CI builds from timing out or hitting memory thresholds.
Identical Visual Fidelity: The generated SVG and JPEG artifacts match the original layout pixel for pixel with zero visual regression.

Lessons Learned & Best Practices

Keep Dual Renderers During Transition: Wrapping the renderer in a site configuration toggle made it effortless to benchmark both engines in CI without committing destructive changes.
Cache Font Buffers in Module Scope: Regardless of whether you use Satori or Takumi, load your TTF/WOFF font buffers once at module initialization rather than reading from disk on every endpoint invocation.
Invalidate Cache on Renderer Changes: Include the active renderer and version tag in your disk cache hash (crypto.createHash('sha256').update(JSON.stringify({ ..., renderer: siteConfig.ogRender, v: '2.0' }))). This guarantees that switching engines immediately regenerates fresh assets without stale artifacts.

Conclusion

If your Astro, Next.js, or SvelteKit site generates dynamic social previews at build time, migrating from Satori to Takumi is one of the highest-ROI optimizations you can make.

You get:

Drop-in compatibility: Zero layout redesign required.
Rust-native speed: Over 30% faster total build times.
Seamless developer experience: Easy configuration toggles and clean integration with Sharp.

Try sharing this post on Twitter, LinkedIn, or WhatsApp to see the newly generated Takumi dynamic card in action!

Originally published at nkaushik.in

How to Monitor Your Homelab with Beszel and Dozzle

Nishchay — Tue, 13 Oct 2026 14:30:23 +0000

Managing a homelab often starts with a single Docker container and quickly escalates into dozens of self-hosted services. As the footprint grows, keeping tabs on CPU spikes, memory leaks, disk wear, and container logs becomes essential.

The traditional solution, which usually involves spinning up a heavy monitoring stack like Prometheus, Grafana, Node Exporter, and Loki, often consumes more resources than the homelab services themselves. For a modest server or a collection of low-power nodes, you need something that is fast, lightweight, and simple to configure.

Beszel and Dozzle make a great alternative.

Beszel provides real-time system metrics and container resource usage across multiple nodes. Dozzle complements it by offering a web-based, real-time log viewer for all running containers. Together, they form a monitoring setup that runs on less than 50MB of RAM.

In this guide, we will walk through setting up a clean deployment of both tools on your server, and then show you how to run Beszel on an old Android phone to monitor its resource usage as an auxiliary homelab node.

Beszel vs Dozzle: What's the Difference?

While both tools monitor Docker environments, they solve two completely distinct operational needs:

Feature / Capability	Beszel (Metrics & Alerts)	Dozzle (Log Streaming)
Primary Purpose	System & Container Resource Metrics	Real-time Container Log Viewer
What It Tracks	CPU, RAM, Disk I/O, Network, GPU, S.M.A.R.T, Docker Stats	`stdout` & `stderr` Docker Container Logs
Architecture	Central Hub + Lightweight Agents across nodes	Single container connected to `/var/run/docker.sock`
Historical Data	Yes (Stores long-term trend graphs)	No (Pure live stream, no database overhead)
Alerting	Discord, Telegram, Pushover, Webhooks	None (focuses solely on log viewing)
Memory Footprint	~15MB – 25MB RAM	~10MB – 20MB RAM

Summary: Use Beszel to find out which service is hogging memory or when your server is down. Use Dozzle to inspect why a container crashed by reading its live log output.

Why Beszel and Dozzle?

Beszel is an open-source, lightweight resource monitor. It uses a hub-and-agent architecture. You host one central Hub (which displays the dashboard) and install a tiny Agent on each machine you want to monitor. It tracks CPU, memory, disk, network, GPU usage, temperatures, and per-container resource metrics.
Dozzle is a dedicated log viewer. It streams Docker container logs directly to your browser. It does not store logs or index them; it simply connects to the Docker socket to provide instant visibility when debugging.

Why Beszel is a self-hosting must-have

When self-hosting, your hardware resources are usually at a premium. Unlike enterprise setups with dedicated operations budgets, a home server might be an old optiplex, a Raspberry Pi, or a repurposed laptop. You need deep visibility, but you cannot afford to waste 1-2GB of RAM on Prometheus and Grafana.

Beszel solves this problem by packing three critical monitoring components into an incredibly lightweight footprint. The main home dashboard lists all your systems side-by-side:

Beszel splits metrics into three specific categories:

1. System metrics

Beszel tracks long-term system resource trends, including CPU, RAM, network bandwidth, and disk space usage. This lets you view historical spikes and spot pattern changes over days, weeks, or months.

2. Container metrics

Instead of running docker stats in a terminal to see which service is slowing down your system, Beszel auto-detects running containers and charts their individual resource footprint. If a container starts eating memory or pinning the CPU, you will see it immediately.

3. S.M.A.R.T metrics

Hard drive failures are one of the most common causes of data loss in a homelab. Beszel queries S.M.A.R.T database statistics to track temperature, write stats, bad sectors, and overall disk health. It can alert you before a drive completely dies.

4. Real-time alerts

A monitoring tool is only as good as its notification engine. Beszel lets you configure threshold triggers for critical system metrics. You can set up rules to alert you if a system goes offline, CPU temperature rises too high, memory exceeds a safe range, or disk space runs low. It natively integrates with Discord, Telegram, Pushover, Gotify, and generic webhooks.

1. Setting up Beszel

Because Beszel splits visual presentation from metric gathering, we host the central dashboard (the Hub) and the collector (the Agent) on our primary server.

Generic Docker Compose configuration

Create a file named beszel-compose.yml. This configuration defines both the central hub and the agent that monitors the host server.

services:
  beszel:
    image: henrygd/beszel:latest
    container_name: beszel
    restart: unless-stopped
    ports:
      - 9002:8090
    volumes:
      - ./beszel_data:/beszel_data
    environment:
      PUID: 1000
      PGID: 1000
      TZ: UTC
      # Security: restricts embedding in frames
      CSP: "frame-ancestors 'self';"

  beszel-agent:
    image: henrygd/beszel-agent:latest
    container_name: beszel-agent
    restart: unless-stopped
    network_mode: host
    cap_add:
      - CAP_PERFMON
      - SYS_RAWIO
      - SYS_ADMIN
    # Expose host hardware and storage info
    devices:
      - "/dev/dri/card0:/dev/dri/card0" # your graphics card
      - "/dev/sda:/dev/sda" # your storage device
      - "/dev/nvme0:/dev/nvme0" # your storage device
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - /var/run/dbus/system_bus_socket:/var/run/dbus/system_bus_socket:ro
      # Add optional path to monitor host storage mounts if needed
      # - /mnt/storage:/extra-filesystems/storage:ro
    environment:
      PORT: 4567
      KEY: "YOUR_AGENT_PUBLIC_KEY_FROM_HUB"

Explaining the configuration parameters

network_mode: host: The agent runs directly on the host network stack to reliably fetch system metrics and network statistics.
cap_add (Capabilities): Providing capabilities like SYS_RAWIO and CAP_PERFMON allows the agent to read hardware temperatures and drive health (SMART data) safely.
KEY: This is the public key generated by the Beszel Hub. When you first launch the Hub dashboard (at http://<your-server-ip>:9002), create an account, click "Add System", and copy the generated public key into your agent environment file or docker-compose definition.

2. Setting up Dozzle

Dozzle runs as a single lightweight container. It only needs access to the read-only Docker socket to read logs from other containers running on the same host.

Generic Docker Compose configuration

Create a file named dozzle-compose.yml:

services:
  dozzle:
    container_name: dozzle
    image: amir20/dozzle:latest
    restart: unless-stopped
    ports:
      - 8080:8080
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
    environment:
      DOZZLE_NO_ANALYTICS: "true"
      # Optional: Enable actions (Start/Stop/Restart) directly in the UI
      # DOZZLE_ENABLE_ACTIONS: "true"
      # Optional: Enable basic username/password authentication
      # DOZZLE_AUTH_PROVIDER: "simple"

Once running, navigate to http://<your-server-ip>:8080 to access the dashboard.

Although Dozzle has recently added basic container statistics (like CPU and memory indicators on the home screen), its primary strength lies in its raw log streaming. Beszel is much better suited for system and container resource monitoring since it stores historical data. Keep Dozzle for viewing, filtering, and debugging your container logs in real time.

Selecting any container immediately opens a real-time, scrolling log output window, which makes troubleshooting and tracking down runtime exceptions simple.

3. Repurposing an old Android device as a node

One of the best ways to practice self-hosting sustainability is turning old Android phones into lightweight servers. You can run database backups, lightweight script runners, or DNS servers on them.

Because Beszel is compile-friendly, you can run the static arm64 binary of the agent directly on your Android device to monitor its CPU temperature, battery percentage, RAM, and network usage.

Setting up the agent via Termux

To install the agent on Android, you will use Termux, a terminal emulator and Linux environment app.

Step 1: Install Termux

Install the latest version of Termux from F-Droid or GitHub. Avoid the outdated version on the Google Play Store.

Step 2: Download the static ARM64 agent binary

Open Termux on the Android device and update packages. Download the latest compiled static arm64 Linux binary directly from the Beszel GitHub Releases page:

# Update package repositories
pkg update && pkg upgrade -y

# Download the static arm64 agent binary
curl -s -L -o beszel-agent https://github.com/henrygd/beszel/releases/latest/download/beszel-agent-android
# If you run into compatibility issues, you can download the standard static Linux arm64 binary:
# curl -s -L -o beszel-agent https://github.com/henrygd/beszel/releases/latest/download/beszel-agent_Linux_arm64.tar.gz

# Make it executable
chmod +x beszel-agent

Step 3: Run the agent

To start the agent and hook it up to your server's central Hub, define the incoming port and the public key you generated inside the Hub dashboard:

PORT=4567 KEY="YOUR_HUB_PUBLIC_KEY" ./beszel-agent

Root vs. Non-Root: Running as a standard user in Termux works for general CPU and memory stats. However, if your Android device is rooted and you want full disk and battery metrics, run the binary as superuser by prefixing the command with su (using Magisk/KernelSU).

To keep the agent running in the background on Android, you can use tmux, nohup, or write a simple Termux service script using Termux-services.

4. Testing and verification

Once you have set up the containers and Android agent:

Navigate to your central Beszel Hub at http://<server-ip>:9002.
Your primary server (where the agent runs with network_mode: host) should already show metrics.
Add a new system for the Android device. Input the phone's IP address and port 4567.
Within a few seconds, the phone's stats, including CPU spikes and memory consumption, will populate in the dashboard.

Originally published at nkaushik.in

Programmatic Video with Remotion: Building Videos in React with AI Skills

Nishchay — Tue, 06 Oct 2026 17:04:50 +0000

Every time you finish building a side project, SaaS product, or game, you face the same chore: creating a promo video that looks clean.

Usually, that means opening Premiere Pro, After Effects, or DaVinci Resolve. You end up nudging keyframes on a timeline, wrestling with GUI export settings, manually lining up sound effects, and repeating the whole cycle whenever you need to fix copy in a 30-second clip. For developers used to code, Git, and component design, the workflow feels slow and disconnected from how we build software.

Instead of timeline editors, you can build video animations using the tools you already know: React components, JSX, CSS flexbox, and spring physics, then render them directly into MP4 files from your terminal.

This is where Remotion fits in.

What is Remotion?

Remotion is an open-source framework that allows developers to create videos programmatically using React, TypeScript/JavaScript, and CSS. Instead of manual timeline editing, video frames are rendered deterministically based on React state and frame numbers, enabling automated video generation, CI/CD rendering, and dynamic personalized video pipelines.

Learn more: Remotion Official Website | Remotion GitHub Repository

While building Tambola Live, a real-time WebRTC multiplayer game (covered in my Tambola Architecture Case Study), I needed a 40-second animated promo trailer. Using Remotion, the official Remotion AI skills, and Gemini 3.7 Flash, I built the entire 1080p video with scene transitions, kinetic typography, and synchronized sound effects in React.

Here is a breakdown of how programmatic video works, how Remotion's preview studio speeds up iteration, and how AI skills help you generate complete scenes without trial and error.

Remotion vs. traditional video editors: why code wins

If you know how to build web apps, you already know most of what it takes to build a Remotion video. Similar to automating social images with Satori and Sharp, programmatic video replaces manual GUI work with reproducible code.

Feature / Dimension	Traditional GUI Editors (Premiere / After Effects)	Programmatic Video (Remotion)
Workflow Interface	Proprietary timeline GUI with visual tracks	React components, JSX, and standard CSS
Version Control	Heavy, binary `.prproj` or `.aep` files	Standard Git diffs, pull requests, and code reviews
Asset Reusability	Manual copy-pasting across timeline layers	Composable React components and design tokens
Dynamic Data	Manual re-editing per data variation	Direct API, JSON, WebSocket, or database inputs
Feedback Loop	Background timeline rendering for previews	Fast browser Studio with instant Hot Module Replacement (HMR)
Automation & CI/CD	Complex desktop rendering macros	Headless CLI or serverless cloud rendering

Traditional Video Workflow:
[GUI Timeline] ---> [Manual Keyframes] ---> [Heavy Local Render] ---> [Hard to Update / Automate]

Programmatic Remotion Workflow:
[React & CSS] ---> [Frame & Spring Hooks] ---> [Live Studio Preview] ---> [CLI / Cloud Render]

The core mental model: how Remotion turns React into video

In Remotion, a video is a sequence of still frames rendered at a fixed frame rate (such as 30 or 60 frames per second).

Instead of relying on browser wall-clock timers like setTimeout or CSS @keyframes (which can drift or drop frames during heavy CPU loads), Remotion uses deterministic hooks tied directly to the current frame index:

useCurrentFrame(): Returns the integer index of the active frame (0, 1, 2, ...).
useVideoConfig(): Provides composition metadata such as fps, durationInFrames, width, and height.
interpolate(): Maps a frame range to numerical values (for instance, fading opacity from 0 to 1 between frames 0 and 30).
spring(): Computes natural, physics-based motion using mass, stiffness, and damping parameters.

A simple 3-second animated title

Here is a minimal Remotion component:

import React from 'react';
import { useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion';

export const IntroTitle = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Calculate smooth physics-based spring entrance
  const entrance = spring({
    frame,
    fps,
    config: { damping: 12, stiffness: 100 },
  });

  const scale = interpolate(entrance, [0, 1], [0.8, 1]);
  const opacity = interpolate(entrance, [0, 1], [0, 1]);

  return (
    <div
      style={{
        flex: 1,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#090d16',
        color: '#ffffff',
        fontSize: 64,
        fontWeight: 800,
        transform: `scale(${scale})`,
        opacity,
      }}
    >
      Tambola Live
    </div>
  );
};

Because entrance depends strictly on frame, Remotion guarantees pixel-perfect, frame-accurate rendering whether your local machine runs at 10 fps or 120 fps.

Speeding up scene generation with Remotion AI skills & Gemini 3.7 Flash

Calculating animation timings, keyframe curves, and scene transitions by hand can take time. To help with this, the Remotion team created official Agent Skills that give coding assistants direct knowledge of Remotion's architecture and APIs.

You can install Remotion skills into your AI agent environment with one command:

npx -y skills@latest add remotion-dev/skills -g -y

This installs 12 specialized Remotion skills into your project:

Skill	Purpose
`remotion-best-practices`	Enforces frame determinism, avoiding non-deterministic timers, and memory optimizations.
`remotion-create`	Scaffolds new video projects, compositions, and sequence structures.
`remotion-studio`	Guides interactive preview workflows and debugging via the local studio.
`remotion-render`	Handles headless CLI rendering, codecs (H.264, ProRes, WebM), and output flags.
`remotion-transitions`	Implements `@remotion/transitions` (`fade`, `slide`, `wipe`, `flip`).
`remotion-multimedia`	Orchestrates audio tracks, sound effects synchronization, and video assets.
`remotion-captions`	Generates dynamic word-by-word animated subtitles.

Pairing with Gemini 3.7 Flash

With these skills installed, I gave Gemini 3.7 Flash the scene outline for the promo video:

"Create a 40-second 1080p promo video for an online WebRTC Tambola game. We need 6 scenes: Hook, Host creating room, Player scanning QR code to join, Live number calling & ticket dabbing, Winning claim fanfare with confetti, and an Outro with a call to action. Use @remotion/transitions with fade, spring-loaded kinetic typography, and synchronized sound effects."

Because the model had direct access to remotion-dev/skills, it avoided common AI errors like using setInterval or non-deterministic CSS animations. Instead, it generated clean, modular Remotion sequence components with proper frame calculations and spring curves right away.

Fast iteration with Remotion preview studio

The most convenient part of developing with Remotion is the Remotion Studio.

You start the preview studio with:

npx remotion studio src/remotion/index.js

This launches a local preview interface on http://localhost:3000:

Interactive Timeline: Drag the playhead to scrub across frames smoothly.
Frame-by-Frame Stepping: Use arrow keys to step through individual frames and inspect alignment.
Responsive Canvas Zoom: Scale from 10% to 200% to verify typography, badges, and mobile mockups.
Instant Hot Module Replacement (HMR): Update CSS padding, color values, or spring physics in your code editor, and see the canvas update in milliseconds without restarting.

+-------------------------------------------------------------------+
|  Remotion Studio (http://localhost:3000)                          |
+-------------------------------------------------------------------+
|  [ Play / Pause ]  [ Frame: 450 / 1200 ]  [ 30 FPS ]  [ 1080p ]   |
|                                                                   |
|  +-------------------------------------------------------------+  |
|  |                                                             |  |
|  |           [ Animated Ticket & Live Ball Calling ]           |  |
|  |                                                             |  |
|  +-------------------------------------------------------------+  |
|                                                                   |
|  [================== Timeline Scrubbing Bar ===================]  |
|  |-- Scene 1 --|-- Scene 2 --|-- Scene 3 --|-- Scene 4 Gameplay -|  |
+-------------------------------------------------------------------+

Case study: building the Tambola Live promo video

Here is how the promo video was organized in /src/remotion/ for Tambola Live.

1. Root Composition setup (`Root.jsx`)

The video root declares the compositions available in the project, defining the resolution, frame rate, and total duration in frames (40 seconds at 30 fps = 1,200 frames):

import React from 'react';
import { Composition } from 'remotion';
import { PromoVideo } from './PromoVideo.jsx';

export const Root = () => {
  return (
    <Composition
      id="PromoVideo"
      component={PromoVideo}
      durationInFrames={1200}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

export default Root;

2. Scene sequencing with transitions (`PromoVideo.jsx`)

Rather than manually offsetting start frames for every scene, @remotion/transitions chains scenes together cleanly:

import React from 'react';
import { AbsoluteFill } from 'remotion';
import { TransitionSeries, linearTiming } from '@remotion/transitions';
import { fade } from '@remotion/transitions/fade';
import AudioManager from './audio/AudioManager.jsx';
import Scene1Hook from './scenes/Scene1Hook.jsx';
import Scene2Host from './scenes/Scene2Host.jsx';
import Scene3Join from './scenes/Scene3Join.jsx';
import Scene4Gameplay from './scenes/Scene4Gameplay.jsx';
import Scene5Winning from './scenes/Scene5Winning.jsx';
import Scene6Outro from './scenes/Scene6Outro.jsx';

export function PromoVideo() {
  return (
    <AbsoluteFill style={{ backgroundColor: '#090d16', color: '#ffffff' }}>
      {/* Synchronized Audio & SFX Layer */}
      <AudioManager />

      {/* Cinematic Transition Sequences */}
      <TransitionSeries>
        <TransitionSeries.Sequence durationInFrames={155}>
          <Scene1Hook />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={185}>
          <Scene2Host />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={185}>
          <Scene3Join />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={305}>
          <Scene4Gameplay />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={245}>
          <Scene5Winning />
        </TransitionSeries.Sequence>
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 12 })}
        />

        <TransitionSeries.Sequence durationInFrames={185}>
          <Scene6Outro />
        </TransitionSeries.Sequence>
      </TransitionSeries>
    </AbsoluteFill>
  );
}

3. Adding audio and synthetic sound effects without external files

For the audio layer, we layered background music using Remotion's <Audio> component alongside synthetic PCM WAV sound effects generated directly in JavaScript:

import React from 'react';
import { Audio, Sequence, staticFile } from 'remotion';
import { SOUND_POP, SOUND_DAB, SOUND_WIN, SOUND_CHIME } from './sounds.js';

export default function AudioManager() {
  return (
    <>
      {/* 40-Second Upbeat Background Music Track */}
      <Audio src={staticFile('promo-music.wav')} volume={0.8} />

      {/* Synchronized Sound Effects */}
      <Sequence from={180} durationInFrames={20}>
        <Audio src={SOUND_CHIME} volume={0.4} />
      </Sequence>

      <Sequence from={540} durationInFrames={15}>
        <Audio src={SOUND_POP} volume={0.5} />
      </Sequence>

      <Sequence from={570} durationInFrames={15}>
        <Audio src={SOUND_DAB} volume={0.55} />
      </Sequence>

      <Sequence from={870} durationInFrames={60}>
        <Audio src={SOUND_WIN} volume={0.65} />
      </Sequence>
    </>
  );
}

By generating data-URI WAV sounds mathematically (sine waves with exponential decay envelopes at 22,050 Hz), sound effects like ball pop sounds, ticket dabs, chimes, and victory fanfares are completely self-contained, requiring zero external asset downloads during rendering.

Rendering to production MP4 from the CLI

When you are ready to produce the final video, render it directly from your terminal:

# Render high-quality MP4 using H.264 codec
npx remotion render src/remotion/index.js PromoVideo public/promo-video.mp4 --codec h264

You can also extract poster images and video thumbnails at specific frames:

# Extract frame 100 as high-resolution poster JPEG
npx remotion still src/remotion/index.js PromoVideo public/promo-poster.jpg --frame 100

For large-scale production (such as generating personalized recap videos for users), you can deploy Remotion to AWS Lambda or Google Cloud Run using @remotion/lambda to render videos in parallel across distributed serverless functions.

See the game and video live in action

The complete promo video generated through this workflow is live today.

You can visit Tambola Live (tambola.nkaushik.in) to:

Play the game: Host a room, invite friends via QR code or direct link, roll 1-90 numbers with real-time WebRTC sync, and auto-verify winning tickets.
Watch the promo video: Scroll down to the "How To Play" section on the homepage to watch the full Remotion-rendered video running in the web player.

Final thoughts

Code is a practical video tool: If you know React and CSS, Remotion gives you full control over animations, typography, and automated rendering.
AI skills remove the boilerplate: Installing remotion-dev/skills gives models like Gemini 3.7 Flash the exact context needed to write working sequence timings and spring curves without guesswork.
The Studio provides immediate feedback: You can inspect frames, test responsive viewports, and tweak CSS without waiting for full exports.

If you have put off creating a promo video for your project because video editing software feels cumbersome, building it in React with Remotion is worth exploring.

Originally published at nkaushik.in

AdGuard Home: Stop Ads & Trackers for Your Entire Family

Nishchay — Tue, 06 Oct 2026 17:04:28 +0000

How often have you encountered the scenario where you search something and suddenly everywhere you go, you start seeing ads for it. Or, when you try to read a news article and you can barely read anything with all the ads showing up.

Although you might use apps like Firefox or extensions such as Adblock, they must be installed on every device, which is often impractical.

I faced a similar issue because my family, like many others, isn't tech-savvy. I needed a solution that could be implemented to shield them from ads and malware without requiring any changes on their part.

Enter, AdGuard Home

AdGuard Home is an open-source, network-wide DNS server that blocks ads, telemetry, and tracking domains before they ever reach your smartphones, laptops, smart TVs, or IoT devices.

In this guide, we'll cover how to install AdGuard Home, configure the best 2026 blocklists, optimize upstream DNS settings, and deploy it across your entire home network.

🤖

Let's assume we're working in a Linux environment (such as a Raspberry Pi, Debian mini PC, or Docker container), as it simplifies 24/7 reliability. However, the installation and web interface steps are identical across platforms.

Installation

Head over to the AdGuard Home Automated Install. Installing AdGuard is as simple as running a single command.

To install with curl run the following command:

curl -s -S -L https://raw.githubusercontent.com/AdguardTeam/AdGuardHome/master/scripts/install.sh | sh -s -- -v

To install with wget run the following command:

wget --no-verbose -O - https://raw.githubusercontent.com/AdguardTeam/AdGuardHome/master/scripts/install.sh | sh -s -- -v

This installs the AdGuard Home service, which will act as your local recursive/forwarding DNS server.

What is DNS?

DNS stands for Domain Name System. In simple terms, it is the internet's address book. Every website you visit has an underlying IP address (e.g. 66.11.184.216). When your browser asks for google.com, DNS translates that human-friendly name into the server's IP address. By acting as your DNS server, AdGuard Home inspects domain requests and instantly drops requests to known advertising, tracker, and phishing domains.

Setting Up AdGuard Home & Web Interface

After installation, the setup wizard starts on port 3000. Open your browser and navigate to http://<your-server-ip>:3000.

Step 1: Click Get Started.

Step 2: Configure Admin Web Interface & DNS Port.

By default, the admin web UI listens on port 80. If you already run a web server (like Nginx or Traefik), change the admin port to 3000 or 8080.
Keep the DNS server port on 53 (standard DNS port).

Step 3: Set your admin username and password.

Once the wizard completes, log into the dashboard at http://<your-server-ip>:3000.

Best AdGuard Home Blocklists (2026 Recommended)

To add blocklists, go to Filters → DNS blocklists → Add blocklist → Add a custom list in your AdGuard Home dashboard.

Here is our curated, tested stack of blocklists that provides maximum protection with zero false positives (safe for family use without breaking online banking or streaming):

Blocklist Name	Focus Category	Recommended Source URL	Best For
AdGuard DNS Filter	Ads & Trackers	`https://adguardteam.github.io/HostlistsRegistry/assets/filter_1.txt`	Core ad blocking
OISD Basic / Big	Universal Ad & Telemetry	`https://big.oisd.nl`	Zero false positives (Family-safe)
Peter Lowe's List	Ad & Tracking Servers	`https://pgl.yoyo.org/adservers/serverlist.php?hostformat=adblockplus&showintro=0&mimetype=plaintext`	High performance & lightweight
Steven Black Unified Hosts	Malware + Adware	`https://raw.githubusercontent.com/StevenBlack/hosts/master/hosts`	Malicious domain protection
Phishing URL Blocklist	Phishing & Scams	`https://adguardteam.github.io/HostlistsRegistry/assets/filter_30.txt`	Security & Anti-Phishing
AdGuard Popup Hosts	Annoying Popups	`https://adguardteam.github.io/HostlistsRegistry/assets/filter_11.txt`	Notification & popup spam

Recommended DNS Settings & Upstream DNS

To maximize speed and prevent ISP snooping, navigate to Settings → DNS Settings and configure encrypted upstream DNS providers (DoH / DoT):

Upstream DNS Servers (Copy & Paste)

https://dns.quad9.net/dns-query
https://cloudflare-dns.com/dns-query
https://dns.adguard-dns.com/dns-query

Optimal DNS Settings:

Upstream mode: Parallel requests (queries all upstream servers concurrently and uses the fastest response).
DNS cache size: 67108864 (64 MB cache for instant sub-millisecond local responses).
Optimistic caching: Enable (serves cached responses while refreshing stale entries in background).

Can AdGuard Home Block YouTube Ads in 2026? (The Truth & Workarounds)

One of the most frequent questions homelabbers ask is: "Can I block YouTube ads network-wide using AdGuard Home?"

The short answer: No, not via DNS alone.

Why? Google serves YouTube video advertisements from the exact same content delivery networks (CDNs) and domain names (e.g., *.googlevideo.com) as the real video you are trying to watch. If AdGuard Home blocks that domain, the YouTube video will simply fail to buffer.

Effective Workarounds for YouTube Ads:

Desktop / Mobile Browser: Use uBlock Origin or the Brave Browser, which perform deep cosmetic and request filtering inside the browser DOM.
Android & Android TV: Use open-source third-party clients like SmartTube (for Android TV) or ReVanced (for Android smartphones).
Parental Controls on AdGuard: While it cannot block YouTube ads, AdGuard Home can enforce YouTube SafeSearch or schedule full blocking of YouTube during study hours under Filters → Blocked Services.

Deploying AdGuard Home to All Devices (Router Level)

To protect your entire house without configuring every phone, tablet, and TV individually, set AdGuard Home as your home router's primary DNS server.

Log into your Wi-Fi router's admin panel (typically 192.168.1.1 or 192.168.0.1).
Navigate to DHCP Settings / LAN Settings / DNS.
Set Primary DNS Server to your AdGuard Home IP address (e.g. 192.168.1.150).
Set Secondary DNS Server to your backup DNS or leave blank.
Save and reboot your router.

Once refreshed, every phone, laptop, and smart appliance connecting to your Wi-Fi will automatically query AdGuard Home, blocking ads and tracking seamlessly.

Parental Controls & Service Scheduling

AdGuard Home includes built-in service blocking under Filters → Blocked services.

You can toggle one-click restrictions on specific platforms (TikTok, Roblox, Discord, adult domains) or schedule service downtime for bedtime:

💬 Frequently Asked Questions (FAQ)

What are the best AdGuard Home blocklists to use in 2026?

The ideal blocklist stack includes AdGuard DNS Filter (for general ads), OISD Basic/Big (near-zero false positives, family-friendly), Steven Black's Unified Hosts (malware and adware), and Peter Lowe's List.

Can AdGuard Home block YouTube ads?

No, DNS blockers cannot block YouTube video ads because the ads and the video streams originate from identical domain names (*.googlevideo.com). Use browser extensions like uBlock Origin or client apps like SmartTube on Android TV.

What are the best upstream DNS servers for AdGuard Home?

Use encrypted DNS-over-HTTPS (DoH) providers such as Quad9 (https://dns.quad9.net/dns-query) for malware filtering and Cloudflare (https://cloudflare-dns.com/dns-query) for speed.

Does AdGuard Home slow down internet connection speeds?

No. In fact, AdGuard Home accelerates browsing by caching frequent DNS queries locally and blocking heavy tracking scripts and media ads from ever downloading.

Related Homelab & Self-Hosting Guides

Originally published at nkaushik.in

Top 4 ways to Run LLM locally on Android and iOS

Nishchay — Tue, 06 Oct 2026 16:29:29 +0000

In my previous blog, I explored the technical rabbit hole of running Llama.cpp in Termux on an old Android phone. While that was a rewarding experiment, let's be honest: it wasn't exactly "plug-and-play" for most people.

But it's 2026, and the game has changed. You no longer need to be a Linux wizard to have a private, powerful AI in your pocket. In this guide, I'm covering the Top 4 ways you can run LLMs locally on your Android or iOS device—completely for free, with unlimited requests, and zero data leaving your phone.

Quick Comparison Matrix (2026 Tested)

App / Method	Best For	Platform	RAM Required	Supported Formats	Offline Mode
Google Edge Gallery	One-click setup & NPU speed	Android / iOS	2GB - 4GB	LiteRT / Gemma 4 / Gemma 3	✅ 100% Offline
PocketPal AI	Daily chat & Uncensored models	Android / iOS	4GB - 8GB	GGUF (llama.cpp)	✅ 100% Offline
AnythingLLM	PDF & Document RAG	Android / iOS	6GB - 12GB	GGUF / Ollama API / Cloud	✅ 100% Offline
Termux + Ollama	Power users & CLI automation	Android	4GB - 8GB	Ollama Library / GGUF	✅ 100% Offline

1. Google AI Edge Gallery: The "One-Click" Starter

https://github.com/google-ai-edge/gallery

Google's official showcase is the perfect starting point. It's the easiest way to see what your phone is actually capable of. It's optimized for mobile NPUs, meaning it's fast and efficient for tasks like tone refinement, audio transcription, and image understanding.

The latest version now supports Gemma 4 and Gemma 3, models specifically "distilled" to run on mobile hardware without eating up your RAM. For a dedicated deep-dive on setting up Gemma 4 with Edge Gallery, check out my Running Gemma 4 Locally on iOS & Android Guide.

The "Skills" Update: One of the coolest additions is support for SKILLS. You can now extend what the AI can do by pulling from a vast library at skills.sh. My personal favorite is the Humanizer skill—it's great for making AI-generated text sound more, well, human.

Demo

https://youtube.com/shorts/1H6z2-K7gvw

Models Available

Gemma 4 E2B and E4B
Gemma 3 1B
Gemma 3n E2B and E4B
DeepSeek R1 Distill Qwen 1.5B
Qwen 2.5 1.5B
LiteRT distilled models

Bundling your own model

If you're feeling adventurous, you can even bundle your own models by following the LiteRT community guide. It walks you through converting models from Pytorch or other formats.

2. PocketPal AI (Best for General Chat & Uncensored Models)

PocketPal AI is the one I keep coming back to. It's built on llama.cpp (the industry standard), but the interface is actually designed for a human using a phone, not a developer staring at a terminal.

The 'Pals' feature is the standout here. Instead of one messy chat thread, you can set up different "Pals" with their own system prompts. I have one for coding and another for creative writing. It also handles the latest architectures like Qwen 3.5 and LFM 2.5, which are incredibly fast on mobile.

Why it works for me:

Easy Model Setup: You can download GGUF models directly within the app. For a smooth experience, I recommend any GGUF model (try Unsloth's uploads) with Q4_K_M quantization.
100% Private: Once the model is on your phone, you can go into Airplane Mode and the AI won't even notice.
Live Stats: It shows you tokens per second in real-time. It's satisfying to see your phone's hardware in action.

Running Uncensored Local LLMs on Android with PocketPal

If you need a local model without restrictive alignment filters for creative writing or raw coding analysis, PocketPal AI makes loading uncensored GGUFs simple:

Open PocketPal AI → Navigate to the Models tab.
Tap Add Custom Model (Hugging Face URL).
Paste a direct GGUF link for an uncensored model (such as Dolphin-2.9.4-Llama3.1-8B-GGUF in Q4_K_M quantization or Qwen2.5-1.5B-Instruct-GGUF).
PocketPal downloads the GGUF weights directly to internal storage and runs them completely sandboxed with 0 guardrails.

3. AnythingLLM: The Researcher's Workspace

If you need your AI to actually do something with your files, AnythingLLM is a different beast. It's less of a chatbot and more of a portable workspace.

The killer feature is On-Device RAG. You can feed it a PDF or text file sitting on your phone, and the AI will answer questions based only on that document. I've used this to summarize 50-page technical docs during flights with zero internet.

What sets it apart:

Chat with your docs: Local indexing means your data never touches a server.
Tools & Agents: It supports web scraping, calendar editing, and the Model Context Protocol (MCP), so it's slowly becoming a true mobile agent.
The "Infinite Power" Trick: If your phone is struggling, you can connect it to a massive 70B model running on your home PC via API and use your phone as a remote window into that power.

4. Termux + Ollama: The Power User Shortcut

This is for my Android users who miss the command line. We're using Termux to run Ollama directly on the device. It's the closest you'll get to a desktop experience on a mobile screen.

The Quick Setup:

Install Termux (use the version from F-Droid, not the Play Store).
Run pkg install ollama.
Type ollama run qwen2.5:0.5b or ollama run qwen3.5:0.8b.

For the full setup guide, check out my companion tutorials:

How to Install and Run Ollama in Termux on Android (2026 Guide)

How to Install llama.cpp on Windows, Mac, Linux, and Termux (2026)

Running 24/7 Local AI on an Old Android without Overheating

That's it. Ollama will auto-download the model and drop you into a CLI chat. You can run pretty much anything from the Ollama Library as long as your RAM can handle it. It's the fastest way to test new models the second they drop.

Summary: Which one should you pick?

Method	Best For	RAM & Hardware Specs	Supported Models & Classes	Ease of Use	Customization
Google Edge Gallery	Beginners & NPU Acceleration	2GB - 4GB RAM (Tensor / Snapdragon NPUs like Pixel 8/9, Galaxy S24)	Gemma 3 1B/4B, Gemma 4, LiteRT distilled models	⭐⭐⭐⭐⭐	⭐⭐
PocketPal AI	Daily Chats & Uncensored Models	4GB - 8GB RAM (OnePlus 11/12, Galaxy S23/S24, iPhone 15/16)	Qwen 3.5, LFM 2.5, Llama 3.2 (1B/3B GGUF)	⭐⭐⭐⭐	⭐⭐⭐⭐
AnythingLLM	Document RAG & Local Workspaces	6GB - 12GB RAM (Galaxy S24 Ultra, iPhone 16 Pro Max)	Custom Local GGUF, Ollama endpoints, Cloud APIs	⭐⭐⭐	⭐⭐⭐⭐⭐
Termux + Ollama	Developers & Command Line Users	4GB - 8GB RAM (64-bit ARM devices on Android 10+)	Qwen 2.5/3.5 (0.8B/1.5B), Llama 3.2 1B/3B	⭐	⭐⭐⭐⭐

Related Local AI Guides

Happy (Local) Chatting!

Originally published at nkaushik.in

Building Web ScreenShare using WebRTC

Nishchay — Tue, 06 Oct 2026 16:15:30 +0000

The web is a very powerful platform it grants you the ability to share something with everyone irrespective of what device they are using, be it an Android or iOS phone or a Windows, Linux, or Mac laptop.

With time the things, a browser could do have also increased greatly (except IE11, switch to Firefox already). A webpage is no longer about some text and images, you can add a lot more power-hungry features to your webpage. You can create Games, Build Services like Google Docs, Browser Stack, and a lot more all running on a browser.

This post is going to talk about one of the browser’s features I had a chance to work with and the tech I explored for integrating it.

Problem Statement

The problem statement I had in front of me was to implement a screen-share feature where-in when a User is sharing the screen it would be possible for others to view it over the internet as a real-time video.

The first step was to break down this problem into smaller problems and build a prototype around it.

As I saw it, the problem had two pieces, first figuring out how to capture the screen, second, how to send it across to other users as a live video feed.

I’ll start with the Screen-share bit first.

Screen-share/Record

I knew websites already do it (you would’ve seen it in action on Zoom or Google Meet) but wasn’t aware How easy it is to do it on our own.

const promise = navigator.mediaDevices.getDisplayMedia(constraints);

The above line is all it takes to get started with screen-sharing. It is supported by all the latest browsers and you can read more on its support at https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

When you run the above code snippet you will get a Promise<MediaStream>, now it is up-to us to decide how we want to use this.

We can either share it with other people using WebRTC (more on it later) or even record it and download the video.

Example snippet to download the recorded video (taken from https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API)

promise.then(stream => {
    var recordedChunks = [];

    console.log(stream);

    var options = { mimeType: "video/webm; codecs=vp8" };
    mediaRecorder = new MediaRecorder(stream, options);

    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start();

    function handleDataAvailable(event) {
        console.log("data-available");
        if (event.data.size > 0) {
            recordedChunks.push(event.data);
            console.log(recordedChunks);
            download();
        } else {
        // ...
        }
    }

    function download() {
        var blob = new Blob(recordedChunks, {
            type: "video/webm"
        });
        var url = URL.createObjectURL(blob);

        var a = document.createElement("a");

        document.body.appendChild(a);
        a.style = "display: none";
        a.href = url;
        a.download = "test.webm";
        a.click();
        window.URL.revokeObjectURL(url);
    }

    // demo: to download after 9sec
    setTimeout(event => {
        console.log("stopping");
            mediaRecorder.stop();
        }, 9000);
    });
}

One thing to note about the above getDisplayMedia API is it behaves differently on browsers. For example, Chrome lets you share between a single tab/window/desktop, Firefox shares the whole window and Safari shares the entire desktop.

A limitation this API has is, it won’t let you share only a part of your webpage.

Now that we have solved half of the problem, let’s get to the second part.

WebRTC

If you haven’t heard about it, don’t worry, I will add resources for you to read. It is an interesting topic so you should give it a try.

WebRTC (Web Real-Time Communication) is a technology that enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary.

The above definition is taken from MDN docs which captures the gist of what WebRTC is (https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API).

WebRTC is a very detailed topic and it won’t be easy to cover all that it provides in this article. I’d highly recommend going through this video on YouTube.

https://www.youtube.com/watch?v=p2HzZkd2A40

Based on the above video, we derive two important steps, we need to acquire a video/audio stream and then use WebRTC to communicate it with peers.

This video stream that we share can either be a stream from your webcam or any MediaStream from other sources.

If you recall, the screen-share stream we acquired is also a MediaStream which can be used with WebRTC.

So once we have set-up our WebRTC connection we can simply publish this Screen-share stream on it and make it available to peers in real-time.

Implementing WebRTC from scratch using the basic API can be a tedious task, there are various libraries and frameworks available for use. These libraries hides away the software complexity, but to ensure WebRTC works for 100% of the users you would also need to setup a server of your own.

PeerJS (https://peerjs.com) is one such example, which makes it easier for you to get started.

Various companies provide you with the infrastructure and SDK needed to get started with real-time video, for example, Twilio. This takes away both the software and hardware complexity and makes it easier for you to implement and support a wide variety of users and devices.

In my case, we were already utilizing Twilio for the video call feature and it also let us publish more MediaStream if needed for a user.

This made sharing screen-share with other users a breeze, as all it required was to acquire the screen-share stream and then publish it on the connection for a user.

Twilio also has a sample app that you can refer to for understanding how to do the above.

https://github.com/twilio/twilio-video-app-react

Conclusion

This was just one example of what can be achieved using these 2 pieces of technologies: WebRTC & getDisplayMedia.

The possibilities are limitless.

For example, You can make a piece of software which records your webcam as well as your screen to make a coding tutorial with few lines of code right from your browser.

A small experiment I did was to find a way to only share a part of webpage. For this I wrapped the area which I wanted to share with a distinctive color border and on other users before showing the video stream I simply used image processing to crop the pieces outside of the border. This isn’t a very great solution and is extremely memory intensive to do it in JavaScript so I won’t recommend it.

Special shout-out to Punit Gupta for helping me with this article.

Thanks for reading.

Do share your thoughts and suggestions.

Originally published at nkaushik.in

Hello World!

Nishchay — Tue, 06 Oct 2026 15:50:21 +0000

Hi there👋, I’m Nishchay, an Engineer, I am currently exploring the world of AI and Self Hosting. This is my space to share my thoughts with you.

I have over ten years of experience in the software industry, where I have worked with various organizations in both B2C and B2B sectors.

Over the years, I have worked with many technologies and tools that fascinated me. I began my journey with PHP and have since built Native Android Apps and React Native Apps. I've also had the chance to work with Ruby on Rails, Golang, and Python. Additionally, I have hands-on experience in maintaining services and infrastructure on both Google Cloud (GCP) and AWS, as well as with Kubernetes (k8s).

I currently work in the JavaScript/TypeScript ecosystem, specializing in React.JS & Node.js.

I possess extensive expertise in the frontend domain, which I recently leveraged to build a comprehensive Performance Testing platform from the ground up. This project encompassed not only the frontend but also the backend and the data engineering aspects. I undertook this ambitious endeavor with a very small team, yet we successfully implemented the entire platform. It is now widely used throughout the organization and serves as a crucial guardrail for performance-related checks across the entire company. The platform's integration has significantly enhanced our ability to monitor and optimize performance, ensuring that all our systems operate efficiently and effectively. This achievement has not only streamlined our processes but also reinforced the importance of performance testing within our organizational framework.

I enjoy building things and trying out new ideas. I've been working to keep up with the rapid advancements in the Generative AI space.

Originally published at nkaushik.in

DEV Community: Nishchay

Migrating OG Image Generation from Satori to Takumi: 30%+ Faster Astro Builds

Why Migrate? The Hidden Cost of SSG Social Previews

The Satori Bottleneck

What is Takumi?

Satori vs. Takumi: Architecture Comparison

Step-by-Step Migration Guide

1. Install Dependencies

2. Add an Engine Switch to Centralized Config

3. Update the Dynamic OG Endpoint

4. Add Comparative Build Scripts to package.json

Real-World Performance Benchmarks

Build Time Comparison (Cold Cache, 160 Routes)

Why the Difference is Significant

Lessons Learned & Best Practices

Conclusion

How to Monitor Your Homelab with Beszel and Dozzle

Beszel vs Dozzle: What's the Difference?

Why Beszel and Dozzle?

Why Beszel is a self-hosting must-have

1. System metrics

2. Container metrics

3. S.M.A.R.T metrics

4. Real-time alerts

1. Setting up Beszel

Generic Docker Compose configuration

Explaining the configuration parameters

2. Setting up Dozzle

Generic Docker Compose configuration

3. Repurposing an old Android device as a node

Setting up the agent via Termux

Step 1: Install Termux

Step 2: Download the static ARM64 agent binary

Step 3: Run the agent

4. Testing and verification

Programmatic Video with Remotion: Building Videos in React with AI Skills

Remotion vs. traditional video editors: why code wins

The core mental model: how Remotion turns React into video

A simple 3-second animated title

Speeding up scene generation with Remotion AI skills & Gemini 3.7 Flash

Pairing with Gemini 3.7 Flash

Fast iteration with Remotion preview studio

Case study: building the Tambola Live promo video

1. Root Composition setup (Root.jsx)

2. Scene sequencing with transitions (PromoVideo.jsx)

3. Adding audio and synthetic sound effects without external files

Rendering to production MP4 from the CLI

See the game and video live in action

Final thoughts

AdGuard Home: Stop Ads & Trackers for Your Entire Family

Enter, AdGuard Home

Installation

What is DNS?

Setting Up AdGuard Home & Web Interface

Best AdGuard Home Blocklists (2026 Recommended)

Recommended DNS Settings & Upstream DNS

Upstream DNS Servers (Copy & Paste)

Optimal DNS Settings:

Can AdGuard Home Block YouTube Ads in 2026? (The Truth & Workarounds)

Effective Workarounds for YouTube Ads:

Deploying AdGuard Home to All Devices (Router Level)

Parental Controls & Service Scheduling

💬 Frequently Asked Questions (FAQ)

What are the best AdGuard Home blocklists to use in 2026?

Can AdGuard Home block YouTube ads?

What are the best upstream DNS servers for AdGuard Home?

Does AdGuard Home slow down internet connection speeds?

Related Homelab & Self-Hosting Guides

Top 4 ways to Run LLM locally on Android and iOS

Quick Comparison Matrix (2026 Tested)

1. Google AI Edge Gallery: The "One-Click" Starter

Demo

Models Available

Bundling your own model

2. PocketPal AI (Best for General Chat & Uncensored Models)

Running Uncensored Local LLMs on Android with PocketPal

3. AnythingLLM: The Researcher's Workspace

4. Termux + Ollama: The Power User Shortcut

Summary: Which one should you pick?

Related Local AI Guides

4. Add Comparative Build Scripts to `package.json`

1. Root Composition setup (`Root.jsx`)

2. Scene sequencing with transitions (`PromoVideo.jsx`)