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
04. Getting a screen stream

Episodes

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

Transcript

00:00
Now that we have set up our state so this triggers and swaps everything over and shows us the preview, watch how easy this is to now capture our screen. So we're gonna go ahead and head over to our button section here. Let's create out another button called Capture Screen, and
00:16
of course we're gonna go ahead and call it another method in here, Capture Screen. So let's go just up to the top here. What I'm gonna do is just modify what we did here, and I'm gonna set audio specifically to false because we're gonna be capturing a separate
00:29
audio stream, and let's go ahead and just duplicate this entire function across and call this Capture Screen. We'll do the same thing here with the video and audio. We want the video, but we don't want any audio,
00:41
cuz we're gonna be doing that separately and putting them together. The same thing happens here with the state stream. The stream we get back is exactly the same, so that's gonna go into our state. That computed property is then gonna say we have a stream, and
00:55
it's gonna swap over the components that we show. The only difference is the getUserMedia part of that. We do not call this method. Instead, what we do is we use getDisplayMedia, and
01:06
that is pretty much what we need to do. So let's head over to here, and we're going to click Capture Screen. Again, the browser will prompt depending on the browser you're using. This will look different, but let's go ahead and share this window.
01:18
Click on here, the stream is now active. The computed property is true, and it shows us our video preview. It really is that easy. We just have a slightly different API, so we unfortunately need to call
01:30
two different methods depending on which thing we're capturing. But because we've used our state to keep things nice and tidy by setting this stream in here rather than trying to attach this directly to a video object, it works really, really nicely.
01:45
So there we go. That's how easy it is. Now we've laid all the foundations for this to capture our screen instead of our webcam.
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.