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 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

Joy of Code

Learn how to record MP4 videos directly in the browser using JavaScript and the MediaRecorder API. The guide provides a detailed walkthrough, showcasing how to obtain user permissions, handle media streams, and manage video codecs and containers. Key points include setting up a countdown for recording, utilizing the MediaRecorder API, and understanding video fundamentals for better implementation.

Recording Videos Using JavaScript And Browser APIs

<p>Brother I want a project that pushes pre-recorded video using rtmp on Youtube: Streamyard</p>
