게시일: 2026년 6월 29일
Chrome 144에서 <geolocation> 요소가 출시된 후 기능 요소 모음의 다음 기능 컨트롤은 <usermedia> HTML 요소입니다.
Chrome 151부터 사용할 수 있는 이 요소는 일반 권한 요청에서 카메라 및 마이크 스트림 액세스를 위한 타겟팅되고 기능적인 컨트롤로 전환하는 다음 단계를 나타냅니다. 스크립트 트리거 프롬프트에서 선언적이고 사용자 활성화 환경으로 전환함으로써 <usermedia>는 상용구 코드를 줄이고 보안을 개선하며 이전에 액세스를 거부한 사용자를 위한 원활한 복구 경로를 제공하여 오랫동안 지속된 권한 문제를 효과적으로 해결합니다.
권한 관리부터 기능 제어까지
<usermedia> 요소는 <geolocation>의 성공적인 도입에 이어 기능 요소 모음에서 출시되는 다음 전문 컨트롤입니다. PEPC 이니셔티브의 일부인 원래의 일반적인 <permission> 제안에서 이 전환을 통해 브라우저가 다양한 하드웨어 기능의 고유한 복잡성과 동작을 더 효과적으로 처리할 수 있습니다.
초기 제안에서는 허용과 거부 같은 권한 상태 관리에 주로 초점을 맞췄지만, 기능 요소는 데이터 중재자 역할을 합니다.
<geolocation> 요소는 사이트에 위치 객체를 제공하고 <usermedia>은 카메라 및 마이크 액세스의 전체 흐름을 관리합니다. 사용자 의도를 포착하고, 브라우저 프롬프트를 관리하고, MediaStream 객체를 애플리케이션에 전달합니다. 이러한 변화로 별도의 getUserMedia() 호출이 필요 없어지고 구현이 간소화되며 브라우저가 사용자의 의도를 신뢰할 수 있는 신호로 파악할 수 있습니다.
개념 검증
초기 오리진 트라이얼의 실제 데이터에 따르면 컨텍스트 내 및 사용자 시작 권한 제어가 사용자 성공률을 크게 개선하는 것으로 나타났습니다.
- Cisco는 처음에 권한을 거부한 사용자가 기존 프롬프트를 사용하여 권한을 부여할 가능성은 10%에 불과했지만 새로운 요소를 사용하면 이 비율이 65% 이상으로 높아진다고 관찰했습니다.
- Zoom은 요소를 사용하여 사용자가 복구를 안내받도록 함으로써 시스템 수준 차단기와 같은 카메라 또는 마이크 캡처 오류가 46.9% 감소했다고 보고했습니다.
- Google Meet의 경우 '마이크가 작동하지 않음'이라는 의견이 17% 감소했으며, 처음 액세스를 거부한 사용자의 권한 복구 성공률이 131% 증가했습니다.
<usermedia> 요소를 사용해야 하는 이유
<geolocation>에서 설정한 패턴을 기반으로 <usermedia> 요소는 강력한 기능을 요청하는 핵심 문제를 해결합니다. 미디어 요청은 명령형 JavaScript 호출에 의존하며, 이 호출은 컨텍스트 외부 프롬프트를 트리거하는 경우가 많습니다. 사이트를 실수로 차단한 경우 이 결정을 되돌리려면 브라우저 설정으로 깊이 이동해야 하며, 이는 종종 기능이 버려지는 '권한 구멍'으로 이어집니다.
<usermedia> 요소는 다음을 제공하여 이러한 문제를 해결합니다.
- 명확한 의도와 타이밍: 프롬프트는 브라우저 제어 요소에 대한 실제 탭 후에만 표시되므로 신뢰할 수 있는 의도 신호를 제공합니다. 이렇게 하면 브라우저가 일반적인 스크립트 트리거 요청이 실패하는 원인이 되는 자동 무음 차단을 우회할 수 있습니다.
- 간소화된 복구: 이전에 액세스가 거부된 경우 요소를 탭하면 복잡한 브라우저 설정을 탐색하지 않고도 페이지에서 카메라나 마이크를 즉시 다시 사용 설정할 수 있는 전문 복구 흐름이 트리거됩니다.
- 직접 스트림 액세스: 데이터 미디어로서 요소는 미디어 스트림을 직접 노출합니다. 이렇게 하면 애플리케이션에서 콜백과 오류 상태를 관리하는 데 필요한 상용구 코드가 줄어듭니다.
구현
이 요소를 통합하는 데는 기존 JavaScript API보다 훨씬 적은 상용구가 필요합니다. <geolocation> 요소로 설정된 선언적 패턴에 따라 HTML에 <usermedia> 태그를 추가하고 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.');
});
주요 속성
stream: 사용자가 액세스 권한을 부여하면MediaStream객체를 제공하는 읽기 전용 속성입니다.setConstraints(): 개발자가 사용자 상호작용 전에deviceId또는 해상도와 같은 하드웨어 환경설정을 업데이트할 수 있는 메서드입니다.error: 요청이 실패하거나 닫힌 경우DOMException(예:NotAllowedError)을 반환하는 읽기 전용 속성입니다.onstream: 미디어 트랙을 획득하는 즉시 실행되는 이벤트 핸들러입니다.onerror: 스트림 획득 시도가 실패할 때 실행되는 이벤트 핸들러입니다.oncancel: 획득 중에 사용자가 권한 메시지를 취소하거나 닫을 때 발생하는 이벤트 핸들러입니다.
스타일 지정 제약 조건
사용자 신뢰를 보장하고 기만적인 디자인 패턴을 방지하기 위해 <usermedia> 요소는 다른 기능 요소와 동일한 엄격한 스타일 지정 제한을 적용합니다.
- 가독성: 브라우저는 요청이 항상 읽을 수 있도록 텍스트와 배경 색상의 대비가 충분한지 (3:1 이상) 확인합니다. 요소가 속임수처럼 투명해지지 않도록 알파 채널 (
opacity)을1로 설정해야 합니다. - 크기 조정 및 간격: 브라우저에서
width,height,font-size의 최소 및 최대 경계를 적용합니다. 요소가 시각적으로 가려지지 않도록 음수 여백이나 윤곽선 오프셋을 사용 중지합니다. - 시각적 무결성: 브라우저에서 왜곡 효과를 제한합니다. 예를 들어
transform는 2D 변환과 비례 크기 조절만 지원합니다. - CSS 유사 클래스: 요소는 권한이 활성화되고 스트림이 획득되면 활성화되는 :granted와 같은 상태 기반 스타일 지정과 :hover, :active와 같은 표준 상호작용 상태를 지원합니다.
점진적 개선 및 이전 전략
<geolocation>에서 설정한 디자인 패턴에 따라 <usermedia> 요소는 단계적으로 저하되도록 빌드됩니다. 이 요소를 지원하지 않는 브라우저는 HTMLUnknownElement로 처리하고 하위 요소를 렌더링합니다. 이렇게 하면 모든 사용자에게 대체 환경을 제공할 수 있습니다.
맞춤 대체 패턴
JavaScript에서 <usermedia> 요소 지원을 프로그래매틱 방식으로 감지합니다.
if ('HTMLUserMediaElement' in window) {
// Use modern <usermedia> element logic
} else {
// Fallback to legacy getUserMedia() API
}
이 감지 로직을 사용하여 <usermedia> 요소 내에 표준 버튼을 추가하여 기존 getUserMedia() API를 트리거합니다.
<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);
});
}
오리진 트라이얼 참여자를 위한 이전
오리진 트라이얼 중에 실험적이고 일반적인 <permission> 요소를 통합한 개발자의 경우 <usermedia>로의 전환이 최소화되도록 설계되었습니다.
- 태그 업데이트: 이전
<permission>요소를 타겟팅하는 모든 선택기가 대신<usermedia>요소를 사용하도록 업데이트되도록<permission type="camera microphone">를<usermedia>로 바꿉니다. - 기능 감지:
HTMLPermissionElement에서HTMLUserMediaElement로 검사 업데이트
앞으로의 로드맵
<usermedia> 요소는 결합된 오디오 및 동영상 요청을 처리하지만 향후 기능 요소 로드맵에는 다음이 포함됩니다.
<camera>: 동영상 전용 시나리오에만 집중합니다.<microphone>: 오디오 전용 시나리오에만 집중합니다.
이러한 기능별 요소가 개발자가 더 직관적이고 신뢰할 수 있는 미디어 환경을 구축하는 데 어떻게 도움이 되는지 확인할 수 있습니다. 자세한 내용은 기능 요소 기술 가이드를 참고하세요.