I'm building a peer-to-peer video calling client with WebRTC and obtaining camera streams through getUserMedia(). When I request {video: true}, the browser gives me a 640×480 stream even though the device can support up to 1920×1080. How can I determine the highest usable width and height for an arbitrary camera? Also, my video element is inside a div whose width is set to fit-content. When a remote stream first arrives, the video initially appears small and then gradually grows. What causes that layout change, and how can I prevent it?
3 Answers
There isn’t one ideal resolution for every device. Camera hardware, frame-rate support, lighting, and available bandwidth all vary. Requesting the absolute maximum can result in a very low frame rate, poorer quality in low light, or excessive CPU usage for encoding and decoding. For real-time calls, 720p or 1080p is usually a more practical upper limit.
After obtaining a video track, inspect its capabilities with getCapabilities(). The width and height entries usually include the supported ranges, and you can then apply constraints to that same track. Use getSettings() afterward to check the resolution the browser actually selected. For example: const track = stream.getVideoTracks()[0]; const caps = track.getCapabilities(); await track.applyConstraints({width: {ideal: caps.width.max}, height: {ideal: caps.height.max}}); console.log(track.getSettings()); You can also request a deliberately high ideal resolution and let the browser choose the closest supported mode: getUserMedia({video: {width: {ideal: 4096}, height: {ideal: 2160}}}).
The remote video can appear to grow because the browser receives low-resolution frames or incomplete video metadata first, then settles on the negotiated resolution as decoding and bitrate ramp up. Give the video container a fixed or constrained size and set the video element to object-fit: contain or cover. That prevents the surrounding layout from changing while the stream’s dimensions become known.
Thanks, that clears up how to inspect the track and verify the result.