This course has been updated! We now recommend you take the Complete Intro to Real-Time course.

Check out a free preview of the full Real-Time Web with Node.js course:
The "getUserMedia" Lesson is part of the full, Real-Time Web with Node.js course featured in this preview video. Here's what you'd learn in this lesson:

The getUserMedia API allows the browser to attach to media streams from the user. This can be a webcam, a microphone, or even the user's screen in the case of desktop sharing.

Get Unlimited Access Now

Transcript from the "getUserMedia" Lesson

>> [MUSIC]

>> Kyle Simpson: getUserMedia is the first mechanism that we had in the browser in terms of JavaScript that allowed us to attach to certain user media streams. And the first one that was defined was the webcam. The next one was the audio from your microphone. And they've even created a third one now which is they've created at a user stream for your screen so that you can do screen capturing through the web through your web browser and do screen sharing with other people or whatever.

[00:00:31] But there's there probably in the future be dozens of the user streams that we want to ask the user for permission to have access to. And then we'll get a little stream object in our JavaScript that will allow us to attach to that, do something to it, read the information out or whatever.

[00:00:46] If you ever seen those demos that do audio like you talk into it and it changes your voice into a Darth Vader voice or whatever. They're listening to the audio stream from your microphone pumping it into the Web audio API and manipulating the bits and the bytes. So we won't talk specifically very much about the audio but we will talk a little bit about video.

[00:01:06] Because one of the things that will do at the end of the day if we have time is why ourselves up an example where we share video from peer to peer which is kind of cool. But getUserMedia allows us to attach to a stream and pull out some video, and then most of the time, you attach that to something visible.

[00:01:23] There's a kind of a subtle user experience thing that's different between the video from your webcam and the audio from your microphone. You may never thought about this before but most apps that you've ever been to, they almost always, if you are, if it's. You know capturing from your webcam they show you visibly what is on your webcam because we want to sort of instinctually know what we're showing off to people.

[00:01:48] If I'm going to pick my nose, I'd better make sure I'm off camera or whatever or you know if my kid comes into the room or something like that. And so we want to see what we're what we're presenting across our webcam. But the same is totally opposite with our microphone because we don't want to hear the echo of ourselves talking into our computer.

[00:02:07] So you never go to those apps and you hear your audio coming back out. Whenever you hear that you feel like that's a bug in the app because you shouldn't be hearing your own audio coming back. So there's kind of a subtle user experience difference there. Any time you design something where you're capturing somebody's video, there's kind of an expectation, an unspoken expectation, that you should probably show it to them while you're capturing it.

[00:02:28] It would be kind of creepy if you showed up to some random web page and that green light just came on and you didn't know what the heck they were doing. So be aware of that user experience perspective there. But getUserMedia, it provides us a stream. It asks the user, is it okay for us to get the audio or video?

[00:02:45] Provides a stream. In the case of the video, all we have to do is take that stream and set it as the source element to a video tag and it will display live update from the web cam and we'll see that later today. So this is the getUserMedia facade in terms of H five it's pretty straightforward.

[00:03:03] We asked for user media on line three we say I want it to be video obviously pass in audio true if you also wanted a microphone. You're going to get a stream a source here on line five. That is the source that comes back that's already been properly formatted so that you can use it.

[00:03:20] And then we can create a video element and stick, so online seven we just assign that source directly to it. Last thing is there's a little quirk we have to call so it actually starts live updating. But that's all you really need to do and you can show somebody on the page what you're capturing from the web cam.

[00:03:36] It's actually really pretty simple with very little code.
>> Student: Is there any properties for screening quality or something.
>> Kyle Simpson: Not that I'm aware of. The the question was is there any properties to control the quality of it. I think you just get whatever the webcam is going to give you.

[00:03:55] You can downscale it. You can, you know, instead of keeping thirty frames a second you can drop every other frame or whatever. But I don't think there's any way for you to tell the API to give you more or less quality.
>> Kyle Simpson: The other reason why this is important is because the same stream that we're talking about here where we're gonna attach it to a video element, that's the exact same object that we would want to transport across web RTC.

[00:04:21] If we wanted to show somebody else in some other computer our video stream. So, if you set up a conferencing software or whatever, you use this exact same mechanism to get UserMedia to pull it in.