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

Episode summary

In this episode, we dive into encoding uploaded videos to make sure they're playable in all browsers. Now that we're comfortable with the Laravel FFmpeg library, we'll create a new job—call it something like ConvertVideoFormat or EncodeVideo. The goal here is to automate video format conversion right after upload, so users don’t run into compatibility issues when sharing their links.

The process is pretty straightforward: we copy over a lot of the logic from our previous video preview generation, but this time, instead of grabbing a still frame, we're actually exporting the video to a new format using the FFmpeg PHP library. We use the x264 codec to create an .mp4 file, which is essentially the most widely supported format for web video.

After encoding, we save the new video to our storage with a new UUID in its filename, update the database record to point to this new file, and clean up by deleting the original, unencoded upload. The episode also touches on the pros and cons of not using Laravel queues for this—while skipping queues for now makes things quicker to set up, it can mean a delay for users uploading larger videos. For now, since our test files are small, it's not a big deal, but if you want, you can easily offload encoding to a queue for better performance as your app grows.

Finally, we walk through testing the encoding by uploading a new video and watching it get processed and transformed into a shareable, browser-friendly format. This sets us up for the next step: adding functionality to manage and share videos with others!

Episode discussion

No comments, yet. Be the first!