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

We'll create a couple of pages so we can just focus on building out what we need to build. So the first thing that I'm going to do is go ahead and use the Laravel installer to create a new site and I'm going to call this video share. So we're going to go and use the Laravel Breeze starter kit here and we're going to use view with inertia that will give us a nice base that we can start to work on. So we don't need to worry about dark mode or SSR or anything like that you can add them if you want and we'll go ahead and just get that installed and just wait for that to finish.

Okay let's go ahead and choose MySQL as our database here. I already have created out a database called video share if you haven't already and you're following along you'll need to do that as well and we're just going to wait for this to finish and then we'll get our default migrations running. Okay so that's our app created, let's head over to the browser and of course we see the default landing page for this. So we're going to go ahead and register an account but obviously first we need to just go ahead and migrate our database.

So let's get this account created so we are booted into our dashboard and we can start to change stuff around. Okay so we're in our dashboard the first thing that we're actually going to do is go ahead and sign out now that we're in we're going to modify it over the home page. So by default within a fresh project with breeze we get this closure with this render we're going to go ahead and create our home controller here just so everything's nice and separate. So we'll go ahead and make out a controller and we'll of course call that home controller and then we're pretty much going to take everything within here and just pop that straight into that home controller just so we don't have this floating around here.

So let's register that as our home controller and we'll go ahead and give this a name of home. So if we open up our home controller let's create out an invoke magic method put this in here and I'm just going to swap this over to the inertia helper that's just my preference. Now with this we're going to get rid of all of this can log in can register stuff because we're not going to need that over on our home page and I'm going to switch the template name over to home and let's just fix that up as well. So just simplifying everything just so we can create a really simple home page here.

Okay so in our files let's go down to where our pages are here and let's rename welcome over to home and we are going to hop straight back over to the browser sign out go back over to our home page and let's check this out. Okay so unable to locate home view that's fine we just need to make sure we are running npm run dev while we are developing. Okay so over to our home page we should just see an empty home page here let's go over and open up our home dot view page this isn't working because of course this is now using all these props that we've just deleted so we're going to go ahead and get rid of these and we're just going to swap over some of the stuff that we see. Now if we just take a look at this entire thing we've got this top bar here which we want to keep but then the rest of the content here we want to go ahead and get rid of so I'm just going to get rid of all of this content inside of here

and I'm going to switch over the can login stuff to get rid of that so let's get rid of the can login and we have can register here as well and that should be just about it so what we should end up with here if we just take a look at our console is an HTTPS error. Okay so let's work on that first of all now a little bit of background about how the video capture and the screen capture stuff works is it requires HTTPS which is why I open this as HTTPS now depending on the way that you've set this up locally you're going to need to make sure that you can access this site as HTTPS now for me I'm running laravel herd so over in my vite config I'm just going to come over to the laravel section here and I'm going to add in the detect TLS option and just give the domain name of this so that is videoshare.test that's pretty much all you need to do if you're using something like laravel herd or valet so if we just give this a refresh now you can see sure enough this works so we've got a nice home page here let's hop back over to the home page and start working on this again so I'm going to go ahead and get rid of the background here because I'm not going to need that and we'll get rid of the dark version of this as well because we're not working with dark mode let's take a look at that that looks okay to me we've got a slight issue here with this because this typically sits on a dark background so we're going to go ahead and get rid of the dark hover stuff just inside of here so let's get rid of the dark hover with this and let's go down to this dark hover here as well and of course you can set this home page up however you want but that should now work so let's go down to the register part as well get rid of that and there we go okay great so what we're going to do is inside of this page create our application logo in the middle I'm

going to switch that over as well so if we head up to the top here outside of this small fixed part let's go ahead and create out a div in here with an inset of zero with tailwind that will do a full width and height we'll say flex item center so our logo can sit in the middle and we'll say justify center as well so that justifies in the middle and we'll set the height to screen so this is where our logo is going to sit directly in the middle of the page so we actually have an application logo component over in the component section and that just has a svg image in there so we're going to go ahead and add in the application logo in here so let's pull that in from our components and that's auto imported for me up here but you'll want to go ahead and import it if your editor doesn't and that will just show the current logo on the page it doesn't show at the moment just because we need to apply some classes to get this working I'm going to set text to 4xl that's not going to do anything but we're going to switch this over to our own text so if we open up the application logo we're going to get rid of the svg here and we're just going to create out some text in here just to customize this a little bit so let's go ahead and say text to excel we'll bump that up for our home page as we just saw here to 4xl and I override that we'll set the font to bold and we'll set the text to grey 700 and then in here we'll just put the name of our app you could pull that from config if you wanted to but we'll just keep it really simple for now

okay so we've got our logo in the middle of the page here let's just make sure over in app.blade.php we pull in the 800 size font and that should bump that boldness up a little bit because we've got the right font in there now and let's open up our home page again and we're just going to set this to important just so we get a nice big logo okay that's pretty much our home page done we're not going to spend too much time on this it's just nice to customize the starter kit sometimes just so we don't have the default okay so we're going to head over to the login section you'll notice that the logo now is already in there you can see that we've got a little bit of spacing here just because of the height of this so if you do want to modify that everything in there is in the guest layout so we can go ahead

and get rid of the width and height because we don't really need that we don't even need fill current or text grey 500 but we can leave that in there so now all of our pages are really nicely customized whether we're registering an account or signing in which is great okay so I'm going to go ahead and sign back in we'll get these two pages created and then we will pretty much be done and

of course the logo is there as well okay so for the dashboard this is going to be our video index page where we list out the videos so we're going to go over to our routes and under this auth group because of course we need to be signed in we're going to create out another route in here we're going to have a videos index and we're going to have a videos create now create will be that

capture page that we saw earlier we'll call it capture but really what we're doing is we're creating a page specifically to create something like we would in a form and then we'll have a store to actually store the video once we're done so let's go ahead and create these two things out so we don't need the dashboard so we can kind of get rid of that and we'll go ahead and create out

our controllers for this so let's make a controller in here called video index controller and we'll go ahead and create one called video create controller to show that capture page okay let's register the roots so the first one is the index that will replace our dashboard so videos and video index controller and again we'll just name these just so we can reference them really

nicely on the client side and we'll go ahead and duplicate this down and we'll say videos slash create and of course swap that to that video create controller and of course change the name over so they are our two controllers that we're starting with so i'm going to go ahead and fill in the invoke in here really quickly just so we don't get any errors and once we've done that

when we head over to our dashboard of course this doesn't exist now we've got an issue here because now everything is kind of linked up to our dashboard so we're going to need to change some links over you can see that we'll get an error in here that the root dashboard is not in the root list so we'll come over to our authenticated layout which is the overall layout for all of our

authentication stuff and change this kind of stuff over to link through and over on our home page we might also have a link to the dashboard as well so let's change this one first so this is now going to be videos index and dashboard we'll just keep as videos that kind of makes sense let's look for dashboard in here and i think we're done with our home page so for our authenticated

layout which shows the navigation and stuff let's go ahead and say videos we'll switch these two over to videos and index and we also have some stuff in the navigation as well like the logo so that's now going to be videos index and we also have some mobile responsive stuff as well so that is also going to be videos index and we'll swap that over to videos as well so we should now not see any

errors and we should be able to click through onto our dashboard to see this now we can't click on this at the moment because we don't have a page for this but we can just go ahead and start to create some new pages so we can get rid of our dashboard we're not going to need that although it would probably be useful to grab the template for this before we start creating out any more

pages and let's create our directory called videos in here and we'll create index dot view and just paste that in we can get rid of our dashboard now because we are no longer using that so let's remove that and that should be good so if we head over to our video index controller and just return inertia render and now we're going into our videos directory and index we

should be able to click through and see that and that is now our videos index page so let's go ahead and style this page up because there's a couple of tweaks we want to make to this i kind of want to get rid of the header we don't really need that and we're going to change over the title here to videos and then we're going to just say video index and we're going to reduce

the size of this down to something like 4xl just so it's not too big let's just go ahead and rerun npm run dev here there we go okay so i think we could make that a little bit smaller and that should be okay okay so the next thing is to create out the other page so we're going to copy this entire page over and we're going to create out that create dot view render out this and we're

pretty much done so this is going to be the video capture page and we'll call this capture and we should be good let's go over to our video create controller do exactly the same thing here just return a response here with that component so videos and create and let's hook this up in our navigation so over in our authenticated layout now if we look for our videos up here

oh this is the top navigation link we'll just create another one basically so we'll call this capture and we'll say videos and create and do the same here and then sure enough we'll find our responsive link for this let's go down and see where that is and we'll copy this over as well just so we have it in our mobile navigation too so we'll swap that to create okay so there we have

capture we can click between these these are the only two pages that we're going to build but now we have a nice base to work on we can immediately jump over and start looking at how we can capture a video whether that's our screen or our webcam directly with the javascript api in the browser