guntis_dev
Joined 10 months ago
Joined 10 months ago
For comparison, here's how this example would look:
import { render } from "solid-js/web";
import { createSignal } from "solid-js";
function Counter() {
const [getCount, setCount] = createSignal(0);
return <button onClick={() => setCount(getCount() + 1)}>{getCount()}</button>;
}
render(() => <Counter />, document.getElementById("app"));Some truly open/royalty-free codecs you could use - video: VP8, VP9, AV1. audio: Opus, Vorbis, FLAC.
That said, building a VLC in the browser gets complicated quickly because of licensing - even if the decoder implementation is open source, some codecs have patent licensing requirements depending on jurisdiction and use case. For example, H.264's basic patents have mostly expired, but I'd verify the specific profiles you need.
I've explained the security reality to the business many times - any JavaScript sent to the client can be read, executed, proxied, or tampered with. That's just how browsers work.
The current directive is - make it as difficult to understand as reasonably possible. We're not trying to stop determined adversaries (that's impossible), but we can raise the bar high enough to deter script kiddies and casual attackers from easily abusing it.
Codec support: Built video and audio decoding in Wasm to bring codec support to browsers that didn't have it natively. Also helped with a custom video player to work around HLS latency issues on Safari.
Code sharing: We had business logic written in C that needed to run both frontend and backend. Compiled it to Wasm for the frontend, which guaranteed identical behaviour across environments.
Obfuscation: Currently exploring Wasm for "hiding" some JavaScript logic by rewriting critical parts in Rust and compiling to Wasm. We tried JS obfuscators (including paid ones), but they killed performance. Wasm gives us both obfuscation and better performance.
Also it was interesting programming journey to use their Monkey C programming language.
Though I suspect this won't last once LLMs start inserting ads and promoted content into responses.
For example this one is also ffmpeg wrapper, https://lorem.video and built for devs and QAs who just need a quick placeholder video without diving into ffmpeg syntax. It's optimized for that narrow use case to generate test video by typing a URL.
Nothing wrong with learning ffmpeg properly if you use it regularly, but purpose built tools have their place too.
The bundle sizes are also quite large compared to typical web frameworks, and you don't get progressive enhancement - it's all or nothing JavaScript.
Maybe things have improved in recent years, but I haven't seen much adoption or buzz around it.
After profiling, I found two bottlenecks: converting frames to RGB was happening on the CPU and was quite costly, so I rendered the decoded YUV frames directly on the GPU without conversion. Second, I moved all logic off the main thread since our heavy UI was competing for the same resources.
The main thread thing was that I was iterating through the frame buffer multiple times per second to select the appropriate frame for rendering. When heavy UI animations occurred, the main thread would block, causing the iteration to complete late - by then, the target frame's timestamp had passed, so it would get skipped and only the next frame would be drawn, creating visible stuttering.
function cancelablePromise() {
const promise = new Promise(resolve => setTimeout(resolve, 1000))
let cancel: () => void
const cancelPromise = new Promise((_, reject) => {
cancel = () => reject("promise canceled")
})
const wrappedPromise = Promise.race([promise, cancelPromise])
return {
promise: wrappedPromise,
cancel: cancel,
}
}One thing to note: if you ever want "install as app" functionality, you'd need to host them (even on GitHub Pages). File:// URLs don't support service workers, which means:
- Can't properly "Add to Home Screen" as a PWA
- Can't use Cache API for offline-first functionality
- Limited to localStorage (~5MB) instead of IndexedDB
- CORS restrictions prevent fetching from external APIs/CDNs
But if your tools work fine with localStorage and file:// access, no need to overcomplicate. The current approach is valid too.