

In my opinion, it’s pretty straightforward using built-in functions without the need for any other third-party API.

In this post, I’ve given a small example of recording and downloading a Video using plain Javascript API. const initMediaStream = async () => Conclusion

I will handle exceptions at the caller and don't need to worry about it here. If user doesn't allow it, the code will throw an exception. The browser may ask user to gain permission before returning a stream. The initMediaStream function will request video and audio from user devices follow our spec in the constraints object. In this sample, I request a stream contains video and audio from user’s device. The first part is to initialize a MediaStream. The main workflow for the app is: initialize media stream > record media stream to blobs > combine recorded blobs into single video blob > play or download video > clean up. I’ve put the code to an example using ReactJS at my GitHub repos, but you can freely integrate the snippets on any Javascript Framework as your favorite. The code will support most of the major browsers (Chrome, Firefox, Opera, Edge) except Safari. This post will introduce a simple example of recording Video and Audio via your browsers, then play it back or download it to your local drive. But things had changed in the past few years when WebRTC was introduced as an open standard for browsers and mobile devices, software developers can easily use its APIs without the need for advanced Media knowledge. Do you wonder how difficult a website needs to do to support video? It was tough for companies to bring Media technologies to their tech product since it required knowledge from both Media and Software development. Videos have become very popular in our daily activities on the internet.
