Ta strona została przetłumaczona przez Cloud Translation API.

Steruj przesuwaniem, przechylaniem i powiększaniem kamery

Funkcje przesuwania, pochylania i powiększania w kamerach można teraz sterować w przeglądarce.

François Beaufort

Rozwiązania do obsługi rozmów wideo w sali konferencyjnej wykorzystują kamery z funkcjami panoramowania, przechylania i powiększania (PTZ), dzięki którym oprogramowanie może skierować kamerę na uczestników spotkania. Od wersji Chrome 87 funkcje przesuwania, pochylania i powiększania w kamerach są dostępne dla witryn, które korzystają z ograniczeń ścieżki multimedialnej w MediaDevices.getUserMedia() i MediaStreamTrack.applyConstraints().

Korzystanie z interfejsu API

Wykrywanie cech

Wykrywanie funkcji na sprzęcie różni się od tego, do czego prawdopodobnie jesteś przyzwyczajony. Obecność nazw ograniczeń "pan", "tilt" i "zoom" w navigator.mediaDevices.getSupportedConstraints() informuje, że przeglądarka obsługuje interfejs API do sterowania funkcjami PTZ kamery, ale nie informuje, czy sprzęt kamery obsługuje te funkcje. Od wersji 87 Chrome obsługuje sterowanie PTZ kamery na komputerze, podczas gdy Android nadal obsługuje tylko zoom.

const supports = navigator.mediaDevices.getSupportedConstraints();
if (supports.pan && supports.tilt && supports.zoom) {
  // Browser supports camera PTZ.
}

Prośba o dostęp do funkcji PTZ kamery

Witryna może sterować PTZ kamery tylko wtedy, gdy użytkownik w wyraźny sposób przyznał kamerze uprawnienia PTZ za pomocą prompta.

Aby poprosić o dostęp do kamery PTZ, zadzwoń pod numer navigator.mediaDevices.getUserMedia(), podając ograniczenia PTZ, jak pokazano poniżej. Użytkownik będzie musiał przyznać uprawnienia zarówno do zwykłej kamery, jak i do kamery z PTZ.

Zrzut ekranu z prośbą do użytkownika o ustawienie kamery PTZ w Chrome na macOS. — Komunikat dla użytkownika dotyczący kamery PTZ.

Zwrócona obietnica zwróci obiekt MediaStream, który służy do wyświetlania użytkownikowi strumienia wideo z kamery. Jeśli kamera nie obsługuje PTZ, użytkownik zobaczy zwykły komunikat.

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);
}

Jeśli wcześniej udzielono uprawnień do korzystania z kamery, ale nie przyznano dostępu do PTZ, to uprawnienia te nie zostaną automatycznie rozszerzone o dostęp do PTZ, gdy ta funkcja stanie się dostępna. Dotyczy to nawet wtedy, gdy sama kamera obsługuje PTZ. Należy ponownie poprosić o uprawnienia. Na szczęście możesz użyć interfejsu Permissions API, aby wysyłać zapytania i monitorować stan uprawnień 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);
}

Aby sprawdzić, czy przeglądarka oparta na Chromium obsługuje PTZ w przypadku kamery, otwórz wewnętrzną stronę about://media-internals i sprawdź kolumnę „Pan-Tilt-Zoom” na karcie „Nagrywanie wideo”. „Pan Tilt” i „Zoom” oznaczają odpowiednio, że kamera obsługuje sterowanie UVC „PanTilt (Absolute)” i „Zoom (Absolute)”. Elementy sterujące UVC „Pan/Tilt (względne)” i „Zoom (względne)” nie są obsługiwane w przeglądarkach opartych na Chromium.

Zrzut ekranu strony wewnętrznej w ChromeOS do debugowania obsługi kamery PTZ. — Wewnętrzna strona do debugowania obsługi kamery PTZ.

Sterowanie kamerą PTZ

Za pomocą podglądu MediaStreamTrack z uzyskanego wcześniej obiektu stream można manipulować funkcjami i ustawieniami kamery PTZ. MediaStreamTrack.getCapabilities() zwraca słownik z obsługiwanymi możliwościami i zakresami lub dozwolonymi wartościami. W związku z tym MediaStreamTrack.getSettings() zwraca bieżące ustawienia.

Funkcje i ustawienia przesuwania, pochylania i powiększania są dostępne tylko wtedy, gdy są obsługiwane przez kamerę, a użytkownik przyznał kamerze uprawnienia PTZ.

Sterowanie kamerą PTZ.

Wywołaj funkcję videoTrack.applyConstraints() z odpowiednimi zaawansowanymi parametrami PTZ, aby sterować przesuwaniem, pochylaniem i powiększaniem obrazu w kamerze, jak pokazano w przykładzie poniżej. Zwrócona obietnica zostanie rozwiązana, jeśli zakończy się pomyślnie. W przeciwnym razie zostanie odrzucony, jeśli:

nie przyznano uprawnienia do korzystania z kamery z uprawnieniem PTZ.
sprzęt kamery nie obsługuje ograniczenia PTZ;
strona nie jest widoczna dla użytkownika; Aby wykrywać zmiany widoczności strony, użyj interfejsu Page Visibility API.

// 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...
}

Możliwe jest też skonfigurowanie przesuwania, pochylania i powiększania kamery przez wywołanie navigator.mediaDevices.getUserMedia() z niektórymi wartościami ograniczeń kamery PTZ. Jest to przydatne, gdy możliwości PTZ kamery są znane z wyprzedzeniem. Pamiętaj, że ograniczenia obowiązkowe (minimalne, maksymalne, dokładne) nie są tutaj dozwolone.

const stream = await navigator.mediaDevices.getUserMedia({
  // Website asks to reset known camera pan.
  video: { pan: 0, deviceId: { exact: "myCameraDeviceId" } }
});

Plac zabaw

Możesz przetestować interfejs API, uruchamiając demo w Glitch. Sprawdź kod źródłowy.

Zagadnienia związane z bezpieczeństwem

Autorzy specyfikacji zaprojektowali i wdrożyli ten interfejs API, wykorzystując podstawowe założenia, takie jak kontrola użytkownika, przejrzystość i ergonomia. Możliwość korzystania z tego interfejsu API jest ograniczona głównie przez ten sam model uprawnień co w przypadku interfejsu Media Capture and Streams API. W odpowiedzi na prośbę użytkownika witryna może kontrolować PTZ kamery tylko wtedy, gdy strona jest widoczna dla użytkownika.

Zgodność z przeglądarką

MediaStream API

Browser Support

Source

Permissions API

Browser Support

Source

Interfejs Page Visibility API

Browser Support

Source

`MediaDevices.getUserMedia()`

Browser Support

Source

`MediaDevices.getSupportedConstraints()`

Browser Support

Source

`MediaStreamTrack.applyConstraints()`

Browser Support

Source

`MediaStreamTrack.getCapabilities()`

Browser Support

Source

`MediaStreamTrack.getSettings()`

Browser Support

Source

Przydatne linki

Podziękowania

Ten artykuł został sprawdzony przez Joe Medley i Thomas Steiner. Dziękujemy Rijubratowi Bhaumikowi i Eero Häkkinenowi z firmy Intel za ich pracę nad specyfikacją i wdrożeniem. Baner powitalny autorstwa Christina @ wocintechchat.com na Unsplash.