I'm building a peer-to-peer video calling client with WebRTC. When I call getUserMedia({video:true}), the browser gives me a 640×480 stream even though the camera supports up to 1920×1080. How can I determine the maximum width and height supported by any user's camera and request an appropriate resolution? Also, my video element is inside a div whose width is set to fit-content. When the remote stream first arrives, the video appears small and gradually grows. What causes that layout change, and how can I prevent it?
4 Answers
Once you have a video track, inspect its capabilities with getCapabilities(). The width and height ranges tell you what the camera reports as supported. You can then apply suitable constraints to that same track and use getSettings() to verify the resolution the browser actually selected. Don’t assume the maximum values will always be the best choice.
The remote video often starts with small frames while the connection, codec, and bitrate are being negotiated. As larger frames arrive, a fit-content container can change size and make the video appear to grow. Give the video or its wrapper a stable width and height, then use object-fit: contain or object-fit: cover to control how the stream is displayed.
Requesting the absolute maximum can hurt the call. Some cameras support a high resolution only at a low frame rate, and high-resolution encoding or decoding can overload older devices. For real-time video, 720p or 1080p is usually a more practical upper limit, depending on the connection and device.
There isn’t one ideal resolution for every device. Camera hardware, browser behavior, available bandwidth, and CPU performance all vary. Rather than requiring an exact maximum, request a high ideal resolution and let the browser choose the closest supported mode, then inspect the track’s settings to see what you received. For example, width and height ideals around 4096×2160 will generally fall back if the camera cannot provide 4K.
That makes sense. I’ll check the capabilities first and confirm the final result with getSettings().