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
12. Capturing a video frame

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 we're now going to use FFmpeg to first of all generate a still image from one of the frames in our video depending on where we want that to be and second of all encode that, so we're going to work on the easier one first that is generating the still image,
00:15
now if you don't already have FFmpeg installed you'll need to go ahead and install it on your system and I'll show you how to work out the location of this once we start working with it and putting it in config, but we're not going to directly use FFmpeg we're going to go ahead and use the Laravel FFmpeg package which makes this incredibly easy to work with,
00:35
read in a file, do something with it, get back any progress if we need it and there are a couple of other event handlers as well which work really nicely, so what we're going to do with this is install it, work out where our binaries live and then we are going to get this up and running and generate that video still. Okay so let's go down to Laravel FFmpeg and go ahead and pull this in,
00:57
so let's grab the composer command here and let's go ahead and pull that directly into our project, we'll want to go ahead and generate the config out as well, that's really important because we need to change around the location of things and you can customize any of this as well, so let's just look at the config, so let's go over to config Laravel FFmpeg and this is the
01:18
really important part where the binaries live both for FFmpeg and FFprobe as well, so really all we need to do because this is using an environment file or an environment value, we just need to set these in our environment value, so if I just open up the terminal and I type FFmpeg I've already got this installed so you can see that this is giving me the default output here
01:41
but we need to work out the location of this and FFprobe and then put this into the right place, so for our FFmpeg binaries let's pull this down into here and we'll do the same thing for the FFprobe binaries, let's find out where this lives on our system first of all, so all we're going to do is use the which command which is available on a Mac and a Linux, I'm not sure about Windows but
02:02
we're just going to run this and it's going to tell us where this lives, so I've installed this via homebrew so I'm just going to grab this location and then just put that into there, that package will then when it runs FFmpeg know where this lives and it's the same thing for our FFprobe so I'm just going to change that over but of course you can run the same thing
02:22
on FFprobe as well and you'll see where that lives, okay so now that we've got the config sorted we can just pretty much start using this package, now let's think about the kind of flow of this, we are going to be creating jobs to create out our video still and encode our video but we're not actually going to be queuing these, we are just going to wait and have inertia show
02:44
the progress of when these are being done, so we're going to create a job we're not going to queue them, you can do if you want to and you can relay the feedback back to the client but let's go ahead and just look at our video observer, so we know that when this was creating we set the UUID, what we can now do is create our new eloquent event created, so when a video is created that
03:06
is when we want to fire off a job to grab the still and encode the video, so let's just focus on the still first of all, so I'm going to go ahead and create out a job, so let's make a job and we'll call this generate video preview image, of course call it whatever you want and let's open up that generate video preview image job and have a look, so what do we need to
03:28
pass into here, well we just need to pass in the video, so this job is just responsible for accessing the video itself, generating a still from that and then resaving the video with the still path in our database, so when we invoke or run this job we're just going to say generate video preview image dispatch and we're just going to pass the video into it, so that's all we need to do once
03:55
a video has been created to run this job, so we get the video in and then in handle this is where we want to do something with it, so this is where that package comes in, so before we do anything let's just talk about the whole process of what we want to do here, we want to grab the video, we want to grab a still from the video, we want to save the still in the public directory and then
04:19
we want to update the video still path, so that's what we want to do, we want to find the video that's already been uploaded based on the video that we're getting into this job, grab the still and then save it and then update the still path so we can actually reference to that location, so let's go ahead and look at the varvel ffmpeg package and how this works, so the first thing we
04:42
do is pull in the facade and we want to read in this video file, now this is a really nice interface so we want to say from disk first of all because we want to tell this where we're accessing these videos from and that's just our local disk, so we're just making it really easy for ourselves by having this locally, then we want to go ahead and open a video, now where does the video live,
05:05
well we've already stored the video path so we're just going to say this video and video path obviously from the videos in our database just here, so that's going to open that file for us, now the whole flow of this is then going ahead and exporting this to a disk, so to disk and we want to put that back in public and then we're going to choose where we want to save this to, so that's
05:34
pretty much what we do and then in between here we can convert the video, we can grab a still from the video, we can do pretty much what if we want the ffmpeg supports, so once we've opened this file we then want to go ahead and get a frame from a second position, now I'm not going to choose one because when I was testing this and I created a one second video it just failed, so we're always
06:01
going to choose the first frame, of course you could set minimums and stuff like that but we're just going to grab the first frame from this video, so we grab the frame from this video, we export it to the public disk and nothing will happen here until we invoke save, so we want to save this to a stills directory and we want to generate again a uuid for that still, so we'll just do that
06:27
and then we'll add on .jpg to the end, so this is all we need to do to capture a still from a video and then save it to a particular disk in a particular location, so this should actually work, so let's go and just make sure we've pulled in the right ffmpeg, so I didn't and let's come up here and just get rid of this, we'll get rid of the ffmpeg php library and we should be good, that's
06:56
why we didn't get auto complete, okay let's try this out and see what happens, so I'm going to go over and just start to record again and we'll capture our screen again and let's start recording and let's save this out, so it's at that point where that is going to go ahead and run that job and we get unable to probe and let's just have a look here, oh yeah, so what I have done is put local
07:23
instead of public, so just called the wrong disk, okay let's try this again, so I'm actually going to clear the database out here before we do anything and let's also clear the file system out as well because we've got a few videos here hanging around from testing and we'll just kind of start fresh, okay so let's capture our screen, we'll share that window, start recording, do a few
07:46
things, stop recording, save it out, okay so now we can go and look at our file system to see if this has actually been stored properly, so you can see now we've got a stills directory and sure enough that gives us the first frame from that video, now what we're not doing if we head over to the database is storing this in our still path, that is why it's still not showing here,
08:09
so what we want to do is hook in and this library is really good at allowing us to do this, before we save this we can say after saving and then we can run a callback with that data to do something with it, so the two things that we get into here are the exporter which we don't really care about, the second thing is the media which we'll type in here and pull in, so I'm just going
08:31
to die dump on that media just so we can see what we're talking about and we'll come back over and we'll capture another video, so let's do something, save this out and there we go, so we've got this media here with this path which we can then extract and put into our database, so that's been stored, so now what we can do is say this video update and we can pass in
09:02
that media and if we just take a look at this object there's probably like a get path method which there is, so we're going to say get path like so, so now not only will it open it, extract the frame and save it out, before we save it we have an after saving hook which will give us that media that we can then store the path for, so if we come over to our videos let's just get rid
09:29
of what we've already done and let's make sure we clear out our file system as well, so I'm going to get rid of this stills directory and I'm going to get rid of this videos directory and let's start from scratch, so capture a video and let's go ahead and record, let's stop the recording, save this out and there we go, so now
09:52
that still path is in the database we actually see that and from the css that we created earlier you can see that this covers it, it's clipped it slightly but that's okay, we want each of these videos to be exactly the same width and height and of course you can increase these and change this around if you want to, so there we go, that is pretty much the process of all of the things
10:13
that we set out to do using that library and using ffmpeg to do this, really, really easy to do with this library, so just to recap over on our video observer once this video has been created in the database we then forward this over to this job which grabs the video, grabs the frame and then resaves the location of that still back into the database.

Episode summary

In this episode, we're going step-by-step through the process of capturing a still image from a video file using FFmpeg within a Laravel project. First, we make sure you have FFmpeg installed on your system, and show you how to locate the binary so the Laravel FFmpeg package can access it correctly. We also walk through package installation and explain the importance of setting up your configurations to point to the right FFmpeg and FFprobe binaries.

Once we have everything installed and configured, we shift into coding. We create a Laravel job dedicated to generating a preview image for a video—basically, this job grabs a frame from the video file (the first frame, for simplicity), exports it to a public stills directory, and saves its path. We talk about using the Laravel FFmpeg package's nice API to make this really easy, and also show how to update the database with the new still's path right after saving.

You'll see us make a few small mistakes (like pointing at the wrong disk), but we fix those and validate that everything works by uploading and processing a few test videos. By the end of the episode, every uploaded video ends up with a still image, properly saved in the filesystem and referenced in the database. Plus, the video stills show up in the interface as planned. So, this covers everything you need to extract video frames and link them up to your models.

Episode discussion

No comments, yet. Be the first!