How to record screen & audio in flutter without 3rd party lib using media projection & replaykit

next video in today's video I will show you how to record uh your screen as well as your audio uh using uh media projection API and Android and uh repl it in iOS using your flutter app without any third party libraries so here is a demo for it so I'm just clicking on start Rec start button and it will start the recording for you and uh you can navigate away from your app as well and once you click on stop it will stop recording and give you a URI of the video uh so that we are saving that video in in external storage and then playing inside exop Player for Android and AV foundation for iOS so that exop player and AV playing of the video is not covered in this tutorial because I have already made uh two videos on how to play video in flatter app without any third party libraries but I will tell give you the URI where exactly it is stored you just have to pass that URI uh to your uh to that other tutorial which I have created and uh you will see uh your video being played so yeah let's get started so as us usual I have created a flutter application and inside that I have two buttons uh I have created a method channel for it as well called recorder platform and inside that meth method channel uh so from that two text button on press I am calling that method channel so invoke method start method and invoke method stop method is called uh so once all the so here you can see once you are stopping it you it will give you a string result uh this will actually contain the URI so you just have to pass this Ur to your video player and it will start playing the video so as simple as that so these are the two methods which I have created so let's see the implementation now so for Android what you have to do is go to your main Android folder go to build. gridle firstly you will have to add this line over here next go to app build. gridle and also make sure you're using cotlin version 1. 18.20 next go to build. gradel and here you will first have to add this line so this line is for recording the video uh this is a third party dependency for Native Android and here these are these two dependencies uh are used because we will need to use the result launcher and we need to convert flutter activity to flutter fragment activity next go to SRC main Android manifest.xml firstly add all these permissions uh yeah I think that should be it next go to cortlin uh main activity. K so first you will have to convert your flutter activity to flood a fragment activity and then Implement HB record listener next I have initialized our method Channel result here created variable for meth media projection manager HB recorder reserver content values and this will contain the URI for which we are sending it back to the flutter side uh so first I'm checking for all the permissions if they are granted or not uh so here you will get a call back if permissions are granted or not if yes if they are granted then we are setting up our HB recorder and once we are setting up our Ed recorder we are calling media projection manager. create screen capture intent which launch which calls the result launcher which is over here and from that result launcher you will get an intent and here I will start the recording for our application and I'm also calling set output path so inside on create we are first setting up our notification Channel and I have overridden the configure flutter engine for our method channel so here you can see I have registered our method Channel and once the start method is called we are uh initializing HB recorder and uh here uh we are just setting the default value for our HB recorder and initializing media projection manager and we are just launching uh the required permission launcher and in stop in stop method we are justop stopping our recording okay and this is the set output uh uh implementation so here we are just using content resolver if you're using Android que or else we are just saving it to external storage public directory um uh the recorded video and here this is just for generating the file name this is for creating the folder called HB recorder but you can change the name to whatever you want and here means this method should be overridden because we are implementing the HB recorder listener interface and if it is marked as too just make sure you remove that too otherwise I've noticed that the app does crash a little if you don't remove that too uh and here once the uh once you stop recording it it gets called back over here and here we are just saving our URI depending on what version you are using uh so for this we are using update Gallery URI okay and here we are calling refresh Gallery file so here you can see you will get the urri which we are sending it to back to the flutter side so this is the URI where your uh video is stor you just need to pass this URI and here also these are uh overridden methods just make sure you remove the 2D implementation if there is any so yeah that's it for Android uh for iOS uh go to iOS go to Runner uh go to for. P list first of all you will have to add these two permissions over here next I have created a swift file so you to be honest like I have just copy pasted this from GitHub repo so even I don't have much ideas but what it does is that uh it uses replay replay kit uh to record the screen uh so here you can see I have defined uh this few variables for uh recording video as well as for audio and I'm uh making the microphone an D through next uh uh this is for starting the recording and uh this is for checking if photo library permission is authorized or not and this creates a video writer and saves it to whatever path which we specify or URL which we specify and this is for uh the video writer input for checking what is the dimensions or the size of the of our recorded video and uh this is for adding audio input uh this is for start capture so the while uh you click on start for iOS uh the user may Grant uh permission only to record the screen or to record the audio or to record both so that's how it is handled over here next uh handle sample buffer uh so I'm not exactly sure what exact exactly is happening over here but it is something related to writing the video next uh this is for stop recording and uh this is for saving video to camera roll and this is just for saving it to camera Ro so yeah that's it for screen recorder. Swift and if you checked uh inside the app delegate. Swift file so here I creating a variable for it and uh this is our URL where a video would be stored and I'm initializing our record platform and and here is our controller and once the start method is called I'm creating a documents directory and getting a unique name for our video file and sending and assigning it to our my URL variable and clicking on uh and starting the recording uh also uh the screen record is screen record is initialized over here and once you call the stop recording I'm stopping the recording and sending the URI back to uh flutter side so yeah that's it I think that should cover all uh thank you for watching bye

Channel: Coding With Nobody

Views: 450

Keywords:

Id: eMLhAtcfkAs

Length: 8min 6sec (486 seconds)

Published: Thu Nov 09 2023