Recording Videos Using JavaScript And Browser APIs

Опубликовано: 24 Июль 2026
на канале: Joy of Code

7,424

274

Learn how to record videos using the MediaStream Recording API.

🔴 Patreon:   / joyofcode
𝕏 Twitter:   / joyofcodedev
💬 Discord:   / discord
🔥 Uses: https://www.joyofcode.xyz/uses

🔗 Animotion: https://animotion.pages.dev/
🔗 MP4 File Format: https://en.wikipedia.org/wiki/MP4_fil...
🔗 YouTube Recommended Upload Encoding Settings: https://support.google.com/youtube/an...
🔗 Media Type And Format Guide: https://developer.mozilla.org/en-US/d...
🔗 Codecs In Common Media Types: https://developer.mozilla.org/en-US/d...
🔗 MediaStream Recording API: https://developer.mozilla.org/en-US/d...
🔗 MediaStream: https://developer.mozilla.org/en-US/d...
🔗 Media Recorder: https://developer.mozilla.org/en-US/d...

🔖 Timestamps

0:00 Intro
1:33 Sponsor
1:49 How Does Video Work?
2:05 Codecs And Containers
2:28 Video Format History
3:00 Common Codecs Used On The Web
4:15 YouTube Recommended Encoding Settings
4:43 Video Quality Factors
6:52 Steps For Recording Video On The Web
7:24 Creating The Recorder
12:26 Video Options
14:12 Asking The User For Permission
17:18 Recording The Video Stream
19:49 Downloading The Video
21:32 Creating The Countdown
23:20 Handling Keyboard Events
24:46 How To Properly Stop Recording
26:53 Outro

#joyofcode #sveltekit #svelte