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.

Episode summary

In this episode, we take what we've done so far with our state management and use it to add screen capture functionality. We start by creating a new "Capture Screen" button that the user can click. Behind the scenes, this triggers a new method, which is almost identical to the way we captured webcam video — with one key difference: instead of using getUserMedia, we're using getDisplayMedia to capture the user's screen.

We also make sure to turn off audio for this capture, since we'll be handling audio separately. The captured screen stream gets added to our state just like the camera stream did, which means all the logic for updating the UI and showing a video preview works just as smoothly as before.

We finish up by testing everything out — clicking the button, approving the browser prompt, and verifying that the preview works perfectly. It's a really clean implementation thanks to the groundwork we've already laid, and it's cool to see how easily we can switch between capturing the webcam or the screen by just switching up which API method we call!

Episode discussion

No comments, yet. Be the first!