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.
![Zrzut ekranu z komunikatem użytkownika dotyczącym kamery PTZ w Chrome dla systemu macOS.](https://web.developers.google.cn/static/articles/camera-pan-tilt-zoom/image/screenshot-a-camera-ptz-d14912362e22f.jpg?authuser=3&hl=pl)
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.
![Zrzut ekranu pokazujący stronę wewnętrzną w ChromeOS, która umożliwia debugowanie obsługi kamery PTZ.](https://web.developers.google.cn/static/articles/camera-pan-tilt-zoom/image/screenshot-the-internal-91bcb22280a07.png?authuser=3&hl=pl)
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.