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/enUS/d...
Codecs In Common Media Types: https://developer.mozilla.org/enUS/d...
MediaStream Recording API: https://developer.mozilla.org/enUS/d...
MediaStream: https://developer.mozilla.org/enUS/d...
Media Recorder: https://developer.mozilla.org/enUS/d...

Timestamps

0:00 Intro
1:33 Ad
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