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
15. Generating a sharing link

Episodes

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

Transcript

00:00
OK, let's generate out a shareable URL that we can put on this page, copy and paste, and give to anyone to view this video. Now, the first thing that we're going to do
00:08
is generate out a controller that we can use to actually show this. Because in our API resource, we're going to be generating the link to this
00:16
so we can share it on the page. So it makes sense that we have a page for this to start with. And we're going to call this video View Controller. So this will be just responsible for showing
00:26
the video, the title and the description, and nothing else. This will, of course, be done on anyone else to edit the video or anything like that. So let's head over to our web routes.
00:34
And of course, we're not going to put this inside of auth middleware. We'll just grab one of these and put this outside of here. And let's just say View and then the video itself.
00:43
So we're still going to be using the UUID for this. So let's say Video View Controller. And we'll call this videos and dot view. Now, with this name, what we can now
00:52
do over in our video resource, we can create out a share URL. And we can use our route helper in here to say videos view. And because we're working with an API resource, the entire object that we get is the thing itself.
01:08
So we can just pass this directly into here. And that will be passed in properly. OK, so if we update our video view controller to just have an invoke magic method,
01:17
I'm going to head over to show.view. And somewhere up here, just dump this link out. So share URL. And if we head over, there it is.
01:26
Great. So we're going to grab this, put this in a new page just so we've got it there and we can actually use it. We'll change around the method in a minute.
01:34
It doesn't really matter too much. And we want to create our kind of container for this. So I'm going to get rid of this. We'll put this up here.
01:42
And I'll grab everything that we've got here and just create out a new kind of container that we can put this URL inside. And we're going to have this in an input
01:53
so it can easily be copied and pasted. But we just need to be careful about where we're putting this. OK, so that's in a new container. Let's just space out these items by six
02:03
just so they sit apart from each other. And in here, let's introduce an input where this gets bound in. Now, the problem is we can't use our text input component.
02:12
Because if we look at this, this requires a model to be passed in. And it's required. So what that would mean is us having
02:19
to bind this into an input where bind with a V model doesn't really make sense. So what I'm going to do is I'm still going to use the input label.
02:27
So we can still include the input label for the share URL. And we can say share link. But I'm going to create a custom input here and style it up in a very similar way
02:39
just so we can use something like V bind on the value rather than V model. It doesn't really make sense. So let's grab the share URL, put that in there,
02:48
and let's take a look at that. And you can see that that gets put in there. Now, what we can do with this is we can make it read-only because we don't need this modifiable.
02:56
And then we can just apply some classes to this from our text input just to make it look similar. So we can grab our entire class list here. And we can put that directly onto that.
03:08
And it looks very similar. Now we're just going to say width full. And we'll set a margin top of 1. And there we go.
03:15
We have our share link. So just before we move on, let's make this so when we click it, it highlights the entire thing. We're not going to do click to copy just yet.
03:24
But we can very easily do this in line with view. So we can say V on click. Now, when we click, we get an event through which we can access directly in here.
03:32
Then we can say target, which will grab the input itself. So this will now be an HTML element. And on there, we can just use any of the methods that we have within JavaScript, like select.
03:41
And that will just select everything within this input. So when I click on this now, everything gets selected. We can easily copy it, paste it over to wherever we want to share it to.
03:52
OK, now that we have got the link in here, let's go back and, first of all, fix our route up, because that is patch. And it needs to be get.
04:00
And we end up with a blank page, because we're not rendering anything. So we can now start to build this page out. Now, we're going to have an issue here,
04:06
because we're going to need to use our guest layout. And this isn't quite set up for this. But I'm going to show you a way that we can use this existing guest layout
04:13
and modify it very slightly. So let's return out a inertia response in here. And we'll put this inside of the videos directory. And we'll call it view.
04:23
And we need to pass the video down. So again, we're going to grab the video from root model binding. We're going to pass the video down
04:31
so we can access it as a prop. But again, we're going to use our API resource. So let's say video resource make. And we'll pass that video through.
04:41
Great. OK, so let's create out this component. So we'll go down here and create view.view. And we'll bring in our script setup section.
04:53
We'll bring in our template. But we can't use our authenticated layout. So we can't have it looking similar to this. Because when we share it with someone,
05:02
they're not going to be necessarily authenticated. We don't want them to be authenticated. And all of the navigation will break. So we're going to use our guest layout here.
05:10
So let's go ahead and bring in our guest layout from our components here. And let's just put something in here just to see what this looks like for now.
05:18
So let's go over. And it looks like this. So it's got video share, which is great, because that links back to our home page for a guest.
05:26
But this container is a little bit too small. Now, what we can't do is, with this guest layout, directly create or attach a class to it and have that trickle down into the component
05:38
here that will just affect the entire page. So as an example, if we head over to our guest layout, you can see that this has, on the inner bit, a max width of medium.
05:48
That's what we want to modify. If we pass a class down with view attribute inheriting, this will be added to the top level of this. So if, for example, I say small max width
05:59
to Excel, which is probably about the size that we want, what that's going to do is it's going to modify the entire outer container. That's not what we want.
06:07
So what we can do is, first of all, define some options inside of this component, this guest layout component. And we can disable inheriting attributes.
06:17
So we're going to set that to false. Now, that will fix the problem, but we still won't be able to pass the data down to this inner container. So what we're going to need to do is, in this inner container,
06:27
manually use vbind without specifically specifying what we're binding in. And we're going to set that to the attributes that we get through into here.
06:36
So this attribute, if we just dump it up here, will contain, and we'll get rid of this for now, the attributes that we're passing down. So if we just do vbind attributes,
06:48
that will just kind of spread in all the attributes and bind everything for us at the location that we want, which is this inner container. So when we set this up now over in our view,
06:59
we can set this to important. And that should make it bigger. So let's actually see what we've got here. We've got small, max, width, medium.
07:07
Try and make this even bigger. And it might not even work unless we, yeah, there we go. So small, max, width, 2xl, 3xl. I think we'll leave it at 3xl.
07:17
That should be enough. OK, so now that we've got this in here, we can just start to accept in our props and pass the video data down.
07:25
So we're going to say define props and video. That's going to be an object. And in here, we can access our player. Now, we've already seen that over in show.
07:36
So if we look for our video here, we can pretty much just grab this, paste it in here. Might need to adjust it slightly depending on the video width.
07:43
So you might want to add in a width of full specifically. And there is our video. Great, so we can play this. It works.
07:51
Obviously, it's a public file. So now we can just come down here and output some basic metadata about our video. So I'm going to go ahead and create out an h2 again.
08:00
And in here, we'll put the video title. And we'll have a paragraph with the video description. Again, we could set a conditional on this. If you weren't making the description required,
08:14
you could just say if video description. And then, of course, that just wouldn't show. So let's style up the header here. And we'll make font semi-bold.
08:22
And we'll set the text to large. And then for the paragraph, we'll just leave that as it is actually, because that will inherit what we already have.
08:31
So there we go. And we can just go ahead and spread these out. So space, y of 6, say. And there we go.
08:37
So we've got the screen recording title and the description. And of course, we can play this. And this entire page is public.
08:44
So the user, of course, doesn't need to be signed in. But we get a little bit of advertising so the user can go through and use this as well. OK, so now that we've done that, that's
08:52
pretty much the entire flow of sharing this video. We can grab the link from here, share it to someone. And of course, they can just start watching the video over on this dedicated page.
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.