|
Issue #546 • January 4, 2024
It's amazing how far the Web APIs have come and how much we can now do with just a little bit of JavaScript. One example of this is the Media Capture API, which allows you to capture part or all of a screen for things like streaming, recording, or sharing during a WebRTC conference.
I came across a simple example of this in this article by Nino Filiu, where he shows how to create a simple screen recorder using only 20 lines of JavaScript. You can check out that article or this demo for the full code. I'll show the main bits of it here, with some brief explanations.
In this case, the whole code gets triggered by a button click, but you could do it whatever way you want. The first part is as follows:
|
const media = await navigator.mediaDevices.getDisplayMedia();
const mediarecorder = new MediaRecorder(media);
mediarecorder.start();
|
The above example uses the await operator in conjunction with the .getDisplayMedia() method of the mediaDevices interface. A MediaRecorder() constructor is also used, after which the recording session is initiated using the .start() method.
The next bit of code uses the same media object from the previous bit to grab the video tracks, which is where the actual media stream takes place:
|
const [video] = media.getVideoTracks(); video.addEventListener("ended", () => {
mediarecorder.stop();
});
|
During the streaming process, the code listens for the "ended" event to trigger a stop to the recording process.
When you first trigger the recorder, you'll get a browser-based option box that will ask you what tab in the browser you want to start recording. In this simple example, there's also no option to change the size of the recording; it defaults to the full viewport.
While the recording is in process, you'll notice a "Sharing this tab..." indicator at the top of the viewport area. This is where you can stop the recording process, which will trigger the "ended" event shown above.
The final bit of code, which I took from Nino's article, is a neat little way to grab the file that's created when the stream/capture session ends:
|
mediarecorder.addEventListener("dataavailable", (e) => {
const link = document.createElement("a");
link.href = URL.createObjectURL(e.data);
link.download = "capture.webm";
link.click();
});
|
This creates an anchor (link) element that doesn't exist on the page but technically can still be manipulated. The link.click() method triggers a virtual "visit" to the link that's created, but since it has the "download" attribute present instead of a standard href, the file gets downloaded.
You can view my full CodePen demo here and, once again, full credit to Nino Filiu for the basic idea.
Now on to this week's tools!
|
CSS and HTML Tools
NinjaBootstrap — A meticulously crafted collection of SCSS utilities that configure and extend Bootstrap 5, to add the missing utility classes you really need in order to build great designs.
Templ — An HTML templating language for Go that has great developer tooling, to create components that render fragments of HTML and compose them to create screens, pages, documents, or apps.
EHTML — Meaning "Extended HTML", this is a set of custom elements that helps projects eliminate unnecessary JavaScript by providing custom solutions for some basic and routine tasks in your apps.
Build with the Power of Code — Without Writing Any — Take control of HTML, CSS, and JavaScript in a visual canvas. Webflow generates clean, semantic code that’s ready to publish or hand to developers. SPONSORED
Epic Easing — An interactive online tool to help you build and customize easing functions for CSS using cubic-bezier(), with options to export code as plain CSS, SCSS, Swift, and also Objective-C.
StyleX — Facebook's newly released CSS-in-JS solution, described as "a simple, easy-to-use JavaScript syntax and compiler for styling web apps."
 |
Emojiton — An AI-driven emoji search engine with a simple UI to quickly copy and paste emojis.
HTML, The Programming Language — This one made the rounds in late 2023, it's a practical, turing-complete, stack-based programming language based on HTML.
Buttons.cool — A repository of CSS buttons sourced from various creators on CodePen, with options to search by predefined tags, keywords, creator, or keyword. There's also a Tailwind-based button generator if you want to go custom.
Typeculator — A type scale generator based on an alternative approach to the popular modular or line-height based scales, using an approach called the "Golden thread" method.
|
| |
Media Tools (SVG, Video, etc.)
SVG.io — An AI-based text-to-SVG generator that lets you effortlessly convert your text prompts into stunning SVG images using advanced AI technology.
404 Illustrations — A small set of trendy, ready-to-use images in PNG format specifically designed for use in your 404 page.
Learn AI in 5 Minutes a Day — Learn how to save time and earn more with AI. Join 475,000+ free daily readers for trending tools, productivity boosting prompts, the latest news, and more. SPONSORED
StorySaver.net — An online tool that lets you entre an Instagram name so you can download videos from that person's Instagram stories and highlights in MP4 format.
SVGPS — An online tool to remove the burden of working with a cluster of SVG files by converting your icons into a single JSON file, for use in React, React Native, Preact, Vue, and Svelte.
archives.design — A digital archive of graphic design related items that are available on the Internet Archive (archive.org).
@twentyhq/favicon — An open-source API that lets you download or reference the favicon from any website, just add the website domain to the end of the URL.
OGL — A small, effective WebGL library aimed at developers who like minimal layers of abstraction, and are interested in creating their own shaders.
Rayna UI — A modern UI design system built in Figma that includes 500+ intuitive, adaptive, and customizable UI components.
|
The Uncategorizables
Open Source Software — A searchable directory of open-source alternatives to popular projects. You can filter by one of 50+ categories or search via popular project name.
aws-lite — A simple, extremely fast, extensible Node.js client for interacting with AWS services, with good error reporting.
Hemmelig.app — An online app that allows you to securely share a one-time use link for sharing a password, confidential message, or other form of private data.
DevResume — A free web-based resume editor that's editable via YAML, with real-time preview and PDF export.
front.tips — A categorized resource that contains video quick tips on various front-end technologies and techniques (HTML, CSS, JS, VS Code, Debugging, etc).
Learn AI in 5 Minutes a Day — Learn how to save time and earn more with AI. Join 475,000+ free daily readers for trending tools, productivity boosting prompts, the latest news, and more. SPONSORED
River — Atomic, transaction-safe, and robust job queuing for Go applications, backed by PostgreSQL and built to scale.
Dwarf — A relaxed domain name marketplace for domain hoarders where you can buy and sell domains, with 5% of the fee charged to the seller.
ILLA Cloud — A robust, open-source low-code platform for developers to build internal tools using a library of components and actions.
Loro — A Rust-based developer toolkit designed for building local-first software applications with real-time collaboration, offline editing, built-in version control, and more.
|
|
Commercial Apps and Classifieds
FireCut – An Adobe Premiere Pro extension for editing silence, captions, zooms, chapters, etc.
|
|
Bytes – A JavaScript newsletter that's informative & entertaining, for all levels of JS devs. AD
|
Remini – An AI-based photo and video enhancer to convert low resolution media to HD, etc.
|
|
Passage – Passwordless auth by 1Password, for a simpler and more secure sign-in experience.
|
JavaScript E-Books – 250+ tips, tricks, and little-known facts, with lots of live code demos. AD
|
|
qdorks – An advanced Google query composer to enhance your search experience.
|
CodeBit – A platform to create videos of customized coding stories for sharing on social media, etc.
|
|
|
An X Post for Thought
Is this a controversial statement? I feel like there still is good use for HTML's <br> element and while it should be used very sparingly, it's often the simplest way to do what it does: break to the next line.
Send Me Your Tools!
Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
I never thought Pac-Man could be reinvented, but this game called Paku Paku comes pretty close. It's referred to as "1D Pac-Man". And if you're interested, the Hacker News thread on it has some contributed scripts that allow you to run the game by itself.
Thanks to everyone for subscribing and reading!
Keep tooling,
Louis
@LouisLazaris
PayPal.me/WebToolsWeekly
|
|
