The latest articles on DEV Community by Mathew Addala (@mathew777). https://dev.to/mathew777 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%2F3954870%2F168f0adc-7e9f-49ac-be70-5473fbd91b1b.png https://dev.to/mathew777 en Mathew Addala Sun, 07 Jun 2026 13:21:42 +0000 https://dev.to/mathew777/stikshot-a-stickman-video-renderer-towards-beyond-2h5k https://dev.to/mathew777/stikshot-a-stickman-video-renderer-towards-beyond-2h5k <p>Build a 100% Client-Side AI Motion Capture Engine in the Browser<br> Imagine uploading a dance video and having it instantly turned into a neon stickman animation—all without uploading a single megabyte to a server.</p> <p>That is stikshot, a local-first, serverless AI motion-capture web app. In this article, we'll dive into the architecture, the browser APIs we used, and the workarounds we engineered to make WebCodecs run stably on desktop and mobile.</p> <p>The Core Stack<br> To keep stikshot completely serverless, static, and scale-free, we built the entire pipeline to run inside the user's browser sandbox:</p> <p>AI Engine: TensorFlow.js running the MoveNet Multipose model.<br> Background Thread: Web Workers to keep the UI responsive.<br> Compression: The browser's native WebCodecs API (VideoEncoder and AudioEncoder).<br> Muxer: webm-muxer to compile the video/audio streams into a playable WebM file.<br> Architecture: Offscreen Pipelining<br> To prevent the browser from lagging, we split the application into two parts: a Main Thread Coordinator and a Web Worker Processor.</p> <p>Mermaid diagram<br> Code Highlights</p> <ol> <li>Seeking Background frames To avoid tab-throttling when users switch tabs, we avoided requestVideoFrameCallback and fell back to standard seeked media event listeners combined with a safe timeout fallback:</li> </ol> <p>javascript</p> <p>function seekTo(video, time) {<br> return new Promise((resolve) =&gt; {<br> const onSeeked = () =&gt; {<br> video.removeEventListener('seeked', onSeeked);<br> clearTimeout(fallback);<br> resolve();<br> };<br> const fallback = setTimeout(() =&gt; {<br> video.removeEventListener('seeked', onSeeked);<br> resolve();<br> }, 500); // 500ms timeout safety net<br> video.addEventListener('seeked', onSeeked);<br> video.currentTime = time;<br> });<br> }</p> <ol> <li>Safeguarding iOS Safari WebCodecs Crashes During development, we encountered a severe bug: Safari would crash/freeze when trying to write encoded video chunks.</li> </ol> <p>We discovered that Safari freezes the browser-provided metadata objects inside the VideoEncoder output callback. Modifying or passing them directly to the muxer throws a quiet error. We solved this by copying properties to an unfrozen, clean object:</p> <p>javascript</p> <p>const videoEncoder = new VideoEncoder({<br> output: (chunk, meta) =&gt; {<br> let cleanMeta = undefined;<br> if (meta) {<br> cleanMeta = {};<br> // Copy properties to bypass read-only/frozen constraints in Safari<br> if (meta.decoderConfig !== null &amp;&amp; meta.decoderConfig !== undefined) {<br> cleanMeta.decoderConfig = meta.decoderConfig;<br> }<br> if (meta.svc !== undefined) cleanMeta.svc = meta.svc;<br> if (meta.alphaSideData !== undefined) cleanMeta.alphaSideData = meta.alphaSideData;<br> }<br> state.muxer.addVideoChunk(chunk, cleanMeta);<br> },<br> error: (err) =&gt; console.error('Encoder error:', err)<br> });</p> <ol> <li>Avoiding Android Audio Hacks Android Chrome sometimes hangs indefinitely inside decodeAudioData on corrupted tracks. We implemented a promise-wrapped audio decoder with an 8-second safety timeout:</li> </ol> <p>javascript</p> <p>function decodeAudioWithTimeout(buffer, sampleRate = 48000, timeoutMs = 8000) {<br> const decodeCtx = new OfflineAudioContext(1, 1, sampleRate);<br> return new Promise((resolve) =&gt; {<br> let completed = false;<br> const timer = setTimeout(() =&gt; {<br> if (!completed) {<br> completed = true;<br> console.warn('Audio decoding timed out');<br> resolve(null);<br> }<br> }, timeoutMs);<br> decodeCtx.decodeAudioData(buffer, <br> (decoded) =&gt; {<br> if (!completed) { completed = true; clearTimeout(timer); resolve(decoded); }<br> },<br> (err) =&gt; {<br> if (!completed) { completed = true; clearTimeout(timer); resolve(null); }<br> }<br> );<br> });<br> }<br> What’s Next: Beyond the Stickman<br> stikshot is built to be serverless, meaning we don't pay for GPU rendering. However, generating 2D stickman animations is just step one.</p> <p>We are looking to expand this local-first pipeline to support:</p> <p>3D Skeletal Rigging: Converting joint coordinates to .gltf / .fbx formats.<br> Game Engine Exports: Allowing creators to export motion capture data directly to Unity or Unreal Engine.<br> VTuber Overlays: Creating browser-based camera inputs for real-time virtual avatar tracking.<br> Let's Collaborate!<br> If you are interested in local-first AI, WebAssembly, WebGL shaders, or browser motion tracking, check out the live app, leave a star, and get in touch:</p> <p>App: stikshot.com<br> Email: <a href="mailto:contact@stikshot.com">contact@stikshot.com</a><br> Instagram: @stikshotu</p> ai webdev design tensorflow Mathew Addala Wed, 27 May 2026 19:40:43 +0000 https://dev.to/mathew777/i-built-39-free-browser-based-dev-tools-heres-every-decision-i-made-and-why-51o3 https://dev.to/mathew777/i-built-39-free-browser-based-dev-tools-heres-every-decision-i-made-and-why-51o3 <p>I got tired of the same thing happening every day.</p> <p>Google "json formatter online." Land on a site from 2011. Click format. Get an ad popup. Format the JSON. Close the tab. Repeat tomorrow.</p> <p>So I built BuiltItDev — 39 developer tools that run entirely in your browser. No accounts. No paywalls. No data leaving your machine.</p> <p>Why client-side only?<br> You're pasting API keys, JWT tokens, internal JSON — that data shouldn't hit someone's backend.</p> <p>Everything processes locally. Hash generation uses the Web Crypto API. JWT decoding splits and base64-decodes in the browser. No network calls. Nothing logged.</p> <p>Stack<br> Next.js 16 App Router + TypeScript. 49 static routes, fully pre-rendered. Each tool is its own route (/tools/json-formatter, /tools/base64) so every page can rank independently on Google.</p> <p>Tools so far<br> Category Examples<br> Encoding Base64, URL encoder, HTML entity encoder<br> Formatting JSON formatter, Markdown previewer, XML formatter<br> Generators UUID, Lorem ipsum, Hash (MD5/SHA family)<br> Converters Color (HEX/RGB/HSL), Timestamp, Number base<br> Dev utils Regex tester, JWT decoder, Cron parser, Diff checker<br> 39 total. More shipping based on requests.</p> <p>What I want from you<br> What tool do you write as a throwaway script every few months because no clean browser version exists? Drop it in the comments — I'll build it.</p> <p>→ builtitdev.com</p> webdev programming javascript devtools