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
13. Encoding the video

Episodes

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

Transcript

00:00
Okay so now that we're familiar with the Laravel FFmpeg library what we're going to do is create another job which will convert the video format over so it can be displayed in all browsers,
00:09
the last thing we want to do is give this sharing link to someone and then have them not be able to see the video, okay so we're going to go through exactly the same process so let's go and create our job in here and let's call this convert video format or you could call it encode video whatever you want to do, we're going to do exactly the same
00:28
thing here so convert video format and we dispatch that with the video, let's go over to that job and fill this in so public video video and just make sure we pull the model in and then down here we're pretty much going to do the same thing so let's go over to our generate video preview image and just pretty much grab all of this we are just going to tweak it around a little bit
00:53
to encode the video rather than grab a still so let's go ahead and paste this in make sure we pull in the correct facade here we still want to grab this from the public disc we want to open the video path but we're not getting a frame from seconds here what we're doing instead is exporting it to a disc and we're going to say in format so we're doing this in this
01:15
order because we want to export it to public but we want to choose the format that we want to export it or encode it to so we're going to go ahead and new up from the ffmpeg php library not from this one and in here let's just go and well we'll do this all in line just so we don't pull in the namespace because it's going to get a little bit annoying if we do that
01:38
so let's do this all in line and this comes from the format directory under video and then we can just choose the format that we want so for example x264 is perfect that's going to work in all browsers so we are opening the video exporting it to public in this format after saving we need to do something slightly different but we want to save it to a new location but we want this to be in
02:04
videos not in stills because we're working with a video so we're going to basically just change this over to an mp4 x264 format we're going to generate a new uuid so let's pull in the string helper and that's it and then after we save this we're going to delete the original video and we're going to update the model to have the new path that we've created so in terms of the
02:29
new path that we've created we know that this comes from the media object here so we can just say this video update and we can do exactly the same thing but this time we are replacing let's just re-indent this the video path and we'll say media get path but we also want to delete the original video we don't want the original unencoded video hanging around so to do this we
02:56
can just use the storage facade and we can say disk public so now we're working with the laravel file system stuff and we can just delete the original video path and remember we do this before we update the path because otherwise we're going to delete the encoded video once it's been updated so open the file convert it to x264 and then save it to a new location with a new uuid
03:25
after that's saved delete the original one but then update the model with the new path and that is pretty much it now there's one downside to doing this this way at the moment we haven't set up queues so if you have a particularly long video the encoding process is going to take a little while now we saw from the introduction that when we did capture this and save it we got the inertia
03:46
loader to show that this was loading technically now because we're not queuing this that loading process is going to be the encoding of the video so we're not looking here at actually sending this progress through to the client we're going to have to wait until the video is encoded before we're forwarded back over to videos now we're going to have another course on how to process
04:08
the progress and send it to the client so you can go ahead and kind of hook these two things up together but for now i think because these videos are going to be pretty small in quality and all that kind of stuff it shouldn't be too much trouble but if you wanted to what you could do is over in the video observer you could go ahead and dispatch this the preview image immediately
04:29
but you could queue the conversion of the video format if you wanted to so you could say something like if you look at one of these we've got dispatchable we can dispatch this or we can go ahead and dispatch it sync so this will be pushed to the sync queue so what you could do is you could say dispatch sync here and dispatch this and set up queue so this one will be immediately done
04:54
so when we forward it back we see the still and this one will be sent to your queue so we're not going to set up queues here but if you want to go ahead and do that look at the larifer docs and set up queues you can choose which one that you want to send to your queue okay so now that we've done this let's check it actually works that's the most important thing and we'll see if we come
05:13
across any issues so we've got a video in there at the moment i'm going to go ahead and delete this because we don't have an encoded version of this and we'll go ahead and clear up any of the files that we have in storage so we've got stills and we've got our video now when we capture this what that's going to do is do everything that we've already seen
05:40
but when we save it's going to take a little while longer because that is being encoded so now what we end up with is the video in here which has a different format and it can be played in any browser so now when you open this video up in any of your browsers when we get to the sharing point it's going to work because it's being put into a format that all browsers understand so that's
06:01
is again very very easy using this library and that's it we've encoded the video we've saved it now what we need to do is start to build out the ability to click through modify this file if we want to and really importantly grab that share link that we can share with anyone so let's head over and finish up
16 episodes•2 hrs 16 mins

Overview

Let’s build an app to capture and record your webcam (or screen) directly from the browser, store it, and provide a link that can be shared to anyone for them to watch.

Completely from scratch, we’ll hook into the browser APIs for recording, send the video to our backend for encoding, generate still images with FFmpeg, and produce a sharable link that can be sent to anyone for them to view.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.