getUserMedia (formally navigator.mediaDevices.getUserMedia) is the WebRTC API for accessing the user’s camera and microphone. It returns a MediaStream containing audio and/or video tracks that can be sent via a PeerConnection or used locally.
How getUserMedia works
The API takes a constraints object specifying what media to capture:
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
video: { width: 1280, height: 720 }
});Key aspects:
- Permission prompt: The browser typically asks the user for permission before granting camera/microphone access (unless granted by the user in advance for future sessions on the same domain)
- HTTPS required: getUserMedia encourages the use of secure origins (HTTPS or localhost) or mandates it. It is good practice to assume it mandates it
- Constraints: Developers can specify preferred resolution, frame rate, facing mode (front/back camera), and audio settings like echo cancellation and noise suppression
Common use cases
- Video calls: Capture camera and microphone for RTC sessions
- Local recording: Record audio/video locally without sending it over the network
- Snapshots: Capture still images from the video stream
- Audio processing: Apply real-time effects or analysis to microphone input
Related APIs
- getDisplayMedia: Captures screen content (screen sharing) – similar API but for screens instead of cameras
- enumerateDevices: Lists available cameras and microphones
- MediaStreamTrack: Individual audio or video tracks within the stream
getUserMedia is one of the three core WebRTC APIs, alongside PeerConnection and Data Channel.
