Recording Videos Using JavaScript And Browser APIs

Learn how to record videos using the MediaStream Recording API. 🔴 Patreon: https://www.patreon.com/joyofcode 𝕏 Twitter: https://twitter.com/joyofcodedev 💬 Discord: https://discord.com/invite/k6ZpwAKwwZ 🔥 Uses: https://www.joyofcode.xyz/uses 🔗 Animotion: https://animotion.pages.dev/ 🔗 MP4 File Format: https://en.wikipedia.org/wiki/MP4_file_format 🔗 YouTube Recommended Upload Encoding Settings: https://support.google.com/youtube/answer/1722171 🔗 Media Type And Format Guide: https://developer.mozilla.org/en-US/docs/Web/Media/Formats 🔗 Codecs In Common Media Types: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/codecs_parameter 🔗 MediaStream Recording API: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API 🔗 MediaStream: https://developer.mozilla.org/en-US/docs/Web/API/MediaStream 🔗 Media Recorder: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder 🔖 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