Build a Webcam and Screen Sharing Site With Inertia
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
So in this video we're going to be building out a video and screen sharing app. Now essentially what this allows you to do is either choose your webcam or your screen,
00:08
you'll see a preview of that and then you'll be able to record this, save it out with a title and a description and then share it via a link. So we're going to dive straight in and have a look at what this looks like and then we'll get building this completely from scratch.
00:22
Okay so let's go over and hit login and I'm just going to sign into my account here that I've already created. The first screen here just lists out all of our videos, of course I haven't recorded anything just yet. So we're going to go and head over to the capture section and we can either choose webcam or the screen. So we can toggle audio enabling if you don't want to record audio
00:44
and that will just cut out the audio stream completely and not merge that in. So I'm going to go ahead and just choose capture webcam, of course because we are capturing our webcam and our audio we're going to need to allow this to actually happen. So let's go ahead and do that and as you can see there I am on the screen looking a little bit different.
01:02
Okay so we can go ahead and start recording here and that will just start capturing this video. So let's go ahead and hit start recording and just give the camera a wave and then I'm going to go ahead and immediately just stop the recording. So what that's now done is it has captured all that video and audio data and it's given us a preview of this. So we can click on
01:20
this and we can play it back as you can see. Now once we've done that this will automatically generate a video title for us and a description just so we don't have to put one in if we don't need to and then we can just go ahead and save this video out. So what that's going to do is a couple of things. It's going to capture a video still from this so we can see this in a preview
01:39
in our list so it will get the first second from the video so we can actually kind of see what's happening and it will also encode this on the back end as well using a job in Laravel and the benefit of that is that we can encode it to a format that will work in all browsers. So we're really looking at browser compatibility here. If we were to save this out and share it to someone
01:58
and we hadn't encoded it properly we're going to end up not being able to play on certain browsers which is kind of defeats the point of this. So I'm going to go ahead and save that out and in the background that will go ahead and upload. We don't show any progress here but we have our inertia progress at the top and there we go. So we've now got this video you can see that the
02:16
still image from this has been captured and saved and it's showing here with all these details. Now I can click through into this video now and of course I can update the details of the video. I can delete the video which will also clear up the video files so they're not on our file system anymore but we can also share a link. So if I just go ahead and copy this link and open a new tab
02:35
this is what the person that you're sending the video to will see. So they'll see this they'll be able to of course play the video whether that's your webcam or your screen and they'll see the basic metadata associated with this video. So let's just go back to the capture section and I'm going to show you what the screen section of this looks like. Pretty much the same deal we can share
02:54
a window or the entire screen this works differently in different browsers they have different implementations of the API for this so within Chrome it's a little bit more flexible you can choose which screen to share but I'm going to go ahead and just share this particular window here and start that capture and as you can see because I'm recording here it's created this sort of
03:13
infinite mirror effect but I can start recording in exactly the same way it's going to work in exactly the same way and when I stop recording we just get exactly the same thing. So the functionality is the same between webcam and screen the save process is exactly the same as well we just need to decide what to capture and what to share and there we go you can see that I've got
03:34
this and of course I can share that with anyone I want and the audio here although I'm not going to play it has been captured alongside of these streams they've been merged in and they will be able to hear what you're saying through your microphone as well so that is pretty much what we are building it's not too tricky to do this but there are a couple of things along the way
03:53
that we need to figure out specifically for browser compatibility that's really really important but this is going to be pretty fun so let's dive in we'll get a fresh Inertia app set up we'll do some layout stuff just to get everything how we need it so we can just dive in and directly start capturing our video our screen and saving these videos out so they can be shared
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!

Episode discussion

No comments, yet. Be the first!