Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

<usermedia> HTML 요소 소개

Mari Viana

Minh Le

게시일: 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> 요소는 다음을 제공하여 이러한 문제를 해결합니다.

명확한 의도와 타이밍: 프롬프트는 브라우저 제어 요소에 대한 실제 탭 후에만 표시되므로 신뢰할 수 있는 의도 신호를 제공합니다. 이렇게 하면 브라우저가 일반적인 스크립트 트리거 요청이 실패하는 원인이 되는 자동 무음 차단을 우회할 수 있습니다.
간소화된 복구: 이전에 액세스가 거부된 경우 요소를 탭하면 복잡한 브라우저 설정을 탐색하지 않고도 페이지에서 카메라나 마이크를 즉시 다시 사용 설정할 수 있는 전문 복구 흐름이 트리거됩니다.
직접 스트림 액세스: 데이터 미디어로서 요소는 미디어 스트림을 직접 노출합니다. 이렇게 하면 애플리케이션에서 콜백과 오류 상태를 관리하는 데 필요한 상용구 코드가 줄어듭니다.

기능	`getUserMedia()` JS API	`<usermedia>` HTML 요소
권한 메시지의 트리거 이벤트	명령형 스크립트 실행 (`getUserMedia`)	사용자가 브라우저 제어 요소를 클릭함
브라우저 역할	상태 및 휴리스틱을 기반으로 프롬프트를 결정합니다.	데이터 미디에이터 역할을 함 (동의 및 스트림 전송 관리)
부지 책임	JavaScript API를 수동으로 호출하고, 콜백을 처리하고, 오류를 관리합니다.	`stream` 이벤트를 수신하고 `stream` 속성에 액세스
핵심 목표	기본 카메라 및 마이크 액세스	마찰을 줄여 액세스, 권한 관리, 복구 간소화

구현

이 요소를 통합하는 데는 기존 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>: 오디오 전용 시나리오에만 집중합니다.

이러한 기능별 요소가 개발자가 더 직관적이고 신뢰할 수 있는 미디어 환경을 구축하는 데 어떻게 도움이 되는지 확인할 수 있습니다. 자세한 내용은 기능 요소 기술 가이드를 참고하세요.