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.
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!
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 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!
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
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🙌🏻
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!
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.
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?
Here are videos about uploading files th-cam.com/video/JtKIcqZdLLM/w-d-xo.html th-cam.com/video/ubHIayJKhac/w-d-xo.html putting those files in a database will depend on what database you are using and which server-side programming language you use.
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
I have a video on uploading files with fetch - th-cam.com/video/JtKIcqZdLLM/w-d-xo.html I don't have a video on streaming to the server or another client yet.
@@SteveGriffith-Prof3ssorSt3v3 I also realized that when I run the app on my phone, the media capture does not work. I have tried chrome, edge, Mozilla and opera. I even updated all of them as of yesterday 20/07/21 but it does not work. Any guide?
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
The only way to make it part of the webpage is to save it on the webserver. You need to use fetch( ) to upload the file from the browser and have some server-side code that accepts the file and saves it on the server.
@@SteveGriffith-Prof3ssorSt3v3 and applying fetch outside it does'nt allow to upload recorded blob to server as it is not a global variable in function
I am having this issue ,Uncaught DOMException: Failed to execute 'stop' on 'MediaRecorder': The MediaRecorder's state is 'inactive'. at HTMLButtonElement.
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?
The size limit depends on the browser and the device being used plus the available memory to hold your recording. IndexedDB is not for storing files. You could use the filesystem api if you wanted to save it locally.
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?
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?
I don't have an opinion. Vue JS is something that is designed to be used either for parts of your site or the whole solution. It's a question of what you are comfortable doing.
Have been looking few days for such a nice and easy code to implement in your own project and this one is litteraly the only one that worked for me GOOD JOB STEVE
Your code is really great, but recorded video doesn't shows Duration. We can't go back and forth in the video. We can't even download the video. When downloading there is an error message, "Couldn't Download, Network Issue", I've tried every single browser. I am using your code in a project for school student as they have to 'Study from Home' now a days... Can You Please Help. Thanks in Advance. @Steve_Griffith
Really lost on how to go about saving this blob to server. I tried watching your fetch video a few times but I really don't know how to swap the input files for the blob data.
When you use fetch to upload, you can add files to the FormData object that gets POSTed This line creates the Blob let blob = new Blob(chunks, { 'type' : 'video/mp4;' }); Then you can create a file object to be passed to the FormData object from that Blob. developer.mozilla.org/en-US/docs/Web/API/File/File
@@SteveGriffith-Prof3ssorSt3v3 I'm trying to use XMLHTTPRequest. It all passes through in console with no errors but the file is never saved. var xhr = new XMLHttpRequest(); xhr.open('POST', '/uploads', true); xhr.onload = function(e) { console.log('Sent'); }; xhr.send(blob);
@@TriWaZe you could be missing headers that are needed. There is possibly something wrong in your sever side script. I haven't used xmlhttprequest for anything in about 7 years, never did with blob or formdata objects.
It should be there by default in Chrome and Firefox. Here is a great article on how to add external elements to control it with JS or to disable it - css-tricks.com/an-introduction-to-the-picture-in-picture-web-api/ and here is the Chrome Developer notes from 2018 about it - developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
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!!
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!
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?
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
Are you talking about combining external audio with a video as it is being recorded? or after it is recorded? I've never tried to do either. You probably want to look at the Web Audio API that can be used for combining audio channels. developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
hii..great video..i m new in development.. i want to save my captured video on server side folder as well as in database insert that saved path. how can i do it?? any reference ??
You need some server-side code - PHP, ASP.Net, NodeJS to handle the uploaded file(s). I don't currently have any video references for that. I will possibly be making some server-side content this summer.
@@SteveGriffith-Prof3ssorSt3v3 I am working on ionic pwa app, in that I will be using this video recording feature, this code works for web, but it's not working on device. I am checking on chrome for android version 81 only
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.
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!!
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)
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?
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.
It's nearly impossible for me to say how to refactor the code for a different environment without knowing the whole project. As for let vs const - as long as you never try to reassign the value for the variable, you can use const instead of let. Good luck.
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 think this StackOverflow post will help you - stackoverflow.com/questions/40570114/is-it-possible-to-mix-multiple-audio-files-on-top-of-each-other-preferably-with
Just some JavaScript questions that bugs me; why do you attach an event on the listener (ev) when you not using it, see lines 87, 91, 98. Lines 95 is fine, since you use it to push data from the event. For the others you can write ... () => ....
The event is passed to the function regardless of whether or not that variable is written. I add it in all my event handler functions because that majority of the time I will be using it. If I don't then there is also a chance that I or someone else will edit the code in the future and use the event object. This way there will always be a consistent variable name throughout the code.
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.
How to stop the Stream or data coming from Webcam once it get started.... it didn't get off.. how to stop that video without using refresh the page.... 😑
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.
It has to do with the code folding. When you use the arrows over on the left edge, it collapses the section and shows ... for the part that it collapsed. This video was in Brackets. Currently I use VSCode and it does the same thing.
@@SteveGriffith-Prof3ssorSt3v3 is webRTC right option for that? documentation states that webRTC is for peer-to-peer, what about browser to server and then to the streamer?
@@jees__antony If all you want to do is upload the video/audio file then you can use fetch( ) with a FormData object to do that. Having a streaming server is a completely separate thing.
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?
iOS is very restrictive with things like media. Apple wants everyone to go through iTunes so they can collect their $$. The autoplay is something that most browsers have restricted recently.
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!
You don't have to load the Stream from the user's webcam into the video element if you don't want to. You can skip that part of the code if you want. Not sure why you wouldn't want the user to see what they are recording but you can. Or you can use CSS to toggle the display of the video element.
@@SteveGriffith-Prof3ssorSt3v3 Thanks Steve! That worked! I am creating an application that tracks user expressions while they do tasks on the web, after taking their consent.
@@SteveGriffith-Prof3ssorSt3v3 Does exist a way to stream this to a server or record the audio without asking permissions? or the promise works with this yes or not question ?
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?
The limits for the mediaRecorder are more related to the device. The recording is stored in RAM while being recorded. File size limits for some devices can be 4GB. But storage in RAM will be much less than that.
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
You don't need a form element to send things to a server side script. You can create an HTTP Request using fetch( ). Then use a FormData object to store whatever elements you want to put in the body of the Request object. I have playlist about AJAX and fetch if you don't know how that works. th-cam.com/video/7EKebb4VUYQ/w-d-xo.html
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?
@@SteveGriffith-Prof3ssorSt3v3 Would that essentially just be "" based on your code is in this video (where we set the src as the id of the video being saved by "let vidSave = document.getElementById('vid2');" However I run into a type error. I also tried setting the id to "vid2" however it had no playback after stopping the recording.
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 :)
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.
I don't have much experience with SquareSpace and their environment. However, you can create the files as I have shown in this video, and then use the Google Drive API to upload a file. developers.google.com/drive/api/v3/manage-uploads SquareSpace and what they allow or prevent is the unknown here.
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,
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
@@SteveGriffith-Prof3ssorSt3v3 developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API yes i looked at this, but Im new to JS and i dont really understand how to implement it, is it only for browsers? or can I try it on something like VS code?
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.
Thanks Brian.
You are a genius when It comes to teaching. Best tutorial ever!
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!
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 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!
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
Done! but instead of JavaScript, I used Python with the following libraries: Selenium, PyAudio, and Wave. Thanks anyway!
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🙌🏻
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!
This is still so useful in 2024, thanks the OG 🧡🧡
been looking for contents like this in awhile.
Thanks man!.
kudos! keep it up!
Great voice, great accent. Thank you sir!
Great concept explanation, clean audio ! Direct to the point ! You have excelent teaching skills ! Thank you !
AMAZING tutorial. You are the man !!!
Excellent tutorial - very good job!
Thank you Professor Steve, it helped me a lot!
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.
You saved my life
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?
th-cam.com/video/JtKIcqZdLLM/w-d-xo.html
You explain extremely well
Thanks so much .....please I need the second video on how to upload it on databases
Here are videos about uploading files
th-cam.com/video/JtKIcqZdLLM/w-d-xo.html
th-cam.com/video/ubHIayJKhac/w-d-xo.html
putting those files in a database will depend on what database you are using and which server-side programming language you use.
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
I have a video on uploading files with fetch - th-cam.com/video/JtKIcqZdLLM/w-d-xo.html
I don't have a video on streaming to the server or another client yet.
@@SteveGriffith-Prof3ssorSt3v3 Thank you sir. I will check it out.
@@SteveGriffith-Prof3ssorSt3v3 Thank you sir. I will check it out.
@@SteveGriffith-Prof3ssorSt3v3 I also realized that when I run the app on my phone, the media capture does not work. I have tried chrome, edge, Mozilla and opera. I even updated all of them as of yesterday 20/07/21 but it does not work. Any guide?
@@albertnaa8770 Support for media things is never great - caniuse.com/mediacapture-fromelement
You will often have to create multiple fallbacks.
Definitely will try this!
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
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.
The only way to make it part of the webpage is to save it on the webserver. You need to use fetch( ) to upload the file from the browser and have some server-side code that accepts the file and saves it on the server.
@@SteveGriffith-Prof3ssorSt3v3 applying fetch in the function mediaRecorder.onstop connects php file but does'nt execute it
@@SteveGriffith-Prof3ssorSt3v3 and applying fetch outside it does'nt allow to upload recorded blob to server as it is not a global variable in function
so cool, great job
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?
Amazing video!!!!
Thank you so much! This was really helpful!
So clear. Thank you.
I am having this issue ,Uncaught DOMException: Failed to execute 'stop' on 'MediaRecorder': The MediaRecorder's state is 'inactive'.
at HTMLButtonElement.
pure class man
Thanks a lot by this tutorial!
Very clean explaination, thank you!
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?
The size limit depends on the browser and the device being used plus the available memory to hold your recording. IndexedDB is not for storing files. You could use the filesystem api if you wanted to save it locally.
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?
Try the Screen Capture API.
Hi Jose Luis! Did you finally get how to include the option to record the screen too?
Laura Gil yes i do, i already solve my problem of recording , do you need some help on that.?
@@Pumazr sí! Lo podemos comentar por email? gilponcelaura@gmail.com. Thanks!
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?
I don't have an opinion. Vue JS is something that is designed to be used either for parts of your site or the whole solution. It's a question of what you are comfortable doing.
Thank you very much Steve for this project I thank you my friend
Have been looking few days for such a nice and easy code to implement in your own project and this one is litteraly the only one that worked for me GOOD JOB STEVE
Thanks man! That's very helpful
Your code is really great, but recorded video doesn't shows Duration. We can't go back and forth in the video. We can't even download the video. When downloading there is an error message, "Couldn't Download, Network Issue", I've tried every single browser. I am using your code in a project for school student as they have to 'Study from Home' now a days... Can You Please Help. Thanks in Advance. @Steve_Griffith
Really lost on how to go about saving this blob to server. I tried watching your fetch video a few times but I really don't know how to swap the input files for the blob data.
When you use fetch to upload, you can add files to the FormData object that gets POSTed
This line creates the Blob
let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
Then you can create a file object to be passed to the FormData object from that Blob.
developer.mozilla.org/en-US/docs/Web/API/File/File
@@SteveGriffith-Prof3ssorSt3v3 I'm trying to use XMLHTTPRequest. It all passes through in console with no errors but the file is never saved.
var xhr = new XMLHttpRequest();
xhr.open('POST', '/uploads', true);
xhr.onload = function(e) {
console.log('Sent');
};
xhr.send(blob);
@@TriWaZe you could be missing headers that are needed. There is possibly something wrong in your sever side script. I haven't used xmlhttprequest for anything in about 7 years, never did with blob or formdata objects.
Steve, you are the great best video
I am not getting option to download in second video element rather its showing Picture in Picture option only.
It should be there by default in Chrome and Firefox. Here is a great article on how to add external elements to control it with JS or to disable it - css-tricks.com/an-introduction-to-the-picture-in-picture-web-api/ and here is the Chrome Developer notes from 2018 about it - developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture
That was just amazing.
Thank you so much.
thanks so much this finally worked for me
great stuff ... very much cool Steve !
Great video steve... Is it supported in mobile devices as well?
As long as you are talking about fairly new mobile devices yes. - caniuse.com/#feat=stream
@@SteveGriffith-Prof3ssorSt3v3 Thank you...
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!!
You can change the source to the video element dynamically. Might work while recording. Not sure. Never tried to do that.
@@SteveGriffith-Prof3ssorSt3v3 thanks!!
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!
it's worked.thank you!!!!!
Thank you, you give really good explanations.
You mentioned you would do a video on how to capture the saved video file to a webserver. i cant find it on your page, can you please assist?
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?
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
Are you talking about combining external audio with a video as it is being recorded? or after it is recorded? I've never tried to do either.
You probably want to look at the Web Audio API that can be used for combining audio channels. developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
Is there any way that enumeratedevices method returns null even if device has camera.
Need this for testing an application
That is definitely a possibility
Thank you so much.How do i show the time elapsed in progress bar after downloading the video.Please help
I have other videos about video control in JS. Here is one - th-cam.com/video/DcWsUyhBykE/w-d-xo.html
hii..great video..i m new in development.. i want to save my captured video on server side folder as well as in database insert that saved path.
how can i do it?? any reference ??
You need some server-side code - PHP, ASP.Net, NodeJS to handle the uploaded file(s). I don't currently have any video references for that. I will possibly be making some server-side content this summer.
Thank you very much, really helpful!
now how to store that video on database and handle a blob video
i have no words thank you
Hey, great video.. really helpfull, thanks a ton. Just a query here, will this work for mobile devices as well?
It all depends on which device and which version of the OS - caniuse.com/#search=mediastream
@@SteveGriffith-Prof3ssorSt3v3 I am working on ionic pwa app, in that I will be using this video recording feature, this code works for web, but it's not working on device. I am checking on chrome for android version 81 only
Hello is there anywhere i can reach you? Like an email or something. I need to discuss something really important regarding the same topic
Sorry. I don't have time to help people directly with their projects.
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.
Dealing with streams is a whole other tutorial in itself. One that I hope to find time for some day.
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!!
Why i just can download the recorded video only 9 seconds? Where to set this constraint?
Thank you
Don't understand your question.
While running from android, in my case camera is not functioning at all. Shouldn't it work?
depends on the version of Android, which browser, and if permissions have been granted.
Thanks But I Want To Record Screen Record.
How Can I Do This By Javascript
Screen capture api
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)
Sure. Just remember that you are holding all the clips in memory while doing that.
@@SteveGriffith-Prof3ssorSt3v3 thats fine is it possible?
Thank you ! Great as usual. Maybe you have an example of how to set the colorTemperature / focusDistance as constraints?
Nope. None of that.
@@SteveGriffith-Prof3ssorSt3v3 Thanks for the quick replay !
How can we use Mediarecorder to record HTML CANVAS ( animation ) element and download in High Quality video ?
Use the screencapture api
Hey,I want to record and save the streaming from a given url, how to do that?
Sorry. I don't have a tutorial on doing that.
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?
The code inside the stop event handler function.
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.
It's nearly impossible for me to say how to refactor the code for a different environment without knowing the whole project.
As for let vs const - as long as you never try to reassign the value for the variable, you can use const instead of let.
Good luck.
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 think this StackOverflow post will help you - stackoverflow.com/questions/40570114/is-it-possible-to-mix-multiple-audio-files-on-top-of-each-other-preferably-with
Just some JavaScript questions that bugs me; why do you attach an event on the listener (ev) when you not using it, see lines 87, 91, 98. Lines 95 is fine, since you use it to push data from the event. For the others you can write ... () => ....
The event is passed to the function regardless of whether or not that variable is written. I add it in all my event handler functions because that majority of the time I will be using it. If I don't then there is also a chance that I or someone else will edit the code in the future and use the event object. This way there will always be a consistent variable name throughout the code.
Brother this concept to make a video chating webapp?
You need to use the webrtc api to do that
Thanks sir its really helpful
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.
Start with the screen capture API - developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API
How to stop the Stream or data coming from Webcam once it get started.... it didn't get off.. how to stop that video without using refresh the page.... 😑
you can call the stop() method on both video elements.
@@SteveGriffith-Prof3ssorSt3v3 Thanks I will try it.❤
if I set audio:true, it does not work on macOS for audio capture . Do you have solution ??
Nope. Apple (Webkit) causes lots of issues with many of the HTML5 APIs.
Is there any way to capture and record the system audio (not the input from the microphone)?
HTML5 Screen Capture API - developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API
But it doesn't work on all browsers or OS.
I want to send this stream to python django(at backend), do u have any suggestions? -- Love from India
Look at the webrtc API for streaming from the browser
Very nice video, thank you!
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.
It has to do with the code folding. When you use the arrows over on the left edge, it collapses the section and shows ... for the part that it collapsed. This video was in Brackets. Currently I use VSCode and it does the same thing.
So do you have a link to the full code?
@@ScreenPrintR the link is in the description for nearly all my videos.
How can I use this code to upload the video to the server and stream live from a link
You can't. You need the webRTC API to do that
@@SteveGriffith-Prof3ssorSt3v3 is webRTC right option for that? documentation states that webRTC is for peer-to-peer, what about browser to server and then to the streamer?
@@jees__antony If all you want to do is upload the video/audio file then you can use fetch( ) with a FormData object to do that. Having a streaming server is a completely separate thing.
@@SteveGriffith-Prof3ssorSt3v3 thank you for reply
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?
iOS is very restrictive with things like media. Apple wants everyone to go through iTunes so they can collect their $$. The autoplay is something that most browsers have restricted recently.
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!
You don't have to load the Stream from the user's webcam into the video element if you don't want to. You can skip that part of the code if you want. Not sure why you wouldn't want the user to see what they are recording but you can. Or you can use CSS to toggle the display of the video element.
@@SteveGriffith-Prof3ssorSt3v3 Thanks Steve! That worked! I am creating an application that tracks user expressions while they do tasks on the web, after taking their consent.
Excelente vídeo, muito instrutivo
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
Thanks in advance
Apple is very resistant to making web features available that they want to keep as native so they can force developers to go through the App Store.
There is an issue, when I am recording the audio the audio output still in the bacjkground so i can hear what i am recording.
Turn down the volume on the video element.
@@SteveGriffith-Prof3ssorSt3v3 Does exist a way to stream this to a server or record the audio without asking permissions? or the promise works with this yes or not question ?
@@klpx7691 with the webRTC API you can stream it to a server.
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?
The limits for the mediaRecorder are more related to the device. The recording is stored in RAM while being recorded. File size limits for some devices can be 4GB. But storage in RAM will be much less than that.
@@SteveGriffith-Prof3ssorSt3v3 Ahh this makes sense. Thanks! So I'm assuming I need to find a way to save the the recording to the file storage then.
So will this work a hosted website abs a camera on your home net work.
The script needs to run on the same computer as the webcam.
Someoune can tell me why i try to use getUserMedia but i've the following error : "navigator.mediaDevices is undefined"
You most likely have an add-on install that disables WebRTC in your browser to prevent IP leaks.
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
You don't need a form element to send things to a server side script. You can create an HTTP Request using fetch( ).
Then use a FormData object to store whatever elements you want to put in the body of the Request object.
I have playlist about AJAX and fetch if you don't know how that works.
th-cam.com/video/7EKebb4VUYQ/w-d-xo.html
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?
If you mean in the same video element then yes. Just set the video element's source to what you recorded.
@@SteveGriffith-Prof3ssorSt3v3 Would that essentially just be "" based on your code is in this video (where we set the src as the id of the video being saved by "let vidSave = document.getElementById('vid2');" However I run into a type error.
I also tried setting the id to "vid2" however it had no playback after stopping the recording.
@@Lan_man2273 The src has to point to a URL. you need the one created with createObjectURL
Truly inspiration!
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 :)
You can use fetch to upload a file. Or if you have serverside script you can use webrtc to stream to the server
@@SteveGriffith-Prof3ssorSt3v3 thank you very much !
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.
I don't have much experience with SquareSpace and their environment. However, you can create the files as I have shown in this video, and then use the Google Drive API to upload a file. developers.google.com/drive/api/v3/manage-uploads
SquareSpace and what they allow or prevent is the unknown here.
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,
Sounds like you are setting both a height and width on the video element. If you want it to be responsive leave the height as auto
@@SteveGriffith-Prof3ssorSt3v3 well se if we do that than ony half screen video will be captured, How do we Get 9:16 style video output
Man 10/10 Video
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
Have you looked at the screen capture api?
@@SteveGriffith-Prof3ssorSt3v3 developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API
yes i looked at this, but Im new to JS and i dont really understand how to implement it, is it only for browsers? or can I try it on something like VS code?
How would you go about capturing audio from your sound card and not only your microphone ?
You can try that with the screen capture API but support for capturing audio is quite limited.