Sign up to access "Build a Webcam and Screen Sharing Site With Inertia" right now.

and we're going to create out another primary button in here and that's going to be to start recording. So let's just check this out once we have captured our screen or our webcam and we have a button in there, great. Okay, so let's go ahead and just style this up really quickly. I'm just going to set everything to have a space Y of 6 and let's actually change that to justify center because we want that to sit in the middle.

Okay, there we go, perfect. So when we click on this button we need to do quite a few things. Let's go and attach this to a click event to go through to start recording and let's build this method out. So we'll go up to the top, we'll just put this above here and we'll start to run through this.

Now when we start recording we use the media recorder API. Now what we can do the media recorder API is pass in a stream. So we have a couple of streams already. We've got an audio stream and we've got a webcam stream or an audio stream and a screen capture stream.

So with them we could just pass one of these into the media recorder API but we have two different things that we want to record at the same time. We have the webcam and the audio or the screen and the audio. So what we're going to have to do is build up a new media stream with them two things combined and then record that combined media stream. So let's go ahead and build up that media stream.

So let's create out a new stream in here. We can just do this locally and let's just create a new media stream object. So into here what we're going to do is have an array with the stream to the video stream and then the audio. So we want to go ahead and spread in the stream and then we have this get tracks method which will bring us the tracks for the stream that we're working with and then we just put them into this array.

We're going to dump this stream out in just a second. The next thing we need is the audio but remember audio is optional. So if we were to say state and audio stream and get tracks that potentially is not available. So let's just see what that looks like and then we'll add a conditional within this spread to fix that up.

So I'm going to go ahead and console log out the stream and let's just see what we get in the console once we start. So I'm going to go ahead and allow microphone and screen share the window and when I click start recording sure enough we now have a media stream which is capturing both the audio and the screen at the same time. Now if we give the page a refresh and I don't enable audio and I just capture my screen what that's going to do is when I hit start recording we're going to get an error because we can't get the tracks from that audio stream. We've not allowed that audio we don't have a value for that so there's no point in even calling get tracks.

So to add a conditional around this what we can do is just wrap all of this in parenthesis we can check the state audio stream directly in here and then just add a ternary. Now what do we want to spread in if we don't have this well we can just spread in an empty array. So all of these now because we're spreading each one are going to be combined into one stream. Let's just test this before we can't carry on so I'm going to not enable audio by I'm going to capture this screen and as you can see when I hit start recording we get that stream back but that stream will now not have audio great.

Okay so now we've built up our new stream that is where we can now pass this stream this newly built stream into the media recorder API rather than just the individual video or the individual audio. So to do this we want to go ahead and set this in our state really because within our state we want to control whether this is currently recording so we can stop it. So I'm just going to go ahead and create out a recorder property in our state and down here we're going to attach that and we'll create a new media recorder and we'll pass the stream that we have just created into there. That's pretty much all we need to do to create the media recorder then we're just going to start this recording and we're going to collect chunks.

Now this will be recorded in chunks so it's not all recorded in one thing and then with them chunks we can create a blob which will be the final video that we then send down to our back end. So let's go up here and let's create out a chunks array which we can push these chunks to. Now what we can then do is say state recorder and start and then we can give the chunk size. So let's just choose that as 300 milliseconds for each chunk so three second chunks you can increase this or decrease this depending on what you need but I think 300 is fine for now.

Okay so we've started the recording this will start recording but we need to listen for this recording and then push each of these 300 milliseconds chunks to this array. So in between starting this or creating this media recorder and actually starting the recording we then want to capture these events. So the event that we want to listen to so let's access our recorder we're going to say on data available so once this data comes in these chunks come in we want to do something with these. So we get an event through in here which we can access and all we want to do is say chunks push event data so that will push each of them 300 milliseconds chunk to this chunks array and it will push them so they come one after each other.

Now with this we do need to do some checks in here just to check that we actually have data before we push it because we don't end up with a recording with any kind of missing chunks or null values but let's just check this out. Now I want a way to stop the recording so I can see what is inside of these chunks so we could just go ahead and create out another method which stops this. Now let's create stop recording and with this we are going to go ahead and access from our state this is another benefit of having this overall state the state recorder and then we can just stop the recording directly from here. Now with this we can't just say something like state recorder stop what we need to do is access the stream directly within this we need to grab the tracks from within this and then we need to do a for each over and stop each of the tracks because remember we have our audio and our video as well.

So we're going to go ahead and create a for each on here and for each track we're going to stop each of them to track so that will stop the audio and the video from recording within this stream that we can find control this if we want to stop the audio during recording but we just want to stop everything in here and then why don't we just clear this up because we want to set our state stream back to null because we don't need a stream anymore and we can set our recorder back to null as well. That will be the kind of entire process of stopping the recording resetting our state and stopping each of these so once we do stop recording we're going to go ahead and console log out the chunks that we've got now we don't actually have these in here at the moment so what we can do is just down here attach another event listener to this so we can say on stop and let's create out a closure in here for this and we're just going to console log out our chunks just to see what we have. Okay so let's just recap and then we'll run through this we know about the media stream and combining them we start our recorder we create a recorder we start the recording with 300 millisecond chunks of three seconds and then once we get data available for each of these as it's recording we push each of them chunks to this simple array within javascript and when it stops we go ahead and dump the chunks out now when it does stop that is controlled by this stop recording so we're going to need a stop recording button in here as well I'm just going to go ahead and dump this down here and then we'll figure out the stop recording afterwards so let's just say stop recording and we'll just access that method okay so we'll need to add some if statements around here to change these around but this should be good for now okay let's go ahead and capture our screen again we'll allow our microphone we'll share this window and we have got this here we can click start recording that is going to go ahead and start to capture this now it doesn't look like anything is happening in the background

at the moment but this is now capturing all of that data and it's putting it that into this array when I hit stop recording we get each of these blobs out with the size the type all of this information that we can then combine into a blob that we can pass down as an entire video to our back end which is what we can be doing later so that is all of them chunks like I said feel free to increase the time of each chunk not too much but the options there okay so now that we've got this let's just change around the way that our screen looks while we're recording so it looks a little bit better and we have a nicer stop button and then we can start to combine these chunks a little bit later okay so what do we want to do around here well we want to work out whether we're recording or not so this is a

good candidate for our state and creating another computed property up here to check whether we're recording or not so let's say is recording and that will allow us to toggle them buttons around and the computed property here is going to first of all check if we actually have a recorder so if this is actually available and with our recorder we get back a property on here so we're going to

say state recorder and state so state is as part of the recorder media recorder object and that will be recording as a string if it is actually recording so we're going to go ahead and say well if that is available we're going to check if it's recording that will either be true or false otherwise we're just going to return false if we don't have a recorder and assume that's false

so now we have another property which we've used within our state as a computed property that will tell us whether we're recording or not so if we come down to our start recording buttons of course we want to show this if we are not recording so let's say state is recording and we want to show this button if we are recording to stop the recording now i'm actually going to

change this over to a danger button it's just a kind of red button just so we can very easily see the difference between the two so let's just try this out now so i'm going to go over here i'm going to click capture screen we'll allow both of these share our window hit start recording that changes over to that red stop recording button because now the media recorder is actually at that recording

state and then when we hit stop recording we end up back on this screen now that's fine because our state has changed when we stopped our recording we set stream and recorder back to null that is what we want this is at the point now where we'll be able to capture that blob data create it as a video show the video preview and then of course we can send that data down to our back end to be

encoded so there we go that is the entire recording process we do have a couple of things that we probably want to change around like i said like the checks in here to check if data is available so let's do that now before we forget so the data that we get through this data could potentially be null and the size of each of these blobs could be zero as well so let's add a really quick if

statement in here just to do an early return and not push that onto our chunks if either of these two things are true so we'll check if an event data is either null or false in here or if the event data size is less than zero or less than or equal to zero that kind of makes sense so if either of these are true don't push this chunk in here because there's no need it's

highly unlikely this is going to happen but it's a good idea to catch for this as well okay let's run through the entire thing just really quickly we'll go ahead and capture this screen start recording stop the recording and there we go we now have our chunks array with all of them blobs in which we can combine to show this preview