Diese Seite wurde von der Cloud Translation API übersetzt.

Schwenken, Neigen und Zoomen der Kamera steuern

Die Funktionen zum Schwenken, Neigen und Zoomen der Kameras können nun im Web gesteuert werden.

François Beaufort

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.

Screenshot einer Nutzeraufforderung für die Kamera PTZ in Chrome für macOS. — Nutzeraufforderung zur Kamera PTZ.

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 mit der Permissions API das Objekt abfragen und überwachen. 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.

Screenshot der internen Seite in ChromeOS zum Debuggen der PTZ-Kameraunterstützung. — Interne Seite zum Debuggen der PTZ-Kameraunterstützung.

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> <ph type="x-smartling-placeholder">

Kamera-PTZ steuern.

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

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

Permissions API

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

Page Visibility API

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

`MediaDevices.getUserMedia()`

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

`MediaDevices.getSupportedConstraints()`

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

`MediaStreamTrack.applyConstraints()`

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

`MediaStreamTrack.getCapabilities()`

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

`MediaStreamTrack.getSettings()`

Unterstützte Browser

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

Quelle

Nützliche Links

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.