Les fonctionnalités de panoramique, d'inclinaison et de zoom des caméras peuvent enfin être contrôlées sur le Web.
Les solutions de visioconférence d'une pièce déploient des caméras avec panoramique, inclinaison et zoom.
(PTZ) permettant au logiciel d'orienter la caméra vers une réunion
participants. À partir de Chrome 87, les fonctionnalités de panoramique, d'inclinaison et de zoom sont activées
les caméras sont disponibles pour les sites Web utilisant des contraintes de piste multimédia
MediaDevices.getUserMedia()
et MediaStreamTrack.applyConstraints()
.
Utilisation de l'API
Détection de caractéristiques
La détection des fonctionnalités sur le matériel est différente de ce à quoi vous êtes probablement habitué.
La présence des noms de contraintes "pan"
, "tilt"
et "zoom"
dans
navigator.mediaDevices.getSupportedConstraints()
vous indique que le navigateur
prend en charge l'API pour contrôler le PTZ de la caméra, mais pas si son matériel
le prend en charge. À partir de Chrome 87, le contrôle du PTZ de la caméra est pris en charge sur
sur ordinateur, tandis qu'Android ne prend en charge 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 ne peut contrôler le PTZ d'une caméra que si l'utilisateur l'a explicitement autorisé a accordé à la caméra l'autorisation PTZ via une invite.
Pour demander l'accès à la caméra PTZ, appelez le navigator.mediaDevices.getUserMedia()
avec
les contraintes de la zone PTZ, comme indiqué ci-dessous. L'utilisateur sera alors invité à accorder
caméra standard et caméra avec autorisations PTZ.
La promesse renvoyée sera résolue avec un objet MediaStream
utilisé pour afficher la
le flux vidéo de la caméra à l'utilisateur. Si la caméra n'est pas compatible avec la fonctionnalité PTZ, l'utilisateur
affichera une invite standard de l'appareil photo.
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 à l'appareil photo, en particulier une autorisation sans accès au PTZ ; n'obtient pas automatiquement l'accès à la PTZ s'il devient disponible. C'est vrai. même si la caméra est elle-même compatible PTZ. L'autorisation doit être demandée à nouveau. 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 la fonctionnalité PTZ d'une caméra, accédez à
page about://media-internals
interne et consultez les fonctionnalités colonne
dans la fenêtre "Capture vidéo", . "inclinaison du panoramique" et "zoomer" signifient respectivement que l'appareil photo
la valeur "Paninclinaison (absolu)" et "Zoom (absolu)" Contrôles UVC L'option "PanTilt (relatif)"
et "Zoom (relatif)" Les contrôles UVC ne sont pas compatibles avec les navigateurs basés sur Chromium.
Contrôler le PTZ de la caméra
Manipuler les paramètres et les fonctionnalités PTZ de l'appareil photo à l'aide de l'aperçu
MediaStreamTrack
à partir de l'objet stream
obtenu précédemment.
MediaStreamTrack.getCapabilities()
renvoie un dictionnaire contenant le code
et les plages ou valeurs autorisées. Par conséquent,
MediaStreamTrack.getSettings()
renvoie les paramètres actuels.
Les fonctionnalités et les paramètres de panoramique, d'inclinaison et de zoom ne sont disponibles que si pris en charge par l'appareil photo, et l'utilisateur lui a donné l'autorisation PTZ.
<ph type="x-smartling-placeholder">Appelez videoTrack.applyConstraints()
avec la PTZ avancée appropriée
des contraintes 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 réussite. Sinon, il refuse
soit:
- l'accès à la caméra avec l'autorisation PTZ n'est pas autorisé.
- la partie matérielle 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 la 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 une certaine contrainte de PTZ de la caméra
valeurs. Cette fonctionnalité est utile lorsque les capacités PTZ de la caméra sont connues à l'avance. Remarque
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 tester 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 mis en œuvre cette API à l'aide de l'API y compris le contrôle de l'utilisateur, la transparence et l'ergonomie. La possibilité d'utiliser L'API est principalement contrôlée par le même modèle d'autorisation que les API Media Capture et API Streams En réponse à une invite de l'utilisateur, le site Web est autorisé à contrôler PTZ de la caméra uniquement lorsque la page est visible par l'utilisateur.
Compatibilité du navigateur
API MediaStream
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
API Permissions
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
API Page Visibility
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
MediaDevices.getUserMedia()
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
MediaDevices.getSupportedConstraints()
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
MediaStreamTrack.applyConstraints()
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
MediaStreamTrack.getCapabilities()
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
MediaStreamTrack.getSettings()
Navigateurs pris en charge
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
Liens utiles
- Vidéo explicative sur la PTZ
- Brouillon de spécification
- Dépôt GitHub
- Entrée ChromeStatus
- Bug de suivi 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 le la spécification et l'implémentation. Image héros par Christina @ wocintechchat.com sur Unsplash.