Die Funktionen zum Schwenken, Neigen und Zoomen von Kameras sind jetzt auch im Web steuerbar.
Bei räumlichen Videokonferenzlösungen werden Kameras mit Schwenk-, Neigungs- und Zoomfunktionen (PTZ) eingesetzt, sodass die Software die Kamera auf die Teilnehmer der Videokonferenz richten kann. Ab Chrome 87 sind die Funktionen zum Schwenken, Neigen und Zoomen von Kameras für Websites mit Mediatrack-Einschränkungen in MediaDevices.getUserMedia() und MediaStreamTrack.applyConstraints() verfügbar.
API verwenden
Funktionserkennung
Die Funktionserkennung für Hardware unterscheidet sich von dem, was Sie wahrscheinlich gewohnt sind.
Wenn in navigator.mediaDevices.getSupportedConstraints() die Einschränkungsnamen "pan", "tilt" und "zoom" vorhanden sind, erkennen Sie, dass der Browser die API zum Steuern der PTZ der Kamera unterstützt, aber nicht, ob die Kamerahardware sie unterstützt. Ab Chrome 87 wird die Steuerung der Kamera-PTZ auf Computern unterstützt, während Android weiterhin nur Zoom unterstützt.
const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
// Browser supports camera PTZ.
}
PTZ-Zugriff auf Kamera anfordern
Eine Website darf die PTZ der Kamera nur dann steuern, wenn der Nutzer der Kamera über eine Aufforderung explizit eine Berechtigung für die Kamera erteilt hat.
Wenn Sie Zugriff auf die Kamera-PTZ anfordern möchten, rufen Sie navigator.mediaDevices.getUserMedia() mit den PTZ-Einschränkungen auf, wie unten dargestellt. Dadurch wird der Nutzer aufgefordert, sowohl die normale Kamera als auch die Kamera eine PTZ-Berechtigung zu erteilen.
Das zurückgegebene Promise wird mit einem MediaStream-Objekt aufgelöst, mit dem dem Nutzer der Kamera-Videostream angezeigt wird. Wenn die Kamera die PTZ nicht unterstützt, erhält der Nutzer eine normale Kamera-Aufforderung.
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);
}
Eine zuvor erteilte Kameraberechtigung, insbesondere eine ohne PTZ-Zugriff, erhält nicht automatisch Zugriff auf die PTZ, wenn sie verfügbar wird. Dies gilt auch, wenn die Kamera selbst PTZ unterstützt. Die Berechtigung muss noch einmal angefordert werden. Glücklicherweise können Sie die Permissions API verwenden, um den Status der PTZ-Berechtigung abzufragen und zu überwachen.
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);
}
Wenn Sie wissen möchten, ob ein Chromium-basierter Browser die PTZ für eine Kamera unterstützt, rufen Sie die interne about://media-internals-Seite auf und sehen Sie sich auf dem Tab „Videoaufnahme“ die Spalte „Schwenken/Neigen/Zoomen“ an. „Schwenken“ und „Zoomen“ bedeuten, dass die Kamera die UVC-Steuerelemente „Schwenken (Absolut)“ und „Zoom (Absolut)“ unterstützt. Die UVC-Steuerelemente „Schwenken (relative)“ und „Zoom (relativ)“ werden in Chromium-basierten Browsern nicht unterstützt.
Kamera-PTZ steuern
Bearbeiten Sie die PTZ-Funktionen und -Einstellungen der Kamera mit der Vorschau-MediaStreamTrack aus dem zuvor abgerufenen stream-Objekt.
MediaStreamTrack.getCapabilities() gibt ein Wörterbuch mit den unterstützten Funktionen und den Bereichen oder zulässigen Werten zurück. MediaStreamTrack.getSettings() gibt entsprechend die aktuellen Einstellungen zurück.
Schwenk-, Neige- und Zoomfunktionen und ‐einstellungen sind nur verfügbar, wenn dies von der Kamera unterstützt wird und der Nutzer der Kamera die Berechtigung für die PTZ erteilt hat.
Rufen Sie videoTrack.applyConstraints() mit den entsprechenden erweiterten PTZ-Einschränkungen auf, um Schwenken, Neigen und Zoomen der Kamera zu steuern, wie im folgenden Beispiel gezeigt.
Das zurückgegebene Promise wird bei Erfolg aufgelöst. Andernfalls wird sie abgelehnt, wenn einer der folgenden Punkte zutrifft:
- die Kamera mit PTZ-Berechtigung nicht erteilt wurde.
- Die Kamerahardware unterstützt die PTZ-Beschränkung nicht.
- die Seite für den Nutzer nicht sichtbar ist. Verwenden Sie die Page visibility API, um Änderungen der Seitensichtbarkeit zu erkennen.
// 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...
}
Schwenken, Neigen und Zoomen der Kamera lassen sich auch konfigurieren. Rufen Sie dazu navigator.mediaDevices.getUserMedia() mit einigen idealen Beschränkungswerten für die Kamera-PTZ auf. Das ist praktisch, wenn die PTZ-Fähigkeiten der Kamera im Voraus bekannt sind. Beachten Sie, dass erforderliche Einschränkungen (min, max, genau) hier nicht zulässig sind.
const stream = await navigator.mediaDevices.getUserMedia({
// Website asks to reset known camera pan.
video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
});
Spielplatz
Du kannst die API ausprobieren, indem du die Demo auf Glitch ausführst. Sehen Sie sich unbedingt den Quellcode an.
Sicherheitsaspekte
Die Spezifikationsautoren haben diese API auf Basis der Nutzersteuerung, Transparenz und Ergonomie entworfen und implementiert. Die Möglichkeit zur Verwendung dieser API wird hauptsächlich durch dasselbe Berechtigungsmodell wie die Media Capture und Streams API eingeschränkt. Als Reaktion auf eine Nutzeraufforderung darf die Website die Kamera-PTZ nur dann steuern, wenn die Seite für den Nutzer sichtbar ist.
Browserkompatibilität
MediaStream-API
Berechtigungen-API
Page Transparency API
MediaDevices.getUserMedia()
MediaDevices.getSupportedConstraints()
MediaStreamTrack.applyConstraints()
MediaStreamTrack.getCapabilities()
MediaStreamTrack.getSettings()
Nützliche Links
- PTZ-Erklärung
- Spezifikationsentwurf
- GitHub-Repository
- ChromeStatus-Eintrag
- Tracking-Fehler in Chrome
Danksagungen
Dieser Artikel wurde von Joe Medley und Thomas Steiner geprüft. Wir danken Rijubrata Bhaumik und Eero Häkkinen bei Intel für ihre Arbeit an der Spezifikation und der Implementierung. Hero-Image von Christina @ wocintechchat.com auf Unsplash