May 2024 Summaries

Video applications often generate numerous notifications, which can be overwhelming for users. To address this issue, Knock provides notification infrastructure that helps developers implement user-friendly notifications without building their own in-house system. By using Mux and Knock together, video app creators can build scalable, thoughtful, and battle-tested notifications. Knock's features include a standardized templating system, drag-and-drop workflow builder, code-level abstractions, custom components, and deep observability. With Knock, developers can create advanced notification workflows, real-time video notification feeds, and handle video subscriber notifications using webhooks.

In this blog post, the author demonstrates how to build a custom audio player using Tailwind CSS and Media Chrome, an open-source library that helps create media players with Web Components. The design is based on the tailwindui.com home page and includes features like SVG symbol maps, CSS custom properties, and container queries. The author walks through the HTML structure, adding icons from heroicons.com, and styling the audio player using Tailwind classes. They also discuss how to use Media Chrome themes for easy distribution across different players.

Mux has announced that its native libraries for Android and iOS are now generally available (GA). The company's beta announcement discussed the philosophy and plans for Mux Player. The new player is designed to be familiar to mobile developers, offering transparent integration with Mux Video and Mux Data, hassle-free caching, and simple APIs for secure playback and custom domains. It also serves as a drop-in replacement for existing players. The decision to create native players was driven by the need for better performance and user experience compared to web-based players. Native players consume less power and system resources, are simpler to integrate into native apps, and offer more features such as caching and content security features like Digital Rights Management (DRM). Mux Player for mobile is now available in version 1.0.0 with plans for additional features in the future.

The text discusses the challenges of building an in-house video solution versus using a vendor like Mux. It emphasizes that while starting with an open source solution is easy, scaling it can be incredibly hard. Three guiding principles are suggested to help customers evaluate their options: specialize and trade, use cases matter, and scale matters. The text also provides a detailed cost comparison between building an in-house video solution and using Mux for the same purpose. It concludes that while building an in-house solution may seem cheaper initially, the total cost of ownership over time can be significantly higher due to various factors such as feature development and maintenance, scaling and support costs, and public cloud & CDN costs.

Moving can be dreadful, but with Truckload, an open-source video migration framework built with Next.js, moving your video content between providers is made effortless. Engineers and creators often consider changing their video or audio content providers due to various reasons such as slow dashboards, spotty stream quality, incompatible pricing, or a frustrating developer experience. Truckload aims to fill this gap by offering tooling that makes migration from trusted video providers like Cloudflare Stream and Amazon S3 to Mux a no-brainer. The framework is open source, under an MIT license, and fully inspectable by the engineering team for transparency. It doesn't store any data related to your migration on its end, ensuring complete privacy. Truckload is available today on GitHub with complete instructions on how to run it locally and make your migration a cinch.

React 19 introduces new features such as Server Components, Actions, and other optimizations. Server Components allow developers to choose where their code runs, either on the server or client-side, improving performance for static content like marketing websites. Additionally, Server Components enable data fetching directly within components, reducing the need for framework-specific functions. The learning curve for these features can be steep, but they offer significant benefits once mastered. Actions simplify handling of asynchronous operations by providing isPending state and error handling automatically. Server Actions further streamline API endpoint creation by allowing developers to write them like regular functions. Overall, React 19's new features make it a powerful tool for enhancing communication between the server and client, improving productivity for web developers.

Uscreen, a membership platform, has evolved from being an OTT provider to incorporating more many-to-many functionalities. This includes allowing users to send videos to creators and other members of the community. The company is leveraging Mux's API for video uploading and processing, which allows end users to quickly record and share vertical format videos. Uscreen aims to foster a sense of community among its users by encouraging short video sessions from end users. They have observed that people who upload video content tend to write more copy below their videos compared to those who post text-only posts. This suggests that video is an effective way to engage users and build connections between creators and their audience. Uscreen's backend technology includes Flutter for apps, a monolith Ruby on Rails application, and server sent events for communication. They have also implemented auto-captioning, which has been well received by users and is expected to be further developed with automatic descriptions and titles based on caption files.

Mux Video has introduced an "Instant Clipping" feature that allows users to create accurately trimmed media from live streams or on-demand video assets without incurring additional encoding fees. This feature is built on a just-in-time (JIT) video processing architecture, which enables videos to be available almost immediately after upload. Instant clipping can be used for various workflows such as pre-live testing, post-live trimming, and highlight clips. The feature works by trimming the HLS manifests from live streams and VOD assets using Program Date Time (PDT) timestamps without re-encoding any segments.

React 19 has added full support for web components, a feature many developers have been eagerly awaiting. Web components allow developers to create reusable custom elements and use them across different frameworks or even without any framework at all. This addition is expected to improve the ergonomics of using web components in React applications by allowing event listeners as React props and enabling automatic setting of properties on the element. However, some challenges remain, such as the globally scoped element register, which may be unfamiliar to React developers. Overall, this development marks a step towards more framework-agnostic web application development, with potential benefits for all web application developers.

Protecting video content from theft involves understanding various attack vectors and implementing appropriate security measures. These include hotlinking/embedding, downloading, screen-recording software, and physical screen recording. To protect your videos, consider using signed URLs, referrer protection, user-agent filtering, encryption with ClearKey and HLSe, DRM solutions like FairPlay, Widevine, or PlayReady, and forensic watermarking. The choice of security measures depends on the content type, attacker motivation, and tradeoffs between development costs, maintenance, playback errors, and dollar expenses.