Les fonctionnalités de panoramique, d'inclinaison et de zoom des caméras sont enfin contrôlables sur le Web.
Les solutions de visioconférence à l'échelle d'une salle déploient des caméras avec des fonctionnalités de panoramique, d'inclinaison et de zoom (PTZ) afin que le logiciel puisse diriger la caméra vers les participants à la réunion. À partir de Chrome 87, les fonctionnalités de panoramique, d'inclinaison et de zoom des caméras sont disponibles pour les sites Web utilisant des contraintes de piste multimédia dans MediaDevices.getUserMedia() et MediaStreamTrack.applyConstraints().
Utiliser l'API
Détection de fonctionnalités
La détection des caractéristiques du matériel est différente de ce à quoi vous êtes probablement habitué.
La présence de noms de contraintes "pan", "tilt" et "zoom" dans navigator.mediaDevices.getSupportedConstraints() vous indique que le navigateur est compatible avec l'API pour contrôler le PTZ de la caméra, mais pas si le matériel de la caméra est compatible. Depuis Chrome 87, il est possible de contrôler le PTZ de la caméra sur ordinateur, tandis qu'Android n'accepte que le zoom.
const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
// Browser supports camera PTZ.
}
Demander l'accès à la caméra PTZ
Un site Web n'est autorisé à contrôler le PTZ que si l'utilisateur l'a explicitement autorisée via une invite.
Pour demander l'accès à la caméra PTZ, appelez navigator.mediaDevices.getUserMedia() avec les contraintes PTZ, comme indiqué ci-dessous. L'utilisateur est alors invité à accorder à la fois l'appareil photo standard et la caméra standard avec les autorisations PTZ.
La promesse renvoyée sera résolue avec un objet MediaStream permettant de présenter le flux vidéo de la caméra à l'utilisateur. Si la caméra n'est pas compatible avec le mode PTZ, l'utilisateur reçoit une invite standard.
try {
// User is prompted to grant both camera and PTZ access in a single call.
// If camera doesn't support PTZ, it falls back to a regular camera prompt.
const stream = await navigator.mediaDevices.getUserMedia({
// Website asks to control camera PTZ as well without altering the
// current pan, tilt, and zoom settings.
video: { pan: true, tilt: true, zoom: true }
});
// Show camera video stream to user.
document.querySelector("video").srcObject = stream;
} catch (error) {
// User denies prompt or matching media is not available.
console.log(error);
}
Une autorisation précédemment accordée à la caméra, en particulier une autorisation qui n'a pas accès au PTZ, n'obtient pas automatiquement cet accès si elle devient disponible. même si la caméra elle-même est compatible avec le mode PTZ. L'autorisation doit être à nouveau demandée. Heureusement, vous pouvez utiliser l'API Permissions pour interroger et surveiller l'état de l'autorisation PTZ.
try {
const panTiltZoomPermissionStatus = await navigator.permissions.query({
name: "camera",
panTiltZoom: true
});
if (panTiltZoomPermissionStatus.state == "granted") {
// User has granted access to the website to control camera PTZ.
}
panTiltZoomPermissionStatus.addEventListener("change", () => {
// User has changed PTZ permission status.
});
} catch (error) {
console.log(error);
}
Pour savoir si un navigateur basé sur Chromium est compatible avec le PTZ pour une caméra, accédez à la page interne de about://media-internals et consultez la colonne "Panoramique/Inclinaison/Zoom" dans l'onglet"Capture vidéo". "Inclinaison panoramique " et"Zoom " signifient respectivement que la caméra est compatible avec les commandes UVC "PanTilt (absolu)" et "Zoom (absolu). Les commandes UVC "PanTilt (Relative)" et "Zoom (Relative)" UVC ne sont pas compatibles avec les navigateurs Chromium.
Contrôler le mode PTZ de la caméra
Manipulez les fonctionnalités et les paramètres du PTZ de la caméra à l'aide de l'aperçu MediaStreamTrack de l'objet stream obtenu précédemment.
MediaStreamTrack.getCapabilities() renvoie un dictionnaire contenant les fonctionnalités compatibles, ainsi que les plages ou les valeurs autorisées. En conséquence, MediaStreamTrack.getSettings() renvoie les paramètres actuels.
Les fonctionnalités et paramètres de panoramique, d'inclinaison et de zoom ne sont disponibles que si la caméra est compatible et si l'utilisateur a accordé l'autorisation PTZ à la caméra.
Appelez videoTrack.applyConstraints() avec les contraintes avancées PTZ appropriées pour contrôler le panoramique, l'inclinaison et le zoom de la caméra, comme illustré dans l'exemple ci-dessous.
La promesse renvoyée sera résolue en cas de succès. Sinon, elle sera rejetée si:
- l'autorisation PTZ n'est pas accordée.
- le matériel de la caméra n'est pas compatible avec la contrainte PTZ.
- la page n’est pas visible pour l’utilisateur. Utilisez l'API Page Visibility pour détecter les modifications de visibilité des pages.
// Get video track capabilities and settings.
const [videoTrack] = stream.getVideoTracks();
const capabilities = videoTrack.getCapabilities();
const settings = videoTrack.getSettings();
// Let the user control the camera pan motion if the camera supports it
// and PTZ access is granted.
if ("pan" in settings) {
const input = document.querySelector("input[type=range]");
input.min = capabilities.pan.min;
input.max = capabilities.pan.max;
input.step = capabilities.pan.step;
input.value = settings.pan;
input.addEventListener("input", async () => {
await videoTrack.applyConstraints({ advanced: [{ pan: input.value }] });
});
}
if ("tilt" in settings) {
// similar for tilt...
}
if ("zoom" in settings) {
// similar for zoom...
}
Il est également possible de configurer le panoramique, l'inclinaison et le zoom de la caméra en appelant navigator.mediaDevices.getUserMedia() avec certaines valeurs de contrainte idéale du PTZ de la caméra. Cette option est utile lorsque les fonctionnalités PTZ des caméras sont connues à l'avance. Notez que les contraintes obligatoires (min, max, exact) ne sont pas autorisées ici.
const stream = await navigator.mediaDevices.getUserMedia({
// Website asks to reset known camera pan.
video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
});
Aire de jeu
Pour jouer avec l'API, exécutez la démonstration sur Glitch. N'oubliez pas de consulter le code source.
Considérations de sécurité
Les auteurs des spécifications ont conçu et implémenté cette API en s'appuyant sur les principes de base, tels que le contrôle utilisateur, la transparence et l'ergonomie. L'utilisation de cette API est principalement contrôlée par le même modèle d'autorisation que l'API Media Capture and Streams. En réponse à une invite de l'utilisateur, le site Web n'est autorisé à contrôler le PTZ que lorsque la page est visible par l'utilisateur.
Compatibilité du navigateur
API MediaStream
API Permissions
API Page Visibility
MediaDevices.getUserMedia()
MediaDevices.getSupportedConstraints()
MediaStreamTrack.applyConstraints()
MediaStreamTrack.getCapabilities()
MediaStreamTrack.getSettings()
Liens utiles
- Guide explicatif sur le PTZ
- Version provisoire des spécifications
- Dépôt GitHub
- Entrée ChromeStatus
- Bug de suivi dans Chrome
Remerciements
Cet article a été lu par Joe Medley et Thomas Steiner. Merci à Rijubrata Bhaumik et Eero Häkkinen d'Intel pour leur travail sur la spécification et l'implémentation. Image principale de Christina @ wocintechchat.com sur Unsplash.