Capturing and Saving User Audio or Video with JavaScript

If you want to access the microphone and webcam on the user's laptop or phone then the getUserMedia method from the MediaStream API is what you need.
This video talks about how to access the camera and microphone as well as how you can record and save the data that you capture.

An alternative not covered here is saving screenshots from video onto an HTML Canvas element and then saving that in an image element or form input element.

[Sindoku]

This is the coolest stuff ever I have been searching for more about dealing with media both audio and video. I'd like to build a streaming service that simply let's you talk with other users and even group video chats, but it's felt like this knowledge was too hard to come by for me to get started. You have the clearest voice and most accurate and concise explanations I have ever seen. I am relatively new to programming, I've only been doing it for about a year and I have been self-taught this whole time; however I have just joined Lambda School 6 weeks ago, and as I was going over some of the challenges, and I came across your videos which I used for extra practice and even more clarity and understanding than what I was being taught at Lambda school, and I have to say that I do believe Lambda school is one of the best computer science + web development schools in the world, so you are really, really good for me to say that you're better than they are at teaching, and I have fallen in love with the way you explain things. Thank you thank you for sharing your knowledge with plebs like myself.

[zachbaird]

As someone getting up to speed on this for an application at work, you have provided an excellent description on how this stuff works and how to work with it. Thanks a lot Steve, I'll be looking at more of your content in the future!

[zuful]

I tried several tutorials about this API, non of them worked, I was about to give up and try another solution when I found your video. Everything works fine so thanks a lot sir!

[RobertWildling]

Thank you for this tutorial! 4 years after making it it is still of great use!

(Just a little observation: If audio is set to false and the site is opened for the first time, no permission will be given regarding the audio. That also means, that no audio device (like headphones) will be listed. In your video, however, there is info in AUDIOINPUT and AUDIOOUTPUT, which means you previously gave permission to use audio. That confused me initially, because my AUDIOINPUT and AUDIOOUTPUT where empty and I thought my headphones are not recognised and started doing research. But all I had to do was setting "audio: true", reload the page, give permission to use audio – and voilá! All the info is there.)

[amycross]

You are a genius when It comes to teaching. Best tutorial ever!

[AndyRocket]

Your toturials are really good. I built the program and feel happy about it. Now i cant waith to make my own filters and send it places! Make video calls with crazy custom filters😛Thanx🙌🏻

[nitishkhagwal]

This is still so useful in 2024, thanks the OG 🧡🧡

[hzqnf]

Excellent tutorial. Look forward to implementing a lot of what you have presented.

[kevinflorenzdaus]

been looking for contents like this in awhile.

Thanks man!.
kudos! keep it up!

[odyo]

Great concept explanation, clean audio ! Direct to the point ! You have excelent teaching skills ! Thank you !

[codefoxx]

Just what I was looking for. I listen to a local radio station that plays reggae on Mondays from 12pm to 3pm. They happen to have a website where you can listen as well. I am going to create a bot that clicks the play button on the website (while I am not home) and then activate the code you showed in this video to record the three hour session. Lets see if I can put it all together. Should be fun

[ВасилисКарапас]

I've always been curious how webcam websites operated. I'm still a beginner at this, so maybe I should start by just connecting to my laptop camera :D . Anyway, awesome video! Can't wait to see your other tutorials!

[akashchatterjee]

Thanks man... Thank you very much best wishes for you... This is the most elborative video about this topic... Please make this kind of videos.. You don't know what a big help this video was... Once again Thank you

[nilmendes]

Thank you Professor Steve, it helped me a lot!

[Abrahhhhh]

Thank you very much Steve for this project I thank you my friend

[basselturky]

That was just amazing.
Thank you so much.

[shivamshekhar]

Thank you so much! This was really helpful!

[jaden-wi]

thanks so much this finally worked for me

[esabisseh]

Thank you, you give really good explanations.

[albertnaa]

Words cannot express how helpful this video has been to me. I built my school project work based on the insights this video gave me on RTC. Getting to the end of this video, you mentioned doing a video on how to send the video to a web server. I have been searching your channel for it all day but cannot find. Can you help me find that video? Thank you very much