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
11. Listing recorded videos

Episodes

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

Transcript

00:00
Before we work on our encoding stuff, let's list these videos out.
00:04
So at least then when we get to generating our still image from a chosen frame in the video, we can see it on this index once we redirect it back. So let's go over to our controller
00:17
where we have our video index, and let's just start to pass this data down. So let's go ahead and say videos. Now what we're not going to do is just
00:24
grab the videos for the currently authentic case user and pass them down. We're going to create an API resource so we can structure this data a little bit better.
00:31
So I'm going to bring in our request object here so we can access the currently authenticated user, and we're going to go ahead and create that API resource and wrap all this data.
00:40
So if you've not worked with API resources before, let's say make resource, and we're going to call this video resource. Let's open that video resource up
00:50
under app HTTP and resources. And inside of this to array, what we can basically do is just tell this resource how we want this data to look. So let's go ahead and include all the things
01:03
that we're probably going to need when this data gets down to the client side. That's going to be the ID, the UUID, stuff like the title and the description.
01:13
So let's just change these over, and we're going to need that still path. We are eventually going to want the video path, although we need to encode that and re-save it
01:28
a little bit later on. And we want stuff like when this was created, so created at. And we'll slightly modify this because this is a carbon object. We'll say to date time string so we get something
01:42
in a nicer format. So that's how we want the data to look when we get down to the client side. Now we can just wrap this in here.
01:49
So we can access the video resource. This is going to be a collection of data, so we can use the static collection method. And then we can just pass the data down
01:58
that we get back from our user. So we'll say request user videos. We'll scope this by latest, so we get the latest at the top. And then we'll just say get.
02:08
Get returns a Laravel collection. That puts that into that collection. And then for each of these videos, we'll just end up with a nicely formatted video.
02:15
Now I've gone ahead and cleared out the database here, just cleared up all the files and stuff. So we won't see anything in here just yet, but let's dump this on the page.
02:24
So let's head over to the video index. And at the top now, because we're passing this down, we can use define props to access these videos. Now this is going to be an array of videos.
02:34
It won't be by default because this will be wrapped in a data object. I'll show you that in a second, but for now, I'm just going to dump the videos out that we have.
02:44
So on here now, you can see that this by default gets wrapped in a data object. So this is technically an object with a property and an array inside of that.
02:52
We don't really want that because it kind of gets in the way. So over in our app service provider, under boot, we're going to reference the JSON resource
03:01
and we're going to say without wrapping. So that will globally set all of our resources to not wrap with that data property. And sure enough, we end up with an array.
03:10
So now when we capture a video, we should see that data roll in. So let's capture our screen and we'll start the recording, do a few things, stop the recording,
03:21
save this video out, and there we go. On the index now, we have an array with all of the data that we need. Of course, with our still path not available just yet.
03:31
So let's go ahead and work on the design for this. And then as we get to encode the video, capture that still, we can fill all of this data in. So let's start to iterate through these videos.
03:41
Now we don't want to show anything if we don't have any videos. So the first thing I'm going to do is check the video length and have an else in here to show a message
03:54
if we don't have any videos yet. So let's just create out, well, we'll create this as a template. And then in here, we'll have a div
04:05
and we'll send to the text, set the font to medium. And then in here, we'll say nothing here, ready to, and then we'll include a link to capture your first video. So let's go and wrap this in an inertia link.
04:21
And we already know where we need to link through to, that's just the capture section. Let's create that out in there. And we'll set the href to go through to videos and create.
04:35
Okay, great. So I'm just going to say, if not videos.length, just so we can see a preview of this. And if we head over, that doesn't look great.
04:43
So let's just switch stuff around a little bit. So I'm going to go ahead and grab the whole template here where we're doing them, if statements, I'm going to put that here
04:54
and then we'll have the background white stuff only if we have videos, because that will create a nice wrapper for each of our videos.
05:02
So we have the following. Now that doesn't look great at the moment just because we haven't imported the link component from inertia, but there we go.
05:11
And then we can just style up this link and we'll just set this to text indigo 500 just to match everything else. Okay, so we can click through to capture a video.
05:23
Right, let's change this back over to videos length. And this is where each of them videos are going to go. I might actually bump this down a little bit even more because I think that's probably
05:33
going to look a little bit better. We can change it around if we need to. So we're going to iterate on each of these things here if we have videos.
05:42
So let's do a V4 video in videos. We'll key this so we don't come up with any rendering issues and we'll key that by the ID or the UUID, it doesn't really matter too much.
05:53
And that will then iterate over each of these. So now we just need to style up these and we're pretty much done. So inside of this inner container,
05:59
let's set this to flex with items start and we'll go ahead and set a space on the X axis to six because we're going to have the video preview on this side and then we're going to have the details on this side.
06:13
So if we just check that out, that is where that video preview is going to sit with the still image that we're going to generate soon. And then the details will be on this side.
06:21
Okay, so let's fill in the details first of all. We'll go ahead and create out an H2 in here and that will just be the video title. So let's output that
06:29
and we'll go ahead and apply some styles to this. So we'll set font to semi bold and the text to large. Down here, we'll have a paragraph with the video description.
06:41
Now we set that as required, but if we don't set it as required, so if you choose it not to be required, you could do a really simple,
06:49
no description fallback if this value is null. So it's entirely up to you. I'll leave that in there anyway. And then we're going to have a paragraph down here
06:58
with a class of text gray 600, so slightly lighter with small text and a margin on the top. And this is going to be when it was recorded. So we'll say recorded on,
07:08
and then remember over in our video resource, we added the created update. So we can pretty much just say video created and that will format that out nicely for us.
07:19
Okay, so now that we've done that, let's work on this kind of video wrapper. Now the thing about recording videos is they're all going to be in different resolutions.
07:27
So the screen will probably be a different resolution to the webcam. And what we want to do is kind of fit this into this container regardless.
07:35
We want all of these videos to be the same size, but we want to kind of scale these up with CSS to sit nicely. So what we're going to do is something slightly different.
07:44
So inside of this container, let's create out another div which will represent this actual video. We'll set a specific height and a specific width to this.
07:52
So we control the height and width. We'll set a background of black on this just so we can see it right now. And we're going to set a background of cover
08:01
and we'll set rounded to large. Now at the moment, let's just take a look at this. That's what it looks like. Our goal is to get the background image of this to scale up.
08:10
So we don't have a background image at the moment, but what we can do is we can bind in the background image with the style and reference that image. So to do this, we just want to say background image URL.
08:23
So much like we'd write if we were just doing CSS normally, and let's just make sure we back tick this and into the URL will be the video still path. So what that's going to do
08:34
is it's going to dynamically set that background image, which obviously we can't do with any of our classes normally, but BG cover within Tailwind
08:42
will cover the entire container, but maintain the aspect ratio, which is really important. So I'm going to go ahead and get rid of ABC from here, because this is kind of just like a placeholder.
08:52
We're not using a direct image tag. So if we come over now, obviously we don't see anything, but once we get to the point where we are generating that still image out
09:00
and that gets put into the background of here, it should cover this nicely without any distortion in that still. Okay, so there is our video.
09:09
I'm going to go ahead and just capture another one just to make sure everything looks good when we are iterating over these, and then we're pretty much done
09:16
and we can start to capture our stills. So let's save this out. And yeah, let's have a little bit of spacing between these. So let's say space Y of two,
09:26
and let's bump that to three. I think that looks fine. So now that we have these iterated out, let's go over and look at our job,
09:34
which is going to create that still. And then when we're redirected back, we will see a nice little preview in each of the videos that we've recorded.

Episode summary

In this episode, we're building out the video listing page, so any videos that get recorded will show up cleanly on the index.

First, we set up the process for passing video data from the backend controller to the frontend. Rather than just sending all video records directly, we use a Laravel API resource to format the data in a nice way, including details like the id, uuid, title, description, still path, and creation date. We also tweak the JSON resource to send the array without an extra wrapper, making things easier on the frontend.

Next, we head to the frontend and start setting up the listing UI. We add a tidy little message if there are no videos yet, with a link to capture your first one. When there are videos, we loop through them and display their info: title, description (with a no-description fallback), and when they were recorded.

For the video previews, we set up a styled div that will eventually show the video still image as a background. To make sure videos look good regardless of their original resolution, we use Tailwind's bg-cover to scale things cleanly. Right now, the still image paths are placeholders, but once we generate those later, they'll fill in automatically.

By the end of the episode, we've got a functional (and pretty slick looking) video list, ready to show all your recorded videos, complete with the proper layout and fallbacks. Next, we'll move on to generating those still images to finish off the experience!

Episode discussion

No comments, yet. Be the first!