Web/API/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.

HTML content

<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>

CSS content

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;
}

JavaScript content

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.

Using a MediaTrackConstraints object

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

HTML content

<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>

CSS content

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;
}

JavaScript content

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.

Specifications

Specification	Status	Comment
Media Capture and StreamsThe definition of 'MediaStreamConstraints.video' in that specification.	Candidate Recommendation	Initial specification.

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
video	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support 38	IE No support No	Opera Full support Yes	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 38	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support Yes

Legend

Full support  

Full support

No support  

No support

Compatibility unknown  

Compatibility unknown

See also

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

MediaStreamConstraints.video by Mozilla Contributors is licensed under CC-BY-SA 2.5.