Requesting Camera and Mic Access with getUserMedia
getUserMedia asks for camera/mic access in the browser. It's used for video chats or photo booths and returns a Promise with the media stream. Footgun: The promise can hang forever if the user ignores the prompt, so your app must handle that state.
Why it exists
Web applications needed a standard, secure way to access raw media streams from user hardware like webcams and microphones. Before this API, such access was typically limited to browser plugins, which posed security risks and were not standardized. getUserMedia provides a native, permission-based gateway.
The mental model
Think of getUserMedia as a formal, one-time request to borrow the user's camera and microphone. You send a request specifying what you need (e.g., "video and audio"). The browser then acts as an intermediary, showing a permission prompt to the user. If they say yes, you get a direct stream of data; if they say no, you get a rejection. The user is always in control.
How it works
You call navigator.mediaDevices.getUserMedia() with a constraints object. This object must have audio or video properties set to true. The method returns a Promise. If the user accepts, the promise resolves with a MediaStream object, which you can attach to an HTML <video> element's srcObject property. If the user denies permission, the promise rejects with a NotAllowedError. If the requested media isn't found, it rejects with NotFoundError.
When to use it
Use getUserMedia whenever your web application needs to capture live audio or video from the user's device. This is essential for building applications like video chat clients, audio recorders, QR code scanners that use the camera, or in-browser photo booths.
When not to use it
Do not use this for file uploads; use an <input type="file"> for that. Critically, it will not work on insecure origins (HTTP), so it's not an option for sites that haven't migrated to HTTPS. Also, be aware the promise may never resolve or reject if the user simply ignores the prompt, so your UI must account for this pending state.
One canonical example
To get a video and audio stream, you first need an HTML <video> element. In your JavaScript, define constraints: const constraints = { audio: true, video: true };. Then, call the API: navigator.mediaDevices.getUserMedia(constraints). In the promise's .then() block, you receive the stream and assign it: .then((stream) => { videoElement.srcObject = stream; }). In the .catch() block, you handle errors like the user denying access.
Interview question
When would `getUserMedia` be an inappropriate choice for handling user media?
- a.Building a video conferencing application that streams live audio and video.
- b.Allowing users to upload a pre-recorded video file from their computer.Correct
- c.Creating an in-browser photo booth that captures images from the webcam.
- d.Developing a QR code scanner that uses the device's camera.
Why? this is the answer
The card explicitly states, "Do not use this for file uploads; use an <input type="file"> for that." `getUserMedia` is designed for capturing live media streams, not for handling pre-existing files. The other options describe appropriate uses for `getUserMedia`.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #web api
- #media
- #javascript
- #browser
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles