Build a Webcam and Screen Sharing Site With Inertia
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
07. Previewing the recorded video

Episodes

0%
Your progress
  • Total: 2h 16m
  • Played: 0m
  • Remaining: 2h 16m
Join or sign in to track your progress

Transcript

00:00
So at the moment when we stop our recording, we're just dumping out this array of chunks. So each of them blob objects that contain the data for each of our sections of recording. What we want to do now is build up a new blob, which is just a really a collection of chunks
00:15
of data from these chunks that we already have. We're going to set them in our state. Then from our state, we can generate out a video preview of that video. So now we're actually going to see the preview of the video we've recorded. So let's go ahead and do this now. So we're going to go ahead and create
00:34
out a local variable in here for this. We'll create out a new blob manually, and we're just going to pass them chunks directly in. Now it's at this point we want to provide stuff like the type that we're working with. Now we need to be really careful here because different browsers record with different formats.
00:52
When we pass them through to our backend, that isn't going to be available for every single browser. So for example, when we record in Safari, we can record with an MP4. But when we were recording Chrome, this is going to come out as a WebM video format. So that's why we're going to encode that in our backend.
01:08
But for now, what we can do is just set the type to video MP4. And we can choose codecs in here and everything. But since we're just previewing this in the browser that we're currently recording in, this is fine. When we send this through to our backend to be encoded, that will then be available for all
01:24
browsers. So we've got our new blob. Let's just go ahead and console log this blob out. And we'll just check what this gives us. So we'll open up our console, record our audio and our screen. And let's just wave around a little bit. Hit start recording, wave around, stop. And there we go.
01:42
So we now have a blob with all of that data combined. That is now our recorded video, regardless of how long it is. So what we can now do with this blob is set it in our state. So let's set that to blob. And we'll go ahead and reset our chunks just to an empty array, just to get rid of that data.
02:01
So over in our state, let's create this blob out, which by default is just going to be a null value. And then from here, we can create out a preview of this video. We can't just take a blob and put it into a video player. It's just not going to work. So we're going to create out a computed property in here, which is going to give us back the actual video that we can play.
02:23
And then we can just put that into a video source object. So let's go ahead and call this blob URL. And once again, we'll use a computed property for this because it's going to need to react to the changes of the blob. And of course, first of all, we'll check if we actually have that blob in there. Now, if we do, we're going to generate
02:40
out a video. Otherwise, we're just going to return null or false. So we can check that. Now, in here, what we can do is we can use the URL object within the browser. We can say create object URL. And we can just pass the blob data into that. What that is going to do is give us a playable object, which we can put directly into the source
03:00
object of a video player. OK, so now that we've done this, we need to do a little bit of tweaking again with our template so we can change around the state of this. Once we finish recording, at the moment, it just goes back to this screen. Ideally, we want to just get rid of all of this and just show the preview with the form. So that is where we're going to come up to the top of our
03:20
template. And we're going to create out an entirely new section for this. So let's just see what we've got in here at the moment. OK, so we'll create a new section out in here, which is going to be our preview, just showing at the top once we actually have that blob URL available. And then down here, we'll get rid of everything else. So all of this stuff that we've created here
03:45
once we have the preview so we can see the form. So really, what we can do in here is either create another computed property to show to say something like, should we show the form? Or we can just use the blob URL. Because if the blob URL is available and it can be played, that means that we have a recording and we can show it. So we'll just say if state blob URL on
04:05
here. And then we'll wrap everything that we've got inside of here in a div or in a template. It doesn't really matter too much. And we'll say V show. Remember, we need show in here because if we say V if, all of this stuff isn't going to be available and our refs are not going to work. So we'll say V show state blob URL. And we'll say if that's not available. So if we go back to our
04:29
starting screen, we should just see this. When I capture the screen or the webcam now, that's going to go ahead and record all of them chunks once we hit start recording. Once we stop recording, that's going to put the blob into our state. The blob URL computed property is now going to contain the preview for this. And we should see our preview. We get a
04:49
little bit of a flicker there, but it's not the end of the world. So because we're dumping our state up here, you can see we've got this blob URL. That is the video recording within the browser. That we can now put into that video preview. So inside of here, we can create out another video element. We'll get rid of the source. We will set, we won't set, we could set autoplay. It doesn't
05:10
really matter. But we'll also add the controls. That's really important because we want to be able to scrub through our video, play it, pause it, and do whatever we need to do. I'm actually going to get rid of autoplay. Okay, so in here, we can add another ref. So this is going to be the video preview. And let's go ahead and create another ref for this to hook this up. So let's go
05:29
up to the top where we created out our player. And we can just create out a video preview in there. And now what we can do is we can watch for the blob URL like we did when we watched. If we just have a look here, the stream, and we can do the same thing. So we can just duplicate this down. We'll watch for that blob URL. Once that URL becomes available, we can now set that into
05:54
our player preview or video preview, did we call it? Yeah, that will do. And we can just set that URL into there as the source object, and we should see the recording. So let's just go over this one more time because some of this can get a little bit confusing the way that we're setting up. We want this to be easy. We want everything to be in state, but that involves a little bit more
06:15
complexity. So let's go over to our start recording section. And we know that we're collecting blobs here. When we stop this, we're putting the blob into the state. When that blob goes into that state that we're building up, we know that our computed property is going to react to that and generate out a URL that we can use to play the video. Once the blob URL is available,
06:37
we know that we are switching over the template in here. So this is eventually going to be our form and the video preview will be shown. Now, as you might have kind of noticed, this is going to need to be the show because, again, that ref isn't going to be available if we have that the if in there. So we'll swap that over now just so we don't run into any issues. So once that blob URL
06:58
is available, we are watching for that blob URL being generated, and then we're putting it into that video preview, which we now know is just directly tied to this video. So let's try out the whole flow and see what happens. So let's just pull this down a little bit. Let's capture our screen here. And we will start recording, move things around a little bit, stop recording,
07:23
and then, yeah, we get an error. That's fine. And let's just check this out. And yeah, that's our chunks. So let's go up to our start recording section where we stopped the recording. And yeah, we just need to change this over to a let rather than a constant. Okay, let's try this one more time. So let's go and click capture screen, allow both of these, share our window, start recording,
07:48
and move around a little bit, stop recording, and we get a type error. Brilliant. So let's go and see what we've got here. Okay, so I think this has got to do with our watcher. Now, yeah, so because we're generating a URL now from our blob that can actually be put into a video player, this is no longer a source object. The difference between the source object and the source is that
08:11
we have a stream here, which is the stream object we saw earlier that we want to be put into the player. In our case, we're generating out a blob URL that can be put directly into source. So let's switch this over to source, and we should be good. Let's try this out again one more time. So let's hit allow on both these, let's share our screen, start recording, and stop recording,
08:34
and now we get that video preview. So the blob URL is available that's been put into the source of the video, and as you can see, and probably hear from my laptop, that has now combined both of them streams. I'll just let you listen one more time. There we go. Great. So we now have a video preview from the blobs that we created into that blob object, create the blob URL,
08:59
and show it in the video player. So we've switched over now to being able to see this. I'm going to go in here and just get rid of our state from here because we can see all of that happening in here already, and let's go over to actually creating our form to send our video through to our back end and store it.

Episode summary

In this episode, we take the video chunks we've been recording from the browser and stitch them together into a single video that we can actually preview.

We start off by taking the array of blobs (those chunks the browser gives us each time data becomes available during recording) and creating a new Blob from them. This gives us our full video in a format the browser can play back. We go over the differences in video formats across browsers (like how Safari might use mp4, while Chrome records in webm), but for the purposes of our preview, we just use whatever we get.

After that, we update our app's state to store the blob, clean up the chunks array, and compute a blob URL. This blob URL is what we can hand directly to a video element's source so we can see a preview right inside the browser.

We rework the template so that once a video has been recorded, it shows the preview at the top, hiding the initial recording controls. We discuss why we use v-show instead of v-if—so our refs stay available and everything reacts nicely. Then, we hook up the blob URL to our preview video element, add controls for scrubbing and playback, and make sure the source is set correctly.

To wrap up, we fix a couple of small bugs around how we're handling the video source, do a couple of test runs, and confirm that the preview works: you can record yourself, stop recording, and immediately watch your recording back in the page. Next up, we'll move on to building the form so we can actually upload our video to the backend!

Episode discussion

No comments, yet. Be the first!