Steruj przesuwaniem, przechylaniem i powiększaniem kamery

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

Rozwiązania do prowadzenia rozmów wideo do obsługi sali konferencyjnej wykorzystują kamery z funkcjami przesuwania, pochylania i powiększania (PTZ), dzięki czemu oprogramowanie może skierować kamerę na uczestników spotkania. Począwszy od Chrome 87 funkcje przesuwania, przechylania i powiększania w kamerach są dostępne na stronach internetowych, które korzystają z ograniczeń ścieżki multimediów w MediaDevices.getUserMedia() i MediaStreamTrack.applyConstraints().

Korzystanie z interfejsu API

Wykrywanie funkcji

Wykrywanie funkcji na sprzęcie różni się od tego, do którego należysz. Obecność nazw ograniczeń "pan", "tilt" i "zoom" w navigator.mediaDevices.getSupportedConstraints() informuje, że przeglądarka obsługuje interfejs API do sterowania PTZ w kamerze, ale nie informuje o tym, czy kamera obsługuje ten interfejs. Od Chrome 87 sterowanie PTZ kamery jest obsługiwane na komputerach, a Android nadal obsługuje tylko powiększenie.

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

Poproś o dostęp do kamery PTZ

Strona internetowa może sterować PTZ w kamerze tylko wtedy, gdy użytkownik jednoznacznie udzielił w niej uprawnień z uprawnieniami do PTZ.

Aby poprosić o dostęp do kamery PTZ, wywołaj funkcję navigator.mediaDevices.getUserMedia() z uwzględnieniem ograniczeń PTZ, jak pokazano poniżej. Pojawi się prośba o przyznanie zarówno zwykłej kamery, jak i kamery z uprawnieniami do PTZ.

Zwrócona obietnica zniknie z obiektem MediaStream używanym do pokazania użytkownikowi strumienia wideo z kamery. Jeśli kamera nie obsługuje PTZ, użytkownik zobaczy zwykłe powiadomienie o tym, że jest ona wyświetlana.

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

Uprawnienia do korzystania z kamery przyznane wcześniej, zwłaszcza bez dostępu do PTZ, nie uzyskują automatycznie dostępu do PTZ, jeśli stają się dostępne. Dzieje się tak nawet wtedy, gdy sama kamera obsługuje tryb PTZ. Należy ponownie poprosić o pozwolenie. Na szczęście możesz wysyłać zapytania dotyczące stanu uprawnień do PTZ i monitorować je za pomocą interfejsu Permissions API.

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 dowiedzieć się, czy przeglądarka oparta na Chromium obsługuje PTZ kamery, wejdź na wewnętrzną stronę about://media-internals i sprawdź kolumnę „Przesuwanie, pochylenie i powiększenie” na karcie „Przechwytywanie wideo”. „Przesuwanie, pochylenie” i „Powiększenie” oznaczają, że kamera obsługuje ustawienia UVC „Przechylenie bezwzględne” i „Powiększenie (bezwzględne). Opcje UVC „Przesuwanie (względne)” i „Powiększenie (względne)” nie są obsługiwane w przeglądarkach opartych na Chromium.

Sterowanie PTZ kamery

Zmień możliwości i ustawienia kamery PTZ, korzystając z podglądu MediaStreamTrack z obiektu stream uzyskanego wcześniej. Funkcja MediaStreamTrack.getCapabilities() zwraca słownik z obsługiwanymi możliwościami i zakresami lub dopuszczalnymi wartościami. Odpowiednio MediaStreamTrack.getSettings() zwraca bieżące ustawienia.

Funkcje i ustawienia przesuwania, pochylania i powiększania są dostępne tylko wtedy, gdy kamera obsługuje tę funkcję, a użytkownik przyznał do niej uprawnienia do PTZ.

Wywołaj metodę videoTrack.applyConstraints() z odpowiednimi zaawansowanymi ograniczeniami PTZ, aby sterować przesuwaniem, przechylaniem i powiększaniem kamery, jak pokazano na przykładzie poniżej. Zwrócona obietnica wygaśnie, jeśli zostanie zrealizowana. W przeciwnym razie zostanie odrzucona, jeśli:

• aparat z uprawnieniami do PTZ nie zostanie przyznany.
• kamera nie obsługuje ograniczenia kamery PTZ.
• strona nie jest widoczna dla użytkownika. Za pomocą interfejsu Page Widoczność API możesz wykrywać zmiany widoczności strony.

// 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żesz też skonfigurować przesuwanie, pochylanie i powiększanie kamery, wywołując funkcję navigator.mediaDevices.getUserMedia() z pewnymi idealnymi wartościami ograniczeń PTZ kamery. Jest to przydatne, gdy możliwości kamery PTZ są znane z wyprzedzeniem. Pamiętaj, że obowiązkowe ograniczenia (minimalne, maksymalne, ścisłe) nie są tu dozwolone.

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

Plac zabaw

Możesz pobawić się interfejsem API, uruchamiając prezentację w Glitch. Pamiętaj, aby sprawdzić kod źródłowy.

Bezpieczeństwo

Autorzy specyfikacji zaprojektowali i wdrożyli ten interfejs API tak, aby zapewnić użytkownikom kontrolę, przejrzystość i ergonomię. Dostęp do tego interfejsu API zależy głównie od tego samego modelu uprawnień co Media Capture and Streams API. W odpowiedzi na prośbę użytkownika witryna może sterować PTZ kamery tylko wtedy, gdy strona jest widoczna dla użytkownika.

Zgodność z przeglądarką

Interfejs API MediaStream

Interfejs Permissions API

Interfejs API widoczności strony

MediaDevices.getUserMedia()

MediaDevices.getSupportedConstraints()

MediaStreamTrack.applyConstraints()

MediaStreamTrack.getCapabilities()

MediaStreamTrack.getSettings()

Przydatne linki

• Wyjaśnienie PTZ
• Wersja robocza specyfikacji
• Repozytorium GitHub
• Wpis ChromeStatus
• Błąd śledzenia w Chrome

Podziękowania

Ten artykuł napisali Joe Medley i Thomas Steiner. Dziękujemy Rijubrata Bhaumik i Eero Häkkinen z firmy Intel za pracę nad specyfikacją i implementacją. Baner powitalny od Christina @ wocintechchat.com na kanale Unsplash.