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
10. Storing 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 our task now is to submit this form, send the video title and description to the back end, store the video and then move the video file over to the public file system. We'll also attach a UUID for the video so it's a little bit more secure. We're not going to go into things like uploading to any third-party providers with tokens or anything like that but we'll generate a UUID
00:23
for this video. Okay so we've got a lot to do here let's go ahead and get rid of the form that we're dumping on the page because we know that that is all good. And in here we're just going to create on a submit and we'll prevent the default behavior. We can reference our form, we can post this down to a location and then we can tidy up afterwards if we need to. So that is what we're going to be
00:45
doing here. I'll not do that yet because we don't know where we're posting this down to. So let's go ahead and create a controller which will store this video. So we'll create a video store controller let's hook this up in our routes. So we'll create a route out here to post through to videos, switch this over to our video store controller and of course change the name over. So we now know where
01:10
we are posting this data down to that's videos.store. Okay so in our video store controller we need to do a couple of things. So let's bring in our invoke magic method. We need to validate this which is really important because we need to know that the video is in the correct format, the title is required, all that kind of stuff. Then we need to store this in the database. We don't even have a
01:32
model yet so we'll be creating that out. We need to move the file to our file system so that's the video. We need to move that over to a new location and then after that's moved the encoding process will be triggered and that's it to be honest. We just return back and then we can tidy up the client side. Okay so we'll leave validation out just for now. Let's look at the storage process
01:56
of actually storing this video. So I'm going to bring in our request in here and let's work on our model so we can actually create this out. So let's go ahead and make out a model in here and that's just going to be called video and of course we'll create a migration alongside of that as well. So let's open up our create videos table migration and let's fill this in with all the data that we
02:20
need. Okay so we're going to be storing a uuid for each of the videos that we create so let's create out a uuid type column in here and this needs to be attached to a user so we'll go ahead and add in a foreign id, we'll call that user id and we'll constrain that at the database level. We need a title of course so this is the kind of basic stuff and we're going to need a description
02:44
as well which is going to be a text type so let's switch that over to text and we're going to need a video path so once we store this video in our file system when we store this uploaded file which is now going to be an uploaded file because we converted it that's going to give us back the location that it's been stored in so we can just create out a string in here called video path now
03:09
as part of what the functionality that we're creating we're also going to have a still path which is just going to be an image that we capture from this video so we can see a preview of it otherwise we're not going to be able to show this in our list so we're going to have a still path but that's going to be nullable because we're going to be generating that separately so once
03:29
this gets saved in the background this job is going to create the still but that won't immediately be available so we'll set that one to nullable okay i think that's just about it to be honest let's go ahead and run our migrations so we'll migrate this out we'll go over to our user model because we know that a video belongs to a user so let's create out a videos that has many videos
03:55
so we can access that and store it on behalf of the user and with that done in here we can just now grab the currently authenticated user and we can go ahead and access the videos and we can create out a new video in the database so with this let's pull this down and we'll say request only that kind of makes it a little bit easier so we don't have to build up a huge array so we'll say title
04:17
and descriptions that will put the title and description in but then we want to go ahead and add on another array and specifically give in the video path which will be the result from the video upload so we'll say video path in here and let's say request video so if we remind ourselves over here if we look for our form that is called video that's going to be an uploaded file actually what
04:42
i'm going to do is go ahead and just die dump on this just so we can see that this is actually an uploaded file first of all before we do any of this stuff and just before we forget let's make sure we just unguard everything in here so we'll say guarded and set that to false you can add in fillable in here if you need to okay let's go through the whole process dump the video and
05:00
then we'll get it stored so let's go over here and just capture our screen and share our window and then we'll start the recording wave around a bit stop the recording when we hit save now there we go we now have an uploaded file being sent well an uploading file being created from that video that we are now sending down great so we have that and that means that from the uploaded file
05:26
class we can use any of the methods on there to store this in whatever location we choose so we are going to store this publicly as and we're going to put this in a videos directory we'll see where this ends up in a minute now we need to give it as the second argument a file name so we are going to choose
05:47
to use the string helper and we're going to generate a uuid and we're just going to add on .mp4 now we're not at the point of encoding yet but that will just create out an mp4 file for us in storage that we can later encode and then we can choose the disk and for now we're just choosing the public disk so these will be publicly available to anyone even if you don't want them to see them
06:09
but the uuid will help just to kind of counteract that so now that we have done this that should then store that file which we'll see in a minute but it will also set the video path inside of our video model so of course because we're working with inertia we're going to go ahead and return back here in fact we can direct the user straight over to the video index i think that kind of makes
06:33
sense rather than resetting all the state so we'll just say videos and index so redirect them back to that video index where they'll see their file okay we're not going to head over to the browser just yet and try this out because if we check out our database and our videos table we need to create this uuid when we go and actually store a video we don't really want to do this at the
06:54
point we create it it's kind of implicit for any video we create so we are going to be using a video observer a little bit later to do some other stuff but we may as well create one out now attach it to our video and always generate out a uuid so i'm going to go ahead and make out an observer in here which just observe a particular model so this is going to be a video observer and
07:15
we can give the model name in here as video to get all of the methods created for us so what we need to do is register this observer so we can do this in our event service provider app service provider it doesn't really matter all we need to do is just use the name of the class say observe and then give the video observer that we've just created like this so now every time some sort of eloquent
07:39
event is going to happen this video observer is going to allow us to pick up on these so for example when we create the video so when it gets created we can start the encoding process when the video is deleted we can start the process of clearing up any of the files we'll be doing that later now i'm going to get rid of all of these methods in here because i like to create these
08:02
out from scratch and not have any hanging around i'm going to create out a creating event inside of here and we'll get the video through in here that we are just about to persist in the database now just before this gets persisted in the database what we can do is then manually set the uuid to a string uuid in here let's pull in the string helper from illuminate support so now just before
08:28
that video gets created we're assigning an id and we're done okay so let's just try this whole process out of capturing this and then we'll go i think as well i just saw that i've spelled guarded wrong so make sure we spell guarded right or that's just not going to work in terms of filling that data okay so let's allow this share our window and let's start the recording and let's stop it
08:51
and let's save the video and there we go we're redirected back to our video index where we'll eventually be able to see that video let's check the database first of all so you can see that the uuid has been generated via that observer we've got the title and the description in there which we left as default we also have that video path so that video has now been moved to that public
09:10
videos directory on our file system with a uuid as the file name and let's just find that and see where it is and most of all make sure that the video is actually working properly so if we go over to our storage app public videos there we go we've got a couple already just some with some testing that i did but as you can see the video is working so it has actually stored this video
09:34
correctly so i'm going to go ahead and just delete these videos because i don't too many files hanging around here and that is the process of sending that down and actually storing the video now we really need to think about validation that's super important so i'm going to go ahead and create a really quick request object in here that we can swap over to keep things nice and tidy
09:56
and we just want to make sure we're validating the title the description and the video as well so let's make out a request for this so php artisan make request and we're going to call that video store request all that means if you've never worked with form requests before is that we can just swap over the request here and we can do all of our validation inside of this object rather than
10:17
polluting our controller with this so if we open up our video store request we're going to authorize this because it's already under middleware we already know that we are allowed to create videos but now we can just start attaching our rules so let's just attach some really simple rules to the title we'll set a max of whatever you want in here we'll do the same for the description as well
10:38
which we'll set as required you don't have to but we'll set a max to this as well but the one we kind of want to think about is the video and this is incredibly important i said a little bit earlier on in the course that when we record video with the browser different browsers have different formats now although we have set the mime type to a video mp4 really just as a kind of placeholder
11:00
each browser will have a different format that it records in and this will be picked up properly on the back end with the mime type that we want so let's go ahead and just start to add the rules in here and then we'll talk about the kinds of types that the browser sent through so in here there's a couple of ways that we can validate file types i like to use the file rule directly from the
11:22
validation section of the framework and in here we can say types and then we can just give a list of types now in here you can also set the max size if you want to all that kind of stuff i'm not going to worry too much about that you can add it in later based on what you want but let's talk about the different file formats now we've got mp4 so we're going to add that in and we also have webm
11:44
and we also have mkv as well so i think as far as i remember webm chrome mkv safari and mp4 for things like firefox and anything else you can add more in here if you do some more in-depth browser testing but just make sure you include these because otherwise the user will record a video and then obviously not be able to save it so we've got them rules in there now for the title and the
12:07
description and stuff and we should be good and that's nicely tucked away in a form request we've moved this to the file system with redirected back so that is our controller okay let's try this out so i'm going to go ahead and capture another video and just make sure it saves properly so let's go and just start the recording here stop this and we'll go ahead and save this out
12:28
and there we go i'm just going to go ahead and capture one more time just to make sure our validation rules are coming through nicely so let's get rid of the title and the description and save this and yeah there we go so the only thing we could probably improve on here is preserving the scroll so let's go back over to our create here and down to our form and
12:50
let's go and just add in a couple of options in here when we post this through we'll set preserve scroll to true and all that's going to do is just keep the same position on the page when we hit submit with inertia okay there we go so all of that is working nicely we're sending the video down we know that the video gets stored in here so we know that that is coming through properly
13:11
we're validating now now we're going to talk about encoding and capturing that still that we can use to store so over on our video index we've got a nice image and of course we can play this in all browsers as well really important so let's go over and cover all them things next

Episode summary

In this episode, we're tackling one of the core features of our app: letting users upload and store videos. We start by wiring up the backend so that when a video is submitted (with a title and description), it's properly sent, stored, and handled securely. We make sure the video file gets saved in the public filesystem, give each video a UUID so filenames aren't easily guessable, and get everything ready for later encoding.

We walk through creating the necessary controller and database migration, add all the needed fields to our videos table (like title, description, file path, UUID, thumbnail path, and user association), and run the migration. Then, we set up the user relationship so we know who owns which videos.

A big chunk of the episode is spent ensuring that when a video gets uploaded, it actually gets moved to the right spot in the file system, and our database records what's where. To handle UUIDs automatically, we set up a model observer that attaches a UUID to every new video. We test the workflow end-to-end and confirm everything is saving and redirecting as it should.

To make sure junk doesn't get into our database, we add proper validation with a Form Request, checking for video type (supporting mp4, webm, mkv for best browser compatibility), required fields, and sane limits. We also tweak the frontend so when forms submit, the scroll position is preserved, making for a smoother UX.

By the end of this video, uploading a video file with all the relevant info is fully working. Next up: encoding the video so it plays everywhere, and grabbing a still image to preview our uploads on the index screen.

Episode discussion

No comments, yet. Be the first!