Die Funktionen zum Schwenken, Neigen und Zoomen der Kameras können nun im Web gesteuert werden.
Lösungen für Videokonferenzen im Raummaßstab mit Schwenk-, Neige- und Zoomfunktion für Kameras
(PTZ-Funktionen), damit Software die Kamera
auf ein Meeting richten kann,
Teilnehmenden. Ab Chrome 87 werden die Funktionen zum Schwenken, Neigen und Zoomen
Kameras sind für Websites verfügbar, für die Medienspur-Einschränkungen in
MediaDevices.getUserMedia() und MediaStreamTrack.applyConstraints().
API verwenden
Funktionserkennung
Die Funktionserkennung für Hardware unterscheidet sich von der, die Sie wahrscheinlich kennen.
Das Vorhandensein der Einschränkungsnamen "pan", "tilt" und "zoom" in
navigator.mediaDevices.getSupportedConstraints() gibt an, dass der Browser
die API zur Steuerung der Kamera-PTZ unterstützt, aber nicht, ob die Kamera-Hardware
unterstützt. Ab Chrome 87 wird die Steuerung der Kamera-PTZ auf folgenden Geräten unterstützt:
Desktop-Computer. Android unterstützt jedoch weiterhin nur Zoom.
const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
// Browser supports camera PTZ.
}
Zugriff auf Kamera-PTZ anfordern
Eine Website darf die PTZ der Kamera nur steuern, wenn der Nutzer der Kamera über eine Aufforderung die Berechtigung für die PTZ gewährt hat.
Wenn du Zugriff auf die Kamera-PTZ anfordern möchtest, ruf navigator.mediaDevices.getUserMedia() mit
PTZ-Beschränkungen wie unten dargestellt. Dadurch wird der Nutzer aufgefordert,
normale Kamera und Kamera mit PTZ-Berechtigungen.
Das zurückgegebene Promise wird mit einem MediaStream-Objekt aufgelöst, das zum Anzeigen des
den Videostream der Kamera. Unterstützt die Kamera keine PTZ, muss der Nutzer
erhalten Sie 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 gewährte Kameraberechtigung, insbesondere eine ohne Zugriff auf die PTZ, erhält nicht automatisch Zugriff auf die PTZ, falls sie verfügbar wird. Das trifft zu auch wenn die Kamera selbst die PTZ unterstützt. Die Berechtigung muss angefordert werden noch einmal. Glücklicherweise können Sie die Permissions API verwenden, um das Ereignis Status der PTZ-Berechtigung.
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);
}
Ob ein Chromium-basierter Browser die PTZ für eine Kamera unterstützt, erfährst du unter
interne about://media-internals-Seite und schauen Sie sich die Funktion "Schwenken, Neigen-Zoomen" Spalte
im Bereich "Video Capture" Tab; "schwenken, neigen" und „Zoom“ bedeutet, dass die Kamera
die Funktion „PanTilt (Absolute)“ und „Zoom (Absolut)“, Einstellungen für die benutzerspezifische Zielgruppe. Die Funktion „PanTilt (relativ)“
und „Zoom (Relativ)“ UVC-Steuerelemente werden in Chromium-basierten Browsern nicht unterstützt.
Kamera-PTZ steuern
PTZ-Funktionen und -Einstellungen der Kamera mit der Vorschau bearbeiten
MediaStreamTrack aus dem zuvor abgerufenen stream-Objekt.
MediaStreamTrack.getCapabilities() gibt ein Wörterbuch mit den unterstützten
Funktionen und die Bereiche oder zulässigen Werte. Entsprechend
MediaStreamTrack.getSettings() gibt die aktuellen Einstellungen zurück.
Funktionen und Einstellungen zum Schwenken, Neigen und Zoomen sind nur verfügbar, wenn sie von Der Nutzer hat der PTZ die Berechtigung zur Kamera gewährt.
<ph type="x-smartling-placeholder">Rufe videoTrack.applyConstraints() mit der entsprechenden PTZ Advanced an.
Einschränkungen zum Schwenken, Neigen und Zoomen der Kamera, wie im Beispiel unten gezeigt.
Das zurückgegebene Promise wird bei Erfolg aufgelöst. Andernfalls wird sie abgelehnt, wenn
Entweder:
- Die Kamera mit der PTZ-Berechtigung wurde nicht gewährt.
- Die Kamerahardware unterstützt die PTZ-Einschränkung nicht.
- Die Seite ist für den Nutzer nicht sichtbar. Verwenden Sie die Page Visibility API, Änderungen an der Sichtbarkeit der Seite.
// 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 können Sie auch konfigurieren, indem Sie
navigator.mediaDevices.getUserMedia() mit idealer PTZ-Beschränkung der Kamera
Werte. Das ist praktisch, wenn die PTZ-Funktionen der Kamera im Voraus bekannt sind. Hinweis
obligatorische Einschränkungen (Min., Max., genau passend) sind hier nicht zulässig.
const stream = await navigator.mediaDevices.getUserMedia({
// Website asks to reset known camera pan.
video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
});
Spielplatz
Du kannst mit der API experimentieren, indem du die Demo auf Glitch ausführst. Weitere Informationen finden Sie unter Quellcode
Sicherheitsaspekte
Die Spezifikationsautoren haben diese API mithilfe des Kerns einschließlich Nutzersteuerung, Transparenz und Ergonomie. Die Möglichkeit, diese Die API nutzt primär das gleiche Berechtigungsmodell wie die Media Capture- und Streams API Als Reaktion auf eine Aufforderung des Nutzers darf die Website Kamera-PTZ nur verwenden, wenn die Seite für den Nutzer sichtbar ist.
Browserkompatibilität
MediaStream-API
Permissions API
Page Visibility API
MediaDevices.getUserMedia()
MediaDevices.getSupportedConstraints()
MediaStreamTrack.applyConstraints()
MediaStreamTrack.getCapabilities()
MediaStreamTrack.getSettings()
Nützliche Links
- PTZ – Erläuterung
- Spezifikationsentwurf
- GitHub-Repository
- ChromeStatus-Eintrag
- Tracking-Fehler in Chrome
Danksagungen
Dieser Artikel wurde von Joe Medley und Thomas Steiner gelesen. Vielen Dank an Rijubrata Bhaumik und Eero Häkkinen bei Intel für ihre Arbeit am Spezifikation und die Implementierung. Hero-Image von Christina @ wocintechchat.com auf Unsplash.