MediaStreamConstraints.video

The MediaStreamConstraints dictionary's video property is used to indicate what kind of video track, if any, should be included in the MediaStream returned by a call to getUserMedia().

To learn more about how constraints work, see Capabilities, constraints, and settings.

Syntax

var videoConstraints = true | false | MediaTrackConstraints;

Value

The value of the video property can be specified as either of two types:

Boolean

If a Boolean value is specified, it simply indicates whether or not a video track should be included in the returned stream; if it's true, a video track is included; if no video source is available or if permission is not given to use the video source, the call to getUserMedia() will fail. If false, no video track is included.

MediaTrackConstraints

A constraints dictionary detailing the preferable and/or required values or ranges of values for the track's constrainable properties. If you specify constraints, a video track meeting these constraints is required.

Examples

Using a Boolean value

In this example, we provide a simple value of true for the video property. This tells getUserMedia() that we require a video track, but we don't care about any specifics beyond that.

document.getElementById("startButton").addEventListener("click", function() {
  navigator.mediaDevices.getUserMedia({
      video: true
  }).then(stream => videoElement.srcObject = stream)
    .catch(err => log(err.name + ": " + err.message));
}, false);

Here we see an event handler for a click event which uses getUserMedia() to obtain a video-only stream with no specific constraints, then attaches the resulting stream to a <video> element once the stream is returned.

Result

Using a MediaTrackConstraints object

Now let's look at a similar example that uses a set of constraints based on the MediaTrackConstraints dictionary:

document.getElementById("startButton").addEventListener("click", function() {
  navigator.mediaDevices.getUserMedia({
      video: {
        width: 160,
        height: 120,
        frameRate: 15
      }
  }).then(stream => videoElement.srcObject = stream)
    .catch(err => log(err.name + ": " + err.message));
}, false);

Here we see an event handler for a click event which calls getUserMedia(), specifying a set of video constraints that indicate a preference for a video track whose dimensions are as close as possible to 160x120 pixels, and whose frame rate is as close to 15 frames per second as possible. As long as a video input device is available and the user allows it to be used, a video track will be included in the resulting stream, and it will match the specified constraints as well as possible.

Result

Specifications

Browser compatibilityUpdate compatibility data on GitHub

See also

• Media Capture and Streams API
• Capabilities, constraints, and settings
• MediaDevices.getUserMedia()
• MediaDevices.getSupportedConstraints()
• MediaTrackSupportedConstraints
• MediaTrackConstraints