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
03. Getting a webcam stream

Episodes

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

Transcript

00:00
Okay we had quite a lot of setup there but that means we can now dive straight into the good stuff and we're going to look at how we capture a video stream directly from the browser. So let's go over to our create page, we're exclusively going to be working in here now
00:16
and let's just create out a couple of buttons, we'll just scaffold out what we need, so I'm going to go ahead and create a container in here, this is going to contain two buttons, now if you've not worked with the breeze starter kit before this gives us a couple of components that we can already work with, so we've already got this primary button which is just a button,
00:35
so we can attach an event handler to that and just trigger this out rather than building out our own button, so I'm going to go ahead and pull in the primary button from here and inside of here we're going to give the text, we'll just say capture webcam, so let's just start with capturing our webcam, so in here we want to go ahead and space these out, so let's set this to a flex with
00:58
item center, we'll set justify center as well and we'll go ahead and set a space on the x-axis of 4 just to space out all the buttons that we're going to have in here and you'll recognize this from the introduction, okay so let's attach an event handler directly to this button and let's go ahead and say capture webcam, now with the javascript media api for capturing things we need
01:23
to do this differently for the webcam and the screen, we can't call the same method to capture the webcam or the stream, so I have two different methods to do this, that's not a problem though because all of these will feed into the same stream, all of these will then be able to put into a blob which we can then send to our back end to store, so the only thing that we need to
01:44
split up here is how we're accessing the webcam or the screen, so we'll go ahead and create this method out just at the top of this function out just at the top in here and let's just go ahead and start to capture this, so to do this let's dive straight in and say navigator media devices get user media, so this is the method that's going to change between capturing our webcam
02:07
and our screen, now into this is actually a relatively simple api, we're just going to say video true, now you can pass an object in here and give several options like the quality, the frame rate, all that kind of stuff, but once you're done with this you can head over to the documentation for get user media, have a look and you can start to play around with the settings, so once we've
02:27
done that this will return to us a promise, so what we can do is say then and once this has been approved by the user we can then access the stream, so we'll go ahead and console log the stream out here and just see what we get, so I'm going to head straight over to the browser, click capture webcam and there we go, it's already asking me if we are allowing our webcam, now we don't have audio
02:50
here because what we want to do is capture the audio stream separately, so regardless of whether we're using our webcam or our screen to record we can just attach that audio in, so we're not capturing audio but that's absolutely fine, so we're going to click allow and that's pretty much it, you can see up here this is recording and we've got a media stream back, so that is our stream
03:14
that we can then feed directly into a video player, so the question is how do we get this stream and show it on the page, well let's go ahead and find out now, so we're going to need a video element somewhere, so we're going to kind of separate these things up, so I'm going to go and create another container up here which will attach a if statement or a show to, so we only show the webcam when the
03:38
stream is actually active, so for now though let's just put in a video in here and we're going to go ahead and make this a ref so we can access this directly with view, let's just say player and we're going to set autoplay on here and we don't need any controls on here, we don't need to pause and play this because this is just a stream, so the way that we attach into this is we go ahead and first
04:02
of all import ref from view and then we create our ref to house this, so we're just going to create our player ref and that's just going to be empty, now with the composition API this will then directly hook into this and player will now that we've used this ref be accessible via this ref inside of here, so within the stream what we can do is we can just say player value, we need to use
04:30
value when we're accessing refs directly within our code and then we can set the source object to that stream, so basically capture this, set the source object not the source because it's slightly different to the player and then this video should then contain the stream and then that should just play, so let's go ahead and just try this out, I'm going to click capture webcam, hit allow and there
04:53
we go you can see already this is working, so that is how easy it is to capture the webcam directly here, I'm going to go ahead and refresh the page here because we're going to do a little bit of chopping and changing so we don't see these buttons once we actually have this stream because we don't need to see the buttons again, we've already chosen what option we want, we kind of want to just see
05:14
that recording thing underneath there, so the general thing that we're going to do here is create a fairly big reactive object within view which is going to keep all of our state in, the benefit of this is we can create some computed properties to toggle around if the certain sections of this should be shown, so let's go ahead and do this, we'll work on this slowly and we'll get this working,
05:36
so I'm going to call this state and I'm going to create out a reactive object in here, we can go ahead and pull reactive in from view, the difference here is that we just have an object with lots of different things in that are treated like refs, so let's go and just say stream and we're going to set that to null, now what that means is rather than directly doing this inside of here and setting
05:58
the stream directly on the player because we need the stream to be able to record it, what we can do is we can set the stream directly into our object just here, now we're going to need to change a couple of things around because now this player is not going to have a stream but we have that set in our state now, now the benefit of using reactive is what we can do something like stream active
06:21
and we can create a computed property here which will tell us whether this stream is currently active or not, so let's go ahead and pull in computed from view although that's already been pulled in up there automatically, just try and keep this tidy and inside of this computed we are going to return state dot stream which we've called this and then we're going to optionally check
06:43
because stream could be null if this is active, so as part of our stream object we have this active property whether it's active or not, so now we have a flag basically to tell us whether this stream is active or not, so what we can do is we can show this section if the stream is active and we can hide this section because we don't need to if the stream is not active, so we're going to say if
07:07
state stream active then we want to show the preview and then here we want to say if the stream is not active and we'll make sure we reference state there, okay if we head over and hit capture webcam now we should see this change over, we don't so let's just have a look what we've done here, oh okay because we're not working with a ref we don't need to reference this
07:27
reactive object with value like we do with normal refs, so let's change that over here and let's try this again, so I'll click capture webcam and there we go we're into the kind of next screen where we can preview this and see our recording button, okay so now let's actually get that video back on the page because obviously what we've not done now is directly attach the source
07:47
object to this player, so what we want to do is add in a watcher so when the stream is then active, so when this stream becomes active we then want to attach it to the player and we'll be using watchers quite a bit because once our video gets recorded and all that kind of stuff we want to watch when we get that object back attach it to our form and all that stuff, so let's bring in our
08:09
watcher here and we'll do these all down the bottom and what do we want to watch here, well we want to watch the state stream for when that is available, we could watch state stream active as well if we have an active stream but it's absolutely fine and let's go ahead and bring in the stream here that we get when this changes, then we want to go ahead and set the player object here the source object
08:30
so we're going to say player value because that's a ref we need value and we'll just do what we did before we'll set the source object to that stream, okay let's just really quickly recap when we capture our webcam we set the stream in a state that means we can add in these computed properties and do stuff like this but also have an overall area where we can access our stream not directly
08:51
attached to our player, then what we do is we watch for that state changing so when that stream is available we then go ahead and set that as a preview and of course we've implemented this computed property to tell us whether the stream is actually active or not, okay so let's go ahead and try this out, I have a feeling we're going to come across another issue, let's hit allow and as
09:13
you can see the camera is enabled but we're not seeing anything, now the way that refs work within view is these are only available once the component has mounted and we can actually see the component that we're working with, we've got this player ref which hooks up to the player just here, now because we've got this v if this isn't being rendered on the page when we are trying to
09:37
access that ref so essentially our ref is null, so what we want to do is switch over this to v show that means that this video is going to be on the page, it's just going to be hidden, the ref now can actually hook up to this html element because it's technically on the page just hidden and then we can go ahead and change this over, so let's go over and just try this one more
09:58
time and we should see our stream, great so that is the basics of capturing out our video for our webcam but what about our screen, well it's very similar and we can pretty much use everything we've already built here to show the same preview, so let's hop over to the next episode and look at capturing our screen instead.

Episode summary

In this episode, we finally start working with capturing a webcam stream straight from the browser! After all the setup work, it's time to get hands-on. We'll be working in our create page, and the first step is just dropping in some buttons with Breeze's primary button component – keeping things nice and simple.

You'll see how to wire up a button to trigger the webcam using the JavaScript Media API (navigator.mediaDevices.getUserMedia). We talk through the API options, why webcam and screen capture are handled differently, and test that the browser requests permission as expected. Once the stream is approved, you’ll see how we can live-preview what the webcam sees.

We create a video element to show the stream, set up a Vue ref for it, and hook everything together so the camera output appears right away. Along the way, we refactor to use Vue's reactive state and computed properties to control what the user sees (like hiding the capture buttons once the webcam is on). We use a watcher to make sure the video element always gets updated when the webcam stream becomes available.

There’s a tricky issue with refs and Vue rendering, but we fix it by switching from v-if to v-show so everything hooks up properly. By the end, you'll have a solid, reactive UI for starting webcam capture and streaming it live to the page. Next up: doing the same thing for capturing the screen!

Episode discussion

No comments, yet. Be the first!