Learn how to build a video sharing Loom clone using Next.js and Mux.

Code: https://github.com/beaucarnes/screen-recorder

✏️ Course created by @beau 

Check out Mux: https://www.mux.com/

Mux provided a grant to make this course possible.

⭐️ Contents ⭐️
– 0:00:00 Course Introduction & Building a Loom Clone
– 0:00:13 Why Video is Hard: Encoding, Codecs, and Large Files
– 0:00:52 Understanding HLS & Adaptive Bitrate Streaming (ABR)
– 0:01:43 How Mux Solves Video Infrastructure
– 0:02:06 Project Roadmap: Features & AI Integration
– 0:02:45 Architecture: Server Relay vs. Direct Upload
– 0:03:25 The Direct Upload Flow Explained
– 0:04:06 Initializing the Next.js 15 Project
– 0:04:51 Installing Dependencies: Mux SDK & Lucide React
– 0:05:40 Setting Up Mux API Tokens & Permissions
– 0:06:55 Creating Server Actions for Mux Integration
– 0:08:23 Configuring Upload Settings & Asset Quality Tiers
– 0:10:44 Implementing Video Status Polling
– 0:12:17 Fetching & Parsing VTT Transcripts
– 0:16:10 Building the Screen Recorder Component
– 0:18:32 Capturing Screen & Mic via Browser APIs
– 0:20:37 Merging Media Streams for Combined Audio/Video
– 0:21:42 Handling Media Recording Chunks & Blobs
– 0:24:47 Implementing the Secure Direct Upload
– 0:30:29 Integrating the Mux Player React Component
– 0:32:15 Adding Share Links & Clipboard Functionality
– 0:34:20 Designing the Video Preview Page
– 0:37:25 Building the Video Thumbnail & Hover GIF Preview
– 0:41:07 Creating the Dashboard & Dynamic Rendering
– 0:45:12 Adding Automatic Video Watermarking
– 0:47:04 AI-Powered Summaries & Tags with Mux AI
– 0:54:43 Securing Content with Signed Playback URLs
– 1:00:49 Simulating User Authentication & Access Controls
– 1:03:17 Conclusion & Final Production Tips

❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp

🎉 Thanks to our Champion and Sponsor supporters:
👾 @omerhattapoglu1158
👾 @goddardtan
👾 @akihayashi6629
👾 @kikilogsin
👾 @anthonycampbell2148
👾 @tobymiller7790
👾 @rajibdassharma497
👾 @CloudVirtualizationEnthusiast
👾 @adilsoncarlosvianacarlos
👾 @martinmacchia1564
👾 @ulisesmoralez4160
👾 @_Oscar_
👾 @jedi-or-sith2728
👾 @justinhual1290

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

freeCodeCamp is a nonprofit organization offering free online coding courses and programming tutorials, covering topics such as web development, data science, and machine learning. Learners can gain practical coding skills, build real-world projects, and earn certifications to advance their careers in tech.

freeCodeCamp

A full walkthrough of building a Loom-style screen recording platform using Next.js 15 and Mux. Covers browser-based screen and microphone capture via the MediaRecorder API, direct uploads to Mux using signed URLs (bypassing server relay), HLS streaming, adaptive bitrate playback with Mux Player, AI-powered transcription via OpenAI Whisper, AI-generated video summaries and tags using the Mux AI library, animated thumbnail previews, video watermarking, and a dashboard for managing recordings. Also demonstrates how to implement signed JWT-based playback for private videos using Mux signing keys.

Build Your Own Video Sharing App – Loom Clone with Next.js and Mux JavaScript Tutorial