Steruj przesuwaniem, przechylaniem i powiększaniem kamery

W przeglądarce możesz w końcu kontrolować funkcje przesuwania, pochylania i powiększania w kamerach.

Rozwiązania do rozmów wideo na dużą skalę wdrażają kamery z możliwością przesuwania, pochylania i powiększania funkcje PTZ, dzięki którym oprogramowanie może kierować kamerę na spotkanie. uczestników. Począwszy od Chrome 87 funkcje przesuwania, pochylania i powiększania są włączone z kamer są dostępne dla witryn wykorzystujących ograniczenia ścieżki multimedió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 funkcją PTZ kamery, ale nie obsługuje kamery który ją obsługuje. Od wersji Chrome 87 sterowanie widokiem kamery w trybie PTZ jest obsługiwane na 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 w trybie PTZ

Witryna może sterować kamerą PTZ tylko wtedy, gdy użytkownik wyraźnie przyznano kamerze uprawnienia PTZ, korzystając z monitu.

Aby poprosić o dostęp do kamery w trybie PTZ, zadzwoń pod numer navigator.mediaDevices.getUserMedia() i z ograniczeniami PTZ, jak pokazano poniżej. Dzięki temu użytkownik będzie musiał przyznać zwykła kamera i kamera z uprawnieniami PTZ.

Zwrócona obietnica zostanie zrealizowana za pomocą obiektu MediaStream używanego do pokazywania i wysyłanie do użytkownika strumienia wideo z kamery. Jeśli kamera nie obsługuje PTZ, użytkownik otrzyma standardowy 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);
}

przyznane wcześniej uprawnienia do korzystania z kamery, w szczególności bez dostępu do monitoringu w trybie kamery, nie uzyska automatycznie dostępu do PTZ, jeśli stanie się on dostępny. To prawda nawet jeśli kamera obsługuje tryb PTZ. Musisz poprosić o te uprawnienia ponownie. 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 dowiedzieć się, czy przeglądarka oparta na Chromium obsługuje tryb PTZ kamery, otwórz wewnętrznej strony about://media-internals i zapoznaj się z funkcją „Pan-przechyl-powiększanie”, kolumna w obszarze „Video Capture” Tab; „przesuwanie, pochylanie” i „powiększenie” oznacza, że aparat obsługuje opcję „PanPochylenie (wartość bezwzględna)” i „Powiększenie (bezwzględne)” Ustawienia UVC. Opcja „Panprzechyl (względna)” i „Powiększenie (względnie)” Ustawienia UVC nie są obsługiwane w przeglądarkach opartych na Chromium.

Sterowanie trybem PTZ kamery

Manipulowanie możliwościami i ustawieniami kamery PTZ za pomocą podglądu MediaStreamTrack z obiektu stream uzyskanego wcześniej. MediaStreamTrack.getCapabilities() zwraca słownik z obsługiwanym wyrażeniem możliwości oraz zakresy i dozwolone wartości. MediaStreamTrack.getSettings() zwraca bieżące ustawienia.

Funkcje i ustawienia przesuwania, pochylania i powiększania są dostępne tylko wtedy, gdy są obsługiwane przez kamera i użytkownik przyznał jej uprawnienia do pracy w trybie PTZ.

Wywołaj videoTrack.applyConstraints() przy użyciu odpowiedniego PTZ Advanced funkcji do sterowania przesuwaniem, pochyleniem i powiększeniem kamery, jak pokazano w poniższym przykładzie. Jeśli obietnica zostanie zwrócona, zostanie zrealizowana. W przeciwnym razie odrzuci, jeśli albo:

• kamera z uprawnieniami PTZ nie jest przyznawana.
• Kamera nie obsługuje ograniczenia PTZ.
• nie będzie widoczna dla użytkownika. Użyj interfejsu Page Visibility API do wykrywania widoczność 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żna też skonfigurować przesuwanie, pochylanie i powiększanie kamery przez połączenie navigator.mediaDevices.getUserMedia() z idealnym ograniczeniem PTZ kamery . Jest to przydatne, gdy znane są z wyprzedzeniem możliwości funkcji PTZ kamery. Notatka że obowiązkowe ograniczenia (min., maks., ścisłe) są tu niedozwolone.

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

Plac zabaw

Możesz wypróbować interfejs API, uruchamiając wersję demonstracyjną aplikacji Glitch. Nie zapomnij wymeldować się w kodzie źródłowym.

Kwestie związane z bezpieczeństwem

Autorzy specyfikacji zaprojektowali i zaimplementowali ten interfejs API, wykorzystując podstawowe takich jak kontrola użytkownika, przejrzystość i ergonomia. Możliwość korzystania z tej karty Interfejs API podlega głównie tym samym modelom uprawnień co funkcje Media Capture i Streams API. W odpowiedzi na prośbę użytkownika witryna może kontrolować kamera PTZ 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

• Objaśnienie dotyczące 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 ze specyfikacją i implementacją. Baner powitalny: Christina @ wocintechchat.com na kanale Unsplash.