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.
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
Have a look at the screen capture API - developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API And the WebRTC API - developer.mozilla.org/en-US/docs/Web/API/WebRTC_API One of those will likely meet your needs.
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.
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
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.... 😑
I am having this issue ,Uncaught DOMException: Failed to execute 'stop' on 'MediaRecorder': The MediaRecorder's state is 'inactive'. at HTMLButtonElement.
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?
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
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!
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!
hi....thanks for video.... i have a requirement in javascript html where teacher will teach student live....he can show his face using camera and also can share his screen alternatively like clicking on button...... this live activity will be visible to multiple students...and if user decide he can record video (his face or screen) and send it to server if you have any kind of reference that will be very helpull....
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
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. ruclips.net/video/7EKebb4VUYQ/видео.html
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
Sir it's a great work !!! I tried this code, it is working properly, but it is not work in mobile devices. I want to capture video from front camera of mobile. So what should I do ???? Thank you in advance !!!
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.
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.
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!
Not sure exactly what you are asking here. But if you are requesting a new tutorial, please put that in the comments here - ruclips.net/video/LCezax2uN3c/видео.html
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
@@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.
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.
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!!
Android yes completely. iOS... sometimes under the right conditions. caniuse.com/#search=stream Apple has been trying to block technology on iOS Safari, like PWAs, that they think will compete with the App Store.
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?
It's is great video sir, but I have doubt sir after recording the video from client site how can we send that video to server for server site programming, Sir i am doing my final year project about face recognition security camera website, where it's record video, that video is process in server and recognition wheather he or she present in criminal database or invited database or other database. So how can I record multiple video camera and send to server for recognition and storage, So Please 🙏 sir help me out in any suggestions or links where I can learn sir
Here are videos about uploading files ruclips.net/video/JtKIcqZdLLM/видео.html ruclips.net/video/ubHIayJKhac/видео.html putting those files in a database will depend on what database you are using and which server-side programming language you use.
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
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🙌🏻
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.
Buffer is the type for binary data. However, I have never used a database to save files. Files go in the filesystem and then the name of the file goes into the database.
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.)
this video is really good, for the others...but i'm searching for a new app/exe that can do recording live straem while you using your pc... how to record a live video while you watching movies or seeing photos?? is it possible?? please reply mr. pogi...i mean recording live stream of the other users webcam example like chris young i wank to record his live stream video while ddoing my web stuff, like facebook or something
Here is my tutorial on uploading files with fetch - ruclips.net/video/JtKIcqZdLLM/видео.html Server-side depends on the language you're using and which database you are using. However, I do not recommend saving files in a database. Files should be saved in the file system and only the name of the file goes into the database.
@@SteveGriffith-Prof3ssorSt3v3 Thank you for the tip. I figured out the audio. I've looked at streaming sites and they have a video source as a blob source rather than some download. I'm trying to make my own version of youtube basically but highly streamlined and for just my site. I would like to sell seats to a livestream lecture, archive the lecture at the end but continue the stream for additional things like AMA. Then a student can refer back to the archive later. Complex stuff lol I mean why re-invent the wheel if a platform like this exists, right? But I suspect something this specific will need to be created.
I don't believe that is possible in the browser. Especially not across all the platforms. Maybe on the server through NodeJS. I know that there are libraries that do this but I have not looked into them to see if they use anything beyond NodeJS.
@@SteveGriffith-Prof3ssorSt3v3 this guy did some green screen work in a browser but it’s just modifying in real-time not saving. ruclips.net/video/gzdUEuuNR6Y/видео.html
Ah yes. On HTML5 Canvas. I can do that. He is not editing the video file though. Here is the basics of how to play the video and work with the binary frame data - ruclips.net/video/_2SvAepbCSg/видео.html
@@SteveGriffith-Prof3ssorSt3v3 thanks steave..will check..i tried to download video and its working..now i want to hide video recording div from browser..is it possible and how?
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,
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 - ruclips.net/video/JtKIcqZdLLM/видео.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?
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.
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
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
If you are trying to do this with Safari or iOS you will have problems. caniuse.com/#feat=mediarecorder Apple is very slow to support web features that compete with native ones.
@@SteveGriffith-Prof3ssorSt3v3 no I'm doing it on windows. I also tried changing the file formats but it's always said cannot render the file even after trying to open from different media players.
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.... 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
You are a genius when It comes to teaching. Best tutorial ever!
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.
now how to store that video on database and handle a blob video
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
Have a look at the screen capture API - developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API
And the WebRTC API - developer.mozilla.org/en-US/docs/Web/API/WebRTC_API
One of those will likely meet your needs.
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.
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!
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.
Brother this concept to make a video chating webapp?
You need to use the webrtc api to do that
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.❤
You saved my life
I am having this issue ,Uncaught DOMException: Failed to execute 'stop' on 'MediaRecorder': The MediaRecorder's state is 'inactive'.
at HTMLButtonElement.
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?
ruclips.net/video/JtKIcqZdLLM/видео.html
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
Thanks a lot by this tutorial!
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!
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 But I Want To Record Screen Record.
How Can I Do This By Javascript
Screen capture api
so cool, great job
Amazing video!!!!
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
hi....thanks for video.... i have a requirement in javascript html where teacher will teach student live....he can show his face using camera and also can share his screen alternatively like clicking on button...... this live activity will be visible to multiple students...and if user decide he can record video (his face or screen) and send it to server
if you have any kind of reference that will be very helpull....
No. I don't have a reference for how to build a zoom clone with Javascript
amazing
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
it's worked.thank you!!!!!
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.
ruclips.net/video/7EKebb4VUYQ/видео.html
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
been looking for contents like this in awhile.
Thanks man!.
kudos! keep it up!
Sir it's a great work !!!
I tried this code, it is working properly, but it is not work in mobile devices.
I want to capture video from front camera of mobile. So what should I do ????
Thank you in advance !!!
iOS is a problem with many features not supported.
thanks so much this finally worked for me
How can we use Mediarecorder to record HTML CANVAS ( animation ) element and download in High Quality video ?
Use the screencapture api
i used to connect two user by webrtc peering concepts , i need to record both user audio , plz brother can you help me out from this problem
Sorry. I have no content on webRTC or recording streams yet.
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.
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.
AMAZING tutorial. You are the man !!!
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.
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!
Make a video vdocipher downloading segment...
How to download video from these platforms
Not sure exactly what you are asking here. But if you are requesting a new tutorial, please put that in the comments here - ruclips.net/video/LCezax2uN3c/видео.html
Definitely will try this!
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
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
14:04 dealing with older versions
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?
sir please make a video on video and audio calling using js html and php please
Please add any requests here - ruclips.net/video/LCezax2uN3c/видео.html or vote for the request if it is already there
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.
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!!
So clear. Thank you.
Thanks sir its really helpful
Hello Steve Can I record from a webcam using its IP?? How can that be done??
Look into WebRTC and socket connections for streaming between peers.
Will this work on mobile platform? such as Apple and Android? thanks
Android yes completely. iOS... sometimes under the right conditions. caniuse.com/#search=stream
Apple has been trying to block technology on iOS Safari, like PWAs, that they think will compete with the App Store.
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.
pure class man
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?
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 - ruclips.net/video/DcWsUyhBykE/видео.html
It's is great video sir, but I have doubt sir after recording the video from client site how can we send that video to server for server site programming,
Sir i am doing my final year project about face recognition security camera website, where it's record video, that video is process in server and recognition wheather he or she present in criminal database or invited database or other database.
So how can I record multiple video camera and send to server for recognition and storage,
So Please 🙏 sir help me out in any suggestions or links where I can learn sir
Here is my video on uploading files with fetch - ruclips.net/video/JtKIcqZdLLM/видео.html
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 that enumeratedevices method returns null even if device has camera.
Need this for testing an application
That is definitely a possibility
Why i just can download the recorded video only 9 seconds? Where to set this constraint?
Thank you
Don't understand your question.
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?
Not consistently across all browsers. But it sounds like you are looking for the screen capture API
@@SteveGriffith-Prof3ssorSt3v3 Thank you!
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.
Thanks so much .....please I need the second video on how to upload it on databases
Here are videos about uploading files
ruclips.net/video/JtKIcqZdLLM/видео.html
ruclips.net/video/ubHIayJKhac/видео.html
putting those files in a database will depend on what database you are using and which server-side programming language you use.
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
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🙌🏻
Thank you so much! This was really helpful!
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.
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.
how can i save this chunk in mongodb... I'm using mongoose package, what type should I assign to it?? buffer??.. Any help appreciated❤
Buffer is the type for binary data. However, I have never used a database to save files. Files go in the filesystem and then the name of the file goes into the database.
@@SteveGriffith-Prof3ssorSt3v3 ahh... okayy.. thankyou so much sir ❤
Excellent tutorial - very good job!
Thank you Professor Steve, it helped me a lot!
Man 10/10 Video
Thx for the video
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.)
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.
this video is really good, for the others...but i'm searching for a new app/exe that can do recording live straem while you using your pc... how to record a live video while you watching movies or seeing photos??
is it possible?? please reply mr. pogi...i mean recording live stream of the other users webcam
example like chris young i wank to record his live stream video while ddoing my web stuff, like facebook or something
Have a look at the Screen Capture API and the WebRTC API
@@SteveGriffith-Prof3ssorSt3v3 ok handsome (pogi) i wish you have a fc account hehe
Where is tutorial for saving the audio/video to the database?
Here is my tutorial on uploading files with fetch - ruclips.net/video/JtKIcqZdLLM/видео.html
Server-side depends on the language you're using and which database you are using. However, I do not recommend saving files in a database. Files should be saved in the file system and only the name of the file goes into the database.
Dear,can you help me to let browser play DVD file ?
No sorry.
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.
How do I implement audio?
Is it possible to do streaming with this?
It sounds like you are looking for the webRTC API
@@SteveGriffith-Prof3ssorSt3v3 Thank you for the tip. I figured out the audio. I've looked at streaming sites and they have a video source as a blob source rather than some download. I'm trying to make my own version of youtube basically but highly streamlined and for just my site. I would like to sell seats to a livestream lecture, archive the lecture at the end but continue the stream for additional things like AMA. Then a student can refer back to the archive later. Complex stuff lol I mean why re-invent the wheel if a platform like this exists, right? But I suspect something this specific will need to be created.
Tks Bro!
good job
Can you step through the video and modify it before saving? Like add a watermark or a logo etc.
I don't believe that is possible in the browser. Especially not across all the platforms. Maybe on the server through NodeJS. I know that there are libraries that do this but I have not looked into them to see if they use anything beyond NodeJS.
@@SteveGriffith-Prof3ssorSt3v3 this guy did some green screen work in a browser but it’s just modifying in real-time not saving. ruclips.net/video/gzdUEuuNR6Y/видео.html
Ah yes. On HTML5 Canvas. I can do that. He is not editing the video file though.
Here is the basics of how to play the video and work with the binary frame data - ruclips.net/video/_2SvAepbCSg/видео.html
hi..i am searching for recording laptop screen ..any idea?Very useful code
The Screen Capture API is what you are looking for - developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API
@@SteveGriffith-Prof3ssorSt3v3 thanks steave..will check..i tried to download video and its working..now i want to hide video recording div from browser..is it possible and how?
Is it possible to record canvas element?
With the screen capture API.
Could we somehow send data over to flask app.py
With fetch() you can send binary files.
With web sockets and the webrtc api you can send streams
great Idea. But I want to record my voice too. Can yout show how I can Capture Video and audio?
This is the way to do it... however, support for audio capture on Safari was only recently added.
@@SteveGriffith-Prof3ssorSt3v3 I tried it on Windows 11 and there I can't hear my Voice. Do you have an idea why?
In the getUserMedia method are you passing the constraints to allow audio?
developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
Thanks man! That's very helpful
Makes me think that OBS could run in the browser
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
How to incorporate this in zoom clone.
That is a much bigger topic and project than could be explained in a comment.
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 - ruclips.net/video/JtKIcqZdLLM/видео.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.
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.
please make a video on screen capture
Please add any tutorial requests to the comments here - ruclips.net/video/LCezax2uN3c/видео.html
And also vote for the ones you like.
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
Excellent, can i use this in angular
You can use it in the browser, with a few iOS limitations. It doesn't matter about Vue, React, or Angular being used.
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
This is still so useful in 2024, thanks the OG 🧡🧡
Great video! Though I'm not able to play the downloaded video. kindly help
If you are trying to do this with Safari or iOS you will have problems.
caniuse.com/#feat=mediarecorder
Apple is very slow to support web features that compete with native ones.
@@SteveGriffith-Prof3ssorSt3v3 no I'm doing it on windows. I also tried changing the file formats but it's always said cannot render the file even after trying to open from different media players.
@@mayurbhavsar4539 I dont know what the problem is then.
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.... 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
Can you use this on Android ?
Depends on the browser - caniuse.com/#feat=mediacapture-fromelement
Doesn't work
Not in every browser no.