![](/style/images/good.png)
![](/style/images/bad.png)
Browser Super Powers: getUserMedia
source link: https://www.robinosborne.co.uk/2024/06/04/browser-super-powers-getusermedia/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Browser Super Powers: getUserMedia
In case you didn’t already believe it, your Web Browser has super powers. No longer is it something to merely display a document marked up with hypertext.
No longer is it limited to the read-only text and images of the olden days (aka the last two decades or so). Oh no. Now that the browser wars have cooled down, and the commons group are collaborating and updating the W3C standards rapidly enough for the eager-beaver browser vendors, we’re seeing new functionality quickly adopted across all major browser.
One of these super powers allows us to access the user’s microphone and camera (with their permission) using a one-liner:
var promise = navigator.mediaDevices.getUserMedia(constraints);
where constraints
define the device preferences, such as:
{
audio: true,
video: {
width: { min: 1024, ideal: 1280, max: 1920 },
height: { min: 776, ideal: 720, max: 1080 },
facingMode: "user"
}
}
Here we’re requesting permission to access the device’s microphone and the camera, with a minimum and maximum requirement around the camera resolution, as well as defining a preference for the front-facing camera if available (facingMode
).
This is all just plain old javascript too! At the time of writing, you only need to worry about ye olde IE and Opera Mini not supporting it.
Don’t believe me? Go to a website that uses HTTPS, open your browser’s Developer Tools and paste this in to the console:
var constraints = { audio: true, video: true };
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
var video = document.createElement('video');
document.getElementsByTagName('body')[0].appendChild(video);
video = document.querySelector('video');
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) { console.log(err.name + ": " + err.message); });
You’ll be prompted for permission to access your devices:
![browser requesting permission to access camera](https://res.cloudinary.com/otomotech/image/upload/f_auto,q_auto,w_800/robinosborne/2024/06/avpermissionprompt.png)
If you allow
, then you can scroll to the bottom of the page and see your lovely face appear in a dynamically generated video
tag:
![dynamically added video element with my pretty face in it](https://res.cloudinary.com/otomotech/image/upload/f_auto,q_auto,w_800/robinosborne/2024/06/videoelementadded.png)
Web browsers are getting closer to native apps in what they can achieve, and getUserMedia (aka Stream API) is just one example of this.
4 June 2024Robin Osborne asides, browser, javascript
Post navigation
Leave a Reply Cancel reply
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK