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.
So, we won't talk specifically very much about the audio, but we will talk a little bit about video, because one of the things we'll do at the end of the day if we have time, is wire 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. There's a subtle user experience thing that's different between the video from your webcam and the audio from your microphone. And you may not have ever thought about this before but most apps that you've ever been to, they almost always, if it's capturing from your webcam, they show you visibly what is on your webcam.
Because we want to instinctually know what we're showing off to people. If I'm going to pick my nose, I better make sure I'm off camera or whatever. Or, if my kid comes into the room or something like that. And so, we want to see 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 computers. 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. Anytime 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. It would be kind of creepy if you showed up to some random webpage and that green light just came on, and you didn't know what the heck they were doing, right? 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, provides us 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 webcam. And we'll see that later today. So this is the getUserMedia facade in terms of h5. It's pretty straight forward. We ask for userMedia. On line three we say I want it to be video. Obviously you'd pass an audio true if you also wanted the 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.
And then we can create a video element, and so on line seven we just assign that source directly to it. Last thing is there's a little quirk we have to call video.play 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 their webcam. It's actually really pretty simple with very little code. - [Student] Is there any properties for the streaming quality or something for video? - Not that I'm aware of. 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. You can downscale it. Instead of keeping 30 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. The other reason why this is important is because the same stream that we're talking about here where we're going to attach it to a video element, that's the exact same object that we would want to transport across WebRTC. If we wanted to show somebody else and some other computer our video stream.
So if you set up a conferencing software or whatever, you use this exact same mechanism to getUserMedia to pull it in.
- HTML5 facades
- Using APIs
- File I/O
- The asynquence library
- Publishing npm modules
- Grunt and Gulp
- Node as a web server
- Simulating asynchronicity
- Making a socket connection
- User-triggered messaging
- Signaling and data channels