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.

<p>Click the start button below to begin the demonstration.</p>
<div id="startButton" class="button">
  Start
</div>
<video id="video" width="160" height="120" autoplay></video><br>
<div id="log"></div>

body {
  font: 14px "Open Sans", "Arial", sans-serif;
}

video {
  margin-top: 20px;
  border: 1px solid black;
}

.button {
  cursor: pointer;
  width: 160px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
}

let videoElement = document.getElementById("video");
let logElement = document.getElementById("log");

function log(msg) {
 logElement.innerHTML += msg + "<br>";
}

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:

<p>Click the start button below to begin the demonstration.</p>
<div id="startButton" class="button">
  Start
</div>
<video id="video" width="160" height="120" autoplay></video><br>
<div id="log"></div>

body {
  font: 14px "Open Sans", "Arial", sans-serif;
}

video {
  margin-top: 20px;
  border: 1px solid black;
}

.button {
  cursor: pointer;
  width: 160px;
  border: 1px solid black;
  font-size: 16px;
  text-align: center;
  padding-top: 2px;
  padding-bottom: 4px;
  color: white;
  background-color: darkgreen;
}

let videoElement = document.getElementById("video");
let logElement = document.getElementById("log");

function log(msg) {
 logElement.innerHTML += msg + "<br>";
}

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 compatibility

See also

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