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 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 togetUserMedia()
will fail. Iffalse
, 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
CSS content
JavaScript content
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:
HTML content
CSS content
JavaScript content
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
Specification | Status | Comment |
---|---|---|
Media Capture and Streams The definition of 'MediaStreamConstraints.video' in that specification. |
Candidate Recommendation | Initial specification. |
Browser compatibility
BCD tables only load in the browser