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 Chrome 87 funkcje przesuwania, pochylania i powiększania dostępne w kamerach są dostępne na stronach internetowych, które mają ograniczenia ścieżki multimediów w MediaDevices.getUserMedia() i MediaStreamTrack.applyConstraints().

Korzystanie z interfejsu API

Wykrywanie cech

Wykrywanie funkcji na sprzęcie działa inaczej niż zwykle. 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.
}

Poproś o dostęp do kamery w trybie PTZ

Witryna może sterować PTZ kamery tylko wtedy, gdy użytkownik wyraźnie zezwolił na to w ramach promptu.

Aby poprosić o dostęp do kamery PTZ, zadzwoń pod numer navigator.mediaDevices.getUserMedia(), podając ograniczenia PTZ, jak pokazano poniżej. Zobaczysz prośbę o przyznanie uprawnień zarówno do zwykłej kamery, jak i kamery z funkcją 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 trybu 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 przyznano uprawnienia do korzystania z aparatu, 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. Dzieje się tak nawet wtedy, gdy kamera obsługuje tryb PTZ. Należy ponownie poprosić o uprawnienia. Za pomocą interfejsu Permissions API możesz sprawdzać i sprawdzać 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 danej 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 sterowanie UVC „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 pokazujący stronę wewnętrzną w ChromeOS, która umożliwia debugowanie 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:

kamera z uprawnieniami PTZ nie jest przyznawana.
Kamera nie obsługuje ograniczenia PTZ.
nie będzie widoczna dla użytkownika. Aby wykryć 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żna też skonfigurować przesuwanie, pochylanie i powiększanie kamery, wywołując funkcję navigator.mediaDevices.getUserMedia() z niektórymi wartościami idealnych ograniczeń PTZ kamery. Jest to przydatne, gdy możliwości kamery PTZ 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, korzystając z podstawowych zasad, takich 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 prompt użytkownika witryna może sterować funkcją PTZ kamery tylko wtedy, gdy strona jest widoczna dla użytkownika.

Zgodność z przeglądarką

MediaStream API

Obsługa przeglądarek

Źródło

Interfejs Permissions API

Obsługa przeglądarek

Źródło

Interfejs Page Visibility API

Obsługa przeglądarek

Źródło

`MediaDevices.getUserMedia()`

Obsługa przeglądarek

Źródło

`MediaDevices.getSupportedConstraints()`

Obsługa przeglądarek

Źródło

`MediaStreamTrack.applyConstraints()`

Obsługa przeglądarek

Źródło

`MediaStreamTrack.getCapabilities()`

Obsługa przeglądarek

Źródło

`MediaStreamTrack.getSettings()`

Obsługa przeglądarek

Źródło

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.