MediaDevices.getUserMedia() will prompt the user to grant permission to use media input. Media input will generate a MediaStream containing the track of the requested media type. This stream can contain a video track (from hardware or virtual video sources, such as cameras, video capture devices, screen sharing services, etc.), an audio track (also from hardware or virtual audio sources, such as microphones, A/D converters, etc.), or other track types.
It returns a promise object. After success, it will resolve and call back a MediaStream object. If the user refuses permission or the required media source is unavailable, promise will reject and call back a permissiondenied error or NotFoundError.
parameter
-
constraints
The constraints parameter is a MediaStreamConstraints object containing two members, video and audio. It is used to describe the requested media type. At least one type or both must be specified. If the browser cannot find the specified media type or meet the corresponding parameter requirements, the returned Promise object will be in the rejected state, and NotFoundError is used as the parameter of the rejected callback.
const constraints = {
video: {
pan: true,
tilt: true,
zoom: true
}
};
async function init(e) {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
e.target.disabled = true;
} catch (e) {
handleError(e);
}
};
document.querySelector('#showVideo').addEventListener('click', e => init(e));
-
The getVideoTracks() method returns a sequence of objects representing the MediaStream of the video track in this stream. MediaStreamTrack
- a set MediaStreamTrack Object, each video track contained in the media stream has an object. What are the video tracks kind Track video with property. If the stream does not contain video tracks, the array is empty.
-
The getCapabilities method returns a MediaTrackCapabilities object that represents the value or range of each adjustable attribute, which depends on the platform and user agent
-
The getSettings() method returns a MediaTrackSettings object that contains the current value of MediaStreamTrack for each constrainable property of current.
-
The applyConstraints() method applies a set of constraints to the track; These constraints allow the website or application to establish ideal values and acceptable value ranges for the constrained attributes of the track, such as frame rate, size, echo cancellation, etc.
function handleSuccess(stream) {
const video = document.querySelector('video');
const videoTracks = stream.getVideoTracks();
video.srcObject = stream;
const capabilities = videoTracks[0].getCapabilities();
const settings = videoTracks[0].getSettings();
for (const ptz of ['pan', 'tilt', 'zoom']) {
if (!(ptz in settings)) {
continue;
}
const input = document.querySelector(`input[name=${ptz}]`);
input.min = capabilities[ptz].min;
input.max = capabilities[ptz].max;
input.step = capabilities[ptz].step;
input.value = settings[ptz];
input.disabled = false;
input.oninput = async event => {
try {
const constraints = {advanced: [{[ptz]: input.value}]};
await videoTracks[0].applyConstraints(constraints);
} catch (err) {
console.error('applyConstraints() failed: ', err);
}
};
}
}
function handleError(error) {
console.log(`getUserMedia error: ${error.name}`, error);
}
<style>
div.label {
display: inline-block;
font-weight: 400;
margin: 0 0.5em 0 0;
width: 3.5em;
}
video {
background: #222;
margin: 0 0 20px 0;
width: 500px;
height: 400px;
}
</style>
<body>
<video id="gum-local" autoplay playsinline></video>
<button id="showVideo">Open camera</button>
<div>
<div class="label">Pan:</div>
<input name="pan" type="range" disabled>
</div>
<div>
<div class="label">Tilt:</div>
<input name="tilt" type="range" disabled>
</div>
<div>
<div class="label">Zoom:</div>
<input name="zoom" type="range" disabled>
</div>
</body>
Effect demonstration
