Capturing and Saving User Audio or Video with JavaScript 

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!

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.

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

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!

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

been looking for contents like this in awhile. Thanks man!. kudos! keep it up!

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

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

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!

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

Thank you Professor Steve, it helped me a lot!

Great voice, great accent. Thank you sir!

Excellent tutorial - very good job!

AMAZING tutorial. You are the man !!!

You explain extremely well

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

Very clean explaination, thank you!

Thank you so much! This was really helpful!

Hi, thank you so much for the clear video! I have run into one problem and I was hoping you could help point me to the right direction. When I convert the "chunks" array into a blob and then create the videoURL via "window.URL.createObjectURL(blob)", I set the src of the video element to videoURL. However, instead of playing the video i just recorded, the video element defaults back to the webcam stream. Any thoughts as to why this would be the case? Thank you in advance!

Thank you, you give really good explanations.

Thanks man! That's very helpful

Thank you very much, really helpful!

That was just amazing. Thank you so much.

thanks so much this finally worked for me

great stuff ... very much cool Steve !

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

Steve, you are the great best video

Steve, I get met with a "Media resource blob: . . . could not be decoded, error: Error Code: NS_ERROR_DOM_MEDIA_METADATA_ERR" when clicking on the "STOP RECORDING" button for playback in the second HTML audio element. Do you perhaps have any suggestions on how to resolve this error and/or workaround it?

You saved my life

Definitely will try this!

Thanks a lot by this tutorial!

so cool, great job

Hi Steve - Question if you don't mind. If sending a readableStream of a movie file through a pipe in node to the client browser which is then read through the resp.body.getReader and the value of each chunk is a Uint8Array. What is the best way to consolidate all of these Uint8Array chunks into 1 blob in order to create a createObjectURL in order to point the video src tag to createObjectURL href in order to stream. Hope that makes sense.

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

Amazing video!!!!

Thanks sir its really helpful

Very nice video, thank you!

Excelente vídeo, muito instrutivo

I am having this issue ,Uncaught DOMException: Failed to execute 'stop' on 'MediaRecorder': The MediaRecorder's state is 'inactive'. at HTMLButtonElement.

Hi Steve, can I ask you if it is possible to record multiple clips while keeping the older ones in the page? (so that you can choose the best one to download)

it's worked.thank you!!!!!

i have no words thank you

great lesson

Hello Sir, thank you for this very useful tutorial, but I do what you did step by step I passed all your code HTML and JS but nothing happens... the console display recording when clicking start and inactive when clicking stop but nothing happens and the recorded video doesn't appear in the second Tag why that? please help me! Sincerely.

Hi Steve, could you help me? I am working on making a web page where the user can produce sounds by touching certain keys on the keyboard, and I wanted to be able to give him the option to record the audio he generates. How can I do to record the audio that is being generated on the website specifically? I don't want it recorded from the PC microphone.

I've been reading about this for years. I'm missing something or there's absolutely no way to do this for iPhone users, is there?

great tutorial

Truly inspiration!

Hi Steve, Nice video and very clear steps. However I have a question around if we have a app based on vuejs, should we use this approach or vuejs libraries? What is your opinion on this?

Wow, great job. Im looking for something similar but the difference is that I need to record a window more specifically a Chrome Tab, do you think that can use the same approach that you use here?

Great Job!!

How would I be able to convert the JS to JSX for a react on rails project? Could the let variables be turned into const? And where in that code would I place the return/render? I am messing with it now, maybe I will figure it out on my own.

Very good tutorial, thanks! I'm wondering if its possible to change dinamically the video/audio source? I mean, if I have 2 webcams for example or 2 microphone, make a dropdown list with the enumerateDevices function and then change the source to display one or another webcam for example? Or that cant be done without reloading the webpage? Also, can I download directly the recording without displaying it and clicking "download"? Thank you!!

pure class man

Awesome, thanks a lot!

Steve Griffith I am using a MacBook. Eclipse/Tomcat. I have run your code and other examples across several browsers but the stream doesn't work. Access was granted to the camera. What do you think might be the problem?

Hi Steve. Thanks for the great video. It seems that on chrome a least, the mediaRecorder api limits recordings to around 2 mins. Do you know of any way to increase this time limit?

Hello steve, How would I be able to save the captured audio and video on the webpage itself as opposed to a file on the computer?Thanks.

Hey Steve! Great video. I am stuck with a problem in my application. I am trying to record a video using the webcam (WebRTC & Flask) and save it to a folder. While this works like a charm, I don't want the webcam feed to be displayed / streamed to the browser. Is it possible to just record the webcam feed and save it to the folder while disabling the browser display? Thanks!

Great video! what about the size limit of chunk? can I record for one hour? should filesystem-api of indexdb used to store a large size video mp4 file?

Thanks so much for this tutorial, it was just what I needed. I'm also trying to save the video to a database for my current project, what was the name of the video in which you mention sending the video to a server?

Is there any way that enumeratedevices method returns null even if device has camera. Need this for testing an application

Thanks for your video !

Hello Steve, so when I download the file, it does generate a name with .mp4 extension. But when i try to play that downloaded file (Im on a mac), quicktime (10.4) cannot play it. It tries to "convert" it and fails. First why does QT wants to convert it ? I mean I can open other .mp4 on my system without QT trying to convert it. Second, would you know how I can play the downloaded .mp4 in QT ? I've also tried with { 'type' : 'video/quicktime;' } and { 'type' : 'video/H264;' }..... none works...TTHHXX!!

Thank you so much.How do i show the time elapsed in progress bar after downloading the video.Please help

Thank you for your Video. On line 40 and several other lines you have {...} etc. etc. How did you put those dots in? Is it done with the IDE you're using? Thank you in advance.

my website is on squarespace and it looks like i can only install the javascript files I need to for videojs and record videojs one at a time. when i downloaded the zip while trying to understand how to put this functionality on my site, there are a ton of files in the zip. is there a way for me to enable my site visitors to capture a video and that video recording be saved into a google drive folder? because of the way squarespace is set up, i'm thinking I'm gonna need a 3rd party app to do all the work for me (aside from the fact that I dont know what I'm doing) otherwise every file needed would have to be linked in a really convoluted way through squarespace.

Hey can we save the recorded audio in similar way? I found no options for audio encoding in plain javascript

Thx for the video

Hi steve, will recording of audio only works on phone too? And is there a better way to do this on reactjs?

Hey, how can I build a plugin to ask desktop record permission? Just like zoom does to share screen in real time, and how to create a native app that lets reate layers to that video streaming in order to create pointers, vectors, annotations, etc? In general terms a guidance, not in detail, I just want to know where to start learning.

get tut!.... mobile browsers are my target... works on ios safari but it doesn't save...i think auto play on mobile browsers is not allowed and when you push play the video goes full screen and you can't hit record button... but i have a guess that ios won't allow you to save the blob in the browser like a laptop. Any thoughts on this?

Hey Steve, First off, great video! My question is... in the video you mentioned that in a later video you would get into how to send the saved video (Blob object I think) through to the server. Did you ever make a video explaining that? I've browsed through your video list but wasn't able to find anything. Thanks!

How to send a servletrequest from this html page to save the video in oracle, i mean where should i add so that i can save it in database, anyone please help me

Hello Sir, If we want to play "user uploaded mp3 file " while recording video and after recording a video, can video be played with that music? Please answer.i need your help

Hello! This video was amazing and informative. I was wondering if it is possible to have the recording played in the same frame as the one initially recording the video?

How can I have multiple streams in one Media Recorder instance(I want to record a web conference call)?

Hi Steve.... Excellent I am also working on something similar to this... I would like to send continous stream of audio to the python API for speech to text. I am calling the mediaRecorder.requestData() to get fire the ondataavailable event.... Can you please share your thoughts on this kind of approach to send the continous speech stream to API

Great video, very helpful! I just subscribed (: I built something similar and it is working, but there is no option to download the recorded video in my project. Which specific code was responsible for that?

Does anyone know if its possible to record system audio, not from another web browser nor from a microphone, but say from an application like Spotify?

Hi Steve! Great video, is there anyway that the audio could be sent to the owner of the website? or to a Google Drive or Dropbox account ? For interviews etc, thanks :)

Hey Steve, great tutorial! I have a project to build something similar to team viewer/Remote PC application. Any ideas using javascript or so? thank you

Is there any way to capture and record the system audio (not the input from the microphone)?

good job

Hi Steve, I have a video calling application where I want to record audio + screen share of each participant. How can I do that. Can we combine streams

Can you help me with an issues, as it's not working on iOS safari browser on device.also on Mac safari it's working as an experimental feature

Hey Steve, we implemented similar thing within our product, but we are stuck with Safari/Chrome on iOS, it doesnt work and there is no alternative we are aware of. Do you have any experience with iOS and MediaStream Recording API?

Man 10/10 Video

So will this work a hosted website abs a camera on your home net work.

Hello! First I want to say great video, because of this video I have recording up and running. However, I have encountered an audio bug that I was wondering if you ever dealt with. Whenever I enable audio and record a video, I am met with an ear piercing screeching sound along with the audio in the video. I don't believe it's my laptop, seeing as it is only a month old. Any feedback would be appreciated!

Hi, excellent tutorial! How can I make the audio work? If I set true, it makes a terrible noise on my laptop. How can I fix it? I think, the mediastream is going through the speaker, how do I disconnect it?

amazing

Hey,I want to record and save the streaming from a given url, how to do that?

How can we make it when we click download, to save it directly in a directory into the server ?

How can we use Mediarecorder to record HTML CANVAS ( animation ) element and download in High Quality video ?

Great video steve... Is it supported in mobile devices as well?

Is there anyway we can send these audio video incoming data directly to server and write it video file on server ?

Hey, great video.. really helpfull, thanks a ton. Just a query here, will this work for mobile devices as well?

Hey Steve, Watched this video and it has helped me a lot. I'm trying to create a web application for a photobooth project I'm working on, I was wondering if there was any way that once a user stopped recording the photo/video would save directly to a localhost file ready for rename/editing on the spot and how long it may take obviously dependant on the file size. I'm working with DSLR Cameras converted to webcams and think this would be a perfect workaround from the crappy software I'm currently using.

hello vrother I hope You see this, I have to use camera in my project , but the camera should be responsive to mobile size, i have been trying it,but the video either stretches, or is only half of the screen, help me,