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
05. Enabling audio capture

Episodes

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

Transcript

00:00
So once we get to hitting record, the media recorder API in the browser can only capture one stream. What we need to do is piece two or more things together
00:09
if we want to capture multiple sources. That's why we need to go ahead and capture audio separately. But we'll take advantage of this and we'll allow audio to be toggled on and off depending on if the user wants
00:21
to actually enable this. They might just want to capture their screen with no audio. So let's start out here with another section just next to our buttons and we'll create our checkbox in here.
00:33
So let's go ahead and bring in the checkbox component that we already have as part of our Breeze starter kit. And for this, we're going to go ahead and give this an ID of audio. And we'll hook this up to a model in just a second.
00:46
But next to this, let's go ahead and create out a label in here. So we will style this up with a font medium and text small just to make it look similar. And we'll just say enable audio.
00:58
OK, let's go and have a look at this. And there we go. There is our toggle. So for the outer wrapper, let's go and set a space of two.
01:06
And we'll set flex with item center just to line everything up so it looks a little bit neater. OK, so how are we going to attach this to toggle this? Well, we can just do this with the standard ref within view.
01:18
So let's go and create up our ref in here to check whether audio needs to be enabled or not. So let's call this should capture audio. We'll just keep it super simple.
01:29
And by default, we'll set that to true. So we'll assume that the user does want to capture their audio. Now, if we come down to our checkbox here, we can hook this up with a V model.
01:39
And we can say should capture audio. And because of this component, it needs to be called checked. So we need to name this in here as checked. So now that is enabled.
01:50
And if we disable it, that ref is now going to be false. So when we start to capture our webcam or when we start to capture our screen, we can choose whether we want to also capture audio.
02:01
Now, once again, capturing audio is pretty similar to the two things that we've already done here. So I'm going to go ahead and grab the webcam one. And I'm just going to create another method, of course,
02:11
called capture audio. And in here, we are going to use get user media. So it's the same thing. But we're going to set video to false,
02:19
because we don't need to capture video as part of this. But we are going to go ahead and capture audio. And with this, we're going to pass a couple of options through to this.
02:27
We're also going to need to update the stream, because we don't want to override our state stream with the audio. That doesn't make sense.
02:33
We're going to have to capture this separately and then merge them in when we record. So for the audio, let's go ahead and add some options to this. So these are totally optional.
02:41
But we're going to go ahead and set echo cancellation to true. We're going to set noise suppression to true. And we're going to set auto gain control to true, just so we have nice, clean audio.
02:53
And again, you can check out the documentation for get user media and see which options you can pass through to here. OK, so now that we have capture audio,
03:01
we need to trigger this only when capture audio up here is true. Just before we do that, let's go ahead and work out where we're going to put this other stream.
03:11
It kind of makes sense to just put this into another property within our reactive object up here. So let's go ahead and call this audio stream. We'll set that to null.
03:20
And we'll just do exactly the same thing. So we'll just say state audio stream equals stream. Now, I'm going to go ahead and just dump out our reactive object somewhere on the page.
03:29
It's always a good idea to do this just so we can see what's actually happening here. So I'm going to dump the state just up the top. So if we go and disable audio, and I go ahead and capture
03:40
my screen, share the window, you can see that the audio stream is null. Stream active, that computed property we created, is true. And we have our media stream object in our stream.
03:51
Let's give the page a refresh and enable audio. And let's see the difference that we get. So audio stream is null. So that is, of course, because we're not
04:00
setting it at the moment. So we've got that in there ready to go. Now, all we really need to do now is call this method when we either capture our webcam
04:09
or our screen if that's true. So we're going to say if capture, or should capture, I think we called it, is true, then we just want to invoke that.
04:19
That's all we need to do, just invoke it. And we do that for both the webcam and the screen. And we're done. That's all we need to do.
04:26
So this is going to prompt us slightly differently now because when we, in Safari specifically, enable this, it's going to ask if we want to capture our audio as well. So when I click capture screen, it's
04:37
going to ask us if we want to capture our microphone. That's the first thing that we're doing. We're going to allow that. And then we are going to be asked
04:43
if we want to capture our screen. So let's do that. And there we go. We now have an audio stream.
04:48
And we have a video stream. Now, we can't see our audio. We can't hear our audio. But once we start recording this,
04:55
we can now attach these two things together when we actually hit that record button. And then they will be put into the same blob, which will create up a video file with an audio stream alongside of it
05:07
as well. OK, so that is our audio captured. Very, very easy to do. You just do pretty much the same thing, but on a condition.

Episode summary

In this episode, we're diving into how to enable audio capture while using the Media Recorder API in the browser. We kick things off by talking about how the browser's Media Recorder API can only capture one stream at a time, so to grab audio and video simultaneously, we need to handle the audio stream separately and then combine them later.

We walk through adding a simple toggle (a checkbox) to let users decide if they want to capture audio at all. This might look like a straightforward UI update, but it's really helpful for users who might just want to record their screen without sound. The checkbox connects to a Vue ref, and we keep it enabled by default, but users can turn it off if they prefer.

The coding part involves using getUserMedia to grab the audio, setting options like echo cancellation, noise suppression, and auto gain control for cleaner sound. We set up our state to hold the audio stream separately from the video, and wire things up so that audio capture only happens if the toggle is enabled.

We quickly test this in the browser to see how things behave (with browser prompts and everything). When both streams are being captured, you won’t "see" or "hear" audio directly, but it’s there and ready to be merged when recording starts. By the end, you’ll know exactly how to wire up conditional audio capture for your recording app, and how to manage multiple streams in preparation for combining them into a single recording. Super handy if you want more control over your media recorder features!

Episode discussion

No comments, yet. Be the first!