Opublikowano: 29 czerwca 2026 r.
Po wprowadzeniu elementu <geolocation>
element w Chrome 144 kolejnym funkcjonalnym
elementem sterującym w pakiecie Capability Elements jest element HTML <usermedia>.
Ten element, dostępny od Chrome 151, stanowi kolejny etap przejścia od ogólnych próśb o uprawnienia do ukierunkowanych i funkcjonalnych elementów sterujących dostępem do strumieni z kamery i mikrofonu. Dzięki odejściu od promptów wywoływanych przez skrypt
na rzecz deklaratywnego i aktywowanego przez użytkownika interfejsu <usermedia>
zmniejsza ilość kodu boilerplate, zwiększa bezpieczeństwo i zapewnia użytkownikom, którzy wcześniej odmówili dostępu, bezproblemową ścieżkę odzyskiwania, skutecznie rozwiązując długotrwały problem z uprawnieniami.
Od zarządzania uprawnieniami do kontroli możliwości
Element <usermedia> jest kolejnym specjalistycznym elementem sterującym, który zostanie wprowadzony w pakiecie
Capability Elements po udanym wprowadzeniu elementu
<geolocation>. To przejście od pierwotnej i ogólnej <permission>
propozycji – części inicjatywy PEPC – pozwala przeglądarce skuteczniej radzić sobie z unikalnymi
złożonościami i zachowaniami różnych możliwości sprzętowych.
Wczesna propozycja skupiała się głównie na zarządzaniu stanami uprawnień, takimi jak zezwolenie i odmowa, natomiast elementy Capability Elements działają jako pośrednicy danych.
Element <geolocation> udostępnia Twojej witrynie obiekt lokalizacji, a
<usermedia> zarządza całym procesem dostępu do kamery i mikrofonu. Rejestruje on intencje użytkownika, zarządza promptem przeglądarki i dostarcza do aplikacji obiekt MediaStream. Ta zmiana eliminuje konieczność oddzielnych wywołań getUserMedia(), upraszcza implementację i zapewnia, że przeglądarka ma zaufany sygnał intencji użytkownika.
Weryfikacja koncepcji
Dane z rzeczywistych przypadków użycia ze wstępnego testowania origin wykazały, że elementy sterujące uprawnieniami w kontekście i inicjowane przez użytkownika znacznie zwiększają współczynnik powodzenia użytkowników.
- Firma Cisco zauważyła, że użytkownicy, którzy początkowo odmówili uprawnień, zaledwie w 10% przypadków przyznawali uprawnienia za pomocą starszych promptów, ale w przypadku nowego elementu ten odsetek wzrósł do ponad 65%.
- Firma Zoom zgłosiła spadek o 46,9% liczby błędów związanych z przechwytywaniem obrazu z kamery lub dźwięku z mikrofonu, takich jak blokady na poziomie systemu, dzięki użyciu elementu do prowadzenia użytkowników przez proces odzyskiwania.
- W Google Meet odnotowano spadek o 17% liczby opinii „mikrofon nie działa” oraz wzrost o 131% liczby przypadków skutecznego odzyskania uprawnień przez użytkowników, którzy początkowo odmówili dostępu.
Dlaczego warto używać elementu <usermedia>?
Element <usermedia>
opiera się na wzorcach ustalonych przez <geolocation> i rozwiązuje podstawowe problemy związane z żądaniem zaawansowanych możliwości. Żądania multimediów opierają się na imperatywnych wywołaniach JavaScriptu, które często wywołują prompty poza kontekstem. Jeśli przypadkowo zablokujesz swoją witrynę, cofnięcie tej decyzji wymaga przejścia do ustawień przeglądarki, co jest „dziurą w uprawnieniach”, która często prowadzi do porzucenia funkcji.
Element <usermedia> rozwiązuje te problemy, zapewniając:
- Jasne intencje i czas: prompt pojawia się dopiero po fizycznym kliknięciu elementu sterowanego przez przeglądarkę, co stanowi zaufany sygnał intencji. Dzięki temu przeglądarka może ominąć automatyczne ciche blokady, które często powodują niepowodzenie typowych żądań wywoływanych przez skrypt.
- Uproszczone odzyskiwanie: jeśli dostęp został wcześniej odmówiony, kliknięcie elementu wywołuje specjalny proces odzyskiwania, który umożliwia ponowne włączenie kamery lub mikrofonu bezpośrednio na stronie bez konieczności przechodzenia do złożonych ustawień przeglądarki.
- Bezpośredni dostęp do strumienia: jako pośrednik danych element bezpośrednio udostępnia strumień multimediów. Zmniejsza to ilość powtarzalnego kodu wymaganego do zarządzania wywołaniami zwrotnymi i stanami błędów w aplikacji.
Implementacja
Integracja elementu wymaga znacznie mniej kodu boilerplate niż starszy interfejs API JavaScript. Zgodnie z deklaratywnym wzorcem ustalonym przez element
<geolocation> możesz dodać tag <usermedia> do kodu HTML i
skonfigurować wymagania sprzętowe za pomocą metody setConstraints().
<usermedia id="media-ctrl">
<button>Enable camera and microphone</button>
</usermedia>
const el = document.getElementById('media-ctrl');
// Specify hardware preferences before user interaction:
el.setConstraints({
video: { width: 1280, height: 720 },
audio: { echoCancellation: true }
});
// Handle successful stream acquisition:
el.addEventListener('stream', () => {
videoPreview.srcObject = el.stream;
});
// Handle stream acquisition failure:
el.addEventListener('error', () => {
console.error(`Access failed: ${el.error?.name}`);
});
// Handle prompt cancellation or dismissal:
el.addEventListener('cancel', () => {
console.log('Permission prompt was dismissed by the user.');
});
Kluczowe atrybuty i właściwości
stream: właściwość tylko do odczytu, która udostępnia obiektMediaStream, gdy użytkownik przyzna dostęp.setConstraints(): metoda, która umożliwia deweloperom aktualizowanie preferencji sprzętowych, takich jakdeviceIdczy rozdzielczość, przed interakcją z użytkownikiem.error: właściwość tylko do odczytu, która zwracaDOMException(np.NotAllowedError), jeśli żądanie się nie powiedzie lub zostanie odrzucone.onstream: procedura obsługi zdarzeń, która jest wywoływana natychmiast po uzyskaniu ścieżek multimediów.onerror: procedura obsługi zdarzeń, która jest wywoływana, gdy próba uzyskania strumienia się nie powiedzie.oncancel: procedura obsługi zdarzeń, która jest wywoływana, gdy użytkownik anuluje lub odrzuci prompt uprawnień podczas uzyskiwania dostępu.
Ograniczenia dotyczące stylów
Aby zapewnić zaufanie użytkowników i zapobiec wprowadzającym w błąd wzorcom projektowym, element <usermedia>
stosuje te same rygorystyczne ograniczenia dotyczące stylów co inne elementy Capability
Elements:
- Czytelność: przeglądarka sprawdza kontrast między tekstem a kolorem tła (co najmniej 3:1), aby zapewnić czytelność żądania. Aby zapobiec wprowadzającej w błąd przezroczystości elementu, musisz ustawić kanał alfa (
opacity) na1. - Rozmiar i odstępy: przeglądarka wymusza minimalne i maksymalne granice dla właściwości
width,heightifont-size. Wyłącza ujemne marginesy i przesunięcia konturów, aby zapobiec wizualnemu zasłanianiu elementu. - Integralność wizualna: przeglądarka ogranicza efekty zniekształcające. Na przykład
transformobsługuje tylko tłumaczenia 2D i proporcjonalne skalowanie. - Pseudoklasy CSS: element obsługuje style oparte na stanie, takie jak :granted (która aktywuje się, gdy uprawnienia są aktywne i strumień jest uzyskiwany), a także standardowe stany interakcji, takie jak :hover i :active.
Strategia progresywnego ulepszania i migracji
Zgodnie z wzorcem projektowym ustalonym przez element <geolocation> element <usermedia>
został zaprojektowany tak, aby działać w sposób stopniowy. Przeglądarki, które nie obsługują tego elementu, będą traktować go jako HTMLUnknownElement i renderować jego elementy podrzędne. Dzięki temu możesz zapewnić rezerwowy interfejs wszystkim użytkownikom.
Niestandardowy wzorzec rezerwowy
Programowe wykrywanie obsługi elementu <usermedia> w JavaScript:
if ('HTMLUserMediaElement' in window) {
// Use modern <usermedia> element logic
} else {
// Fallback to legacy getUserMedia() API
}
Użyj tej logiki wykrywania, aby dodać standardowy przycisk w elemencie <usermedia>
i wywołać starszy interfejs API getUserMedia():
<usermedia id="stream-handler">
<button id="fallback-stream-handler">
Enable Camera and Mic
</button>
</usermedia>
// Function for handling video/audio streams:
function handleStream (event) {
/* ... */
}
if ('HTMLUserMediaElement' in window) {
// In this case, we have <usermedia> element support:
const streamHandler = document.getElementById('stream-handler');
streamHandler.addEventListener('stream', event => {
handleStream(event);
});
} else {
// <usermedia> element support is missing, so fall back instead:
const fallbackStreamHandler = document.getElementById('fallback-stream-handler');
fallbackStreamHandler.addEventListener('click', event => {
navigator.mediaDevices.getUserMedia({video: true, audio: true}).then(handleStream);
});
}
Migracja dla uczestników testowania origin
Deweloperzy, którzy zintegrowali eksperymentacyjny i ogólny <permission>
element podczas testowania origin, mogą przejść na element <usermedia> w minimalnym stopniu.
- Aktualizacja tagu: zastąp
<permission type="camera microphone">elementem<usermedia>aby wszystkie selektory kierowane na poprzednie<permission>elementy zostały zaktualizowane i używały elementu<usermedia>zamiast. - Wykrywanie funkcji: zaktualizuj sprawdzanie z
HTMLPermissionElementnaHTMLUserMediaElement.
Plan działania
Element <usermedia> obsługuje połączone żądania audio i wideo, a
plan działania dotyczący przyszłych elementów Capability Elements obejmuje:
<camera>: skupia się na scenariuszach, w których używane jest tylko wideo.<microphone>: skupia się na scenariuszach, w których używane jest tylko audio.
Możesz zobaczyć, jak te elementy specyficzne dla możliwości pomagają deweloperom tworzyć bardziej intuicyjne i wiarygodne interfejsy multimedialne. Więcej informacji znajdziesz w przewodniku technicznym dotyczącym elementów Capability Elements.