원격 재생 API

W3C 권고안 후보 초안

이 문서에 대한 자세한 정보
이 버전:
https://www.w3.org/TR/2024/CRD-remote-playback-20240430/
최신 공개 버전:
https://www.w3.org/TR/remote-playback/
최신 에디터 초안:
https://w3c.github.io/remote-playback/
이력:
https://www.w3.org/standards/history/remote-playback/
커밋 히스토리
구현 보고서:
https://www.w3.org/wiki/Second_Screen/Implementation_Status#Remote_Playback_API
에디터:
Mark Foltz (Google)
이전 에디터:
Mounir Lamouri (Google)
Anton Vayvod (Google)
피드백:
GitHub w3c/remote-playback (풀 리퀘스트, 새 이슈, 오픈 이슈)
테스트 스위트
GitHub web-platform-tests/remote-playback
w3c-test.org/remote-playback/

Copyright © 2024 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.

초록

이 명세는 HTMLMediaElement를 확장하여 웹 페이지에서 미디어의 원격 재생을 제어할 수 있는 API를 정의합니다.

이 문서의 상태

이 섹션은 이 문서가 공개될 당시의 상태를 설명합니다. 현재 W3C의 간행물 목록과 이 기술 보고서의 최신 개정판은 https://www.w3.org/TR/에 있는 W3C 기술 보고서 인덱스에서 찾을 수 있습니다.

이 문서는 Second Screen Working Group에서 권고안 후보 초안(Candidate Recommendation Draft)으로 Recommendation track을 사용하여 발행된 것입니다.

이 문서는 그룹이 외부 프레젠테이션 유형 디스플레이에서 웹 콘텐츠를 표시한 경험을 바탕으로 하며, 필요할 때마다 Presentation API 명세의 패턴과 설계 고려사항을 재사용합니다[PRESENTATION-API]。

이 문서는 여전히 작업 중이며 변경될 수 있지만, 워킹 그룹은 API 표면이 안정적이라고 봅니다. 이슈 트래커에 있는 대부분의 남은 이슈는 현재로서는 경미하다고 간주되며, #41만 제외됩니다.

#41 이슈는 원격 재생 기기가 지원할 것으로 기대되는 미디어 재생 기능의 집합에 대해 논의합니다. 그룹은 이러한 기능을 원격 재생 시 사용할 때 생길 수 있는 상호 운용성 문제를 식별하기 위해 개발자 피드백과 구현 경험을 추가로 수집할 것이며, 받은 피드백을 바탕으로 명세를 명확히 할 것입니다.

기타 이슈나 우려 사항이 있다면 버그를 등록하거나 메일링 리스트로 이메일을 보낼 수 있습니다. 오타 등 사소한 편집 변경은 풀 리퀘스트를 보내주시면 감사하겠습니다.

워킹 그룹은 모든 분들에게 본 문서의 검토를 요청하며, W3C의 관련 그룹들과 함께 접근성, 국제화, 프라이버시, 보안, 기술 아키텍처 원칙에 대한 수평 검토를 수행할 예정입니다.

위험(risk)함으로 식별된 기능은 없습니다.

Second Screen Working Group은 Candidate Recommendation 기간 동안 Remote Playback API의 테스트 스위트를 개발하고 구현 보고서를 준비할 예정입니다. 이 명세가 Proposed Recommendation 단계로 나아가기 위해서는 각각의 기능에 대해 두 개의 독립적이고 상호 운용 가능한 구현이 입증되어야 하며, 자세한 사항은 Candidate Recommendation 종료 기준 섹션에 나와 있습니다.

권고안 후보(Candidate Recommendation)로 게재된다고 해서 W3C 및 그 회원들의 승인(endorsement)을 의미하지 않습니다. Candidate Recommendation Draft는 워킹 그룹에서 추후 Candidate Recommendation 스냅샷에 포함시키고자 하는 변경 사항을 통합한 초안입니다.

이 문서는 초안으로, 언제든지 다른 문서로 대체되거나, 업데이트 또는 폐기될 수 있습니다. 이 문서는 작업 중인 문서로만 인용하는 것이 적합합니다.

이 문서는 W3C 특허 정책에 따라 운영되는 그룹에서 작성되었습니다. W3C는 그룹의 산출물과 관련하여 이행된 특허 공개 내역의 공개 목록을 유지하며, 해당 페이지에는 특허를 공개하는 방법에 대한 안내도 포함되어 있습니다. 개인이 본인이 Essential Claim(s)이 포함되어 있다고 믿는 특허에 대한 정보를 실제로 알고 있다면 W3C 특허 정책의 6절에 따라 정보를 공개해야 합니다.

이 문서는 2023년 11월 3일 W3C 프로세스 문서를 따릅니다.

1. 적합성

규범적이지 않은 부분으로 표시된 절뿐만 아니라 이 명세의 모든 작성 지침, 다이어그램, 예시, 노트도 비규범적입니다. 이 명세의 그 밖의 모든 내용은 규범적입니다.

이 문서에서 MAY, MUST, MUST NOT, RECOMMENDED, SHOULD와 같은 주요 단어는 여기 표시된 대로 모두 대문자로 나타날 때에 한해 BCP 14 [RFC2119] [RFC8174]에서 설명된 대로 해석되어야 합니다.

이 명세는 하나의 제품—즉 여기에 포함된 인터페이스를 구현하는 user agent—에 적용되는 적합성 기준을 정의합니다.

이 명세에서 정의한 API를 ECMAScript로 노출하는 구현체는 Web IDL 명세 [WEBIDL]의 ECMAScript 바인딩에 부합하게 구현해야 합니다.

2. 소개

이 절은 비규범적입니다.

이 명세는 연결된 TV, 프로젝터, 오디오 전용 스피커와 같은 원격 재생 기기를 웹에서 사용할 수 있도록 하며, HDMI, DVI 등 유선 방식과 Miracast, Chromecast, DLNA, AirPlay 등 무선 기술로 연결된 재생 기기도 고려합니다.

화면 크기가 작거나 스피커가 작은 기기는 대규모 청중(예: 회의실의 동료들, 가정의 친구와 가족)을 대상으로 미디어 콘텐츠를 재생하기 어렵습니다. 외부의 더 크고/혹은 더 큰 볼륨의 원격 재생 기기에서 미디어를 재생하면 체감 품질 및 미디어의 전달력을 높일 수 있습니다.

이 명세의 핵심은 browsing context 역할을 하는 페이지가 선택한 원격 재생 기기에서 특정 미디어 요소의 원격 재생을 시작하고 제어할 수 있도록 하는 것입니다. 원격 재생이 어떻게 시작되고 제어되는지에 대해서는 user agent에 맡겨, 다양한 방식의 원격 재생 기기 활용을 허용합니다. 예를 들어, 원격 재생 기기가 HDMI나 Miracast로 연결된 경우, browsing context로써 동작하는 동일한 UA가 원격 미디어를 렌더링합니다. 하지만 미디어를 같은 기기에서 재생하는 대신, 운영체제가 제공하는 어떠한 방법이든 외부 원격 재생 기기를 쓸 수 있습니다. 이 경우 browsing context와 미디어 플레이어가 동일 UA에서 실행되고, 운영체제를 통해 플레이어의 출력을 원격 재생 기기에 라우트합니다. 이것을 일반적으로 미디어 미러링(media mirroring)이라 하며, 이렇게 연결된 원격 재생 기기에는 추가 요구사항이 없습니다.

원격 재생 기기가 미디어 재생과 browsing context와의 통신은 가능하지만 미디어를 가져올 수 없는 경우, browsing context가 미디어 데이터를 가져와서 원격 재생 기기에 전달해야 합니다. 이는 일반적으로 미디어 리모팅(media remoting)이라고 부릅니다.

원격 재생 기기가 미디어를 직접 가져와 재생할 수 있고 browsing context와의 통신도 가능하다면, browsing context는 리모트 미디어를 가져오거나 렌더링할 필요가 없습니다. 이 경우 UA는 원격 재생 기기에 미디어 소스 등 필요한 데이터를 전달해 해당 기기 자체에서 재생하도록 요청하는 프록시 역할을 합니다. 이를 미디어 플링(media flinging)이라고 부르며, 앞으로 이 방식의 디스플레이 연결을 위해 표준 프로토콜이 정의되면 원격 재생 기기가 선택적으로 구현할 수 있습니다.

여기 정의된 API는 위의 다양한 방식으로 원격 재생 기기와 연결되는 UA에서 사용하기 위한 것입니다.

3. 사용 사례 및 요구 사항

이 절은 비규범적입니다.

이 명세의 사용 사례와 요구 사항은 별도의 문서에 여기에 정리되어 있습니다.

4. 예시

이 절에서는 Remote Playback API 주요 기능의 사용 예시 코드를 보여줍니다. 예제에서는 player.html이 원격 재생을 제어하는 페이지, media.ext가 원격으로 재생할 미디어 파일입니다. 페이지와 미디어 모두 https://example.org 도메인에서 서비스된다고 가정합니다. 기타 세부 사항은 코드 내 주석을 참고하십시오.

4.1 원격 재생 기기 가용성 모니터링 예시

Example 1 
<!-- player.html -->
<!-- The video element with custom controls that supports remote playback. -->
<video id="videoElement" src="https://example.org/media.ext" />
<button id="deviceBtn" style="display: none;">Pick device</button>
<script>
  // The "Pick device" button is visible if at least one remote playback device is available.
  const deviceBtn = document.getElementById("deviceBtn");
  const videoElem = document.getElementById("videoElement");

  function availabilityCallback(available) {
    // Show or hide the device picker button depending on device availability.
    deviceBtn.style.display = available ? "inline" : "none";
  }

  videoElem.remote.watchAvailability(availabilityCallback).catch(() => {
    // Availability monitoring is not supported by the platform, so discovery of
    // remote playback devices will happen only after remote.prompt() is called.
    // Pretend the devices are available for simplicity; or, one could implement
    // a third state for the button.
    deviceBtn.style.display = "inline";
  });
</script>

4.2 비디오의 원격 재생 시작 예시

Example 2 
<!-- player.html -->
<script>
  deviceBtn.onclick = () => {
    // Request the user to select a remote playback device.
    videoElem.remote.prompt()
      // Update the UI and monitor the connected state.
      .then(updateRemotePlaybackState);
      // Otherwise, the user cancelled the selection UI or no screens were found.
  };
<script>

4.3 원격 재생 상태 변경 모니터링

Example 3 
<!-- player.html -->
<script>
  // The remote playback may be initiated by the user agent,
  // so check the initial state to sync the UI with it.
  if (videoElem.remote.state == "disconnected")
    switchToLocalUI();
  else
    switchToRemoteUI();

  videoElem.remote.onconnecting = switchToRemoteUI;
  videoElem.remote.onconnect = switchToRemoteUI;
  videoElem.remote.ondisconnect = switchToLocalUI;

  // Handles both 'connecting' and 'connected' state. Calling more than once
  // is a no-op.
  function switchToRemoteUI() {
    // Indicate that the state is 'connecting' or 'connected' to the user.
    // For example, hide the video element as only controls are needed.
    videoElem.style.display = "none";

    // Stop monitoring the availability of remote playback devices.
    videoElem.remote.cancelWatchAvailability();
  };

  function switchToLocalUI() {
    // Show the video element.
    videoElem.style.display = "inline";
    // Start watching the device availability again.
    videoElem.remote.watchAvailability(availabilityCallback);
  };
<script>

5. API

5.1 공통 관용구

로컬 재생 기기란 브라우징 컨텍스트가 실행되는 기기 및 해당 기기가 가진 기본 비디오/오디오 출력 장치를 의미합니다.

참고
로컬 재생 기기는 외부 디스플레이나 추가 스피커/헤드폰과 같은 추가 출력을 가질 수 있습니다. 어떤 출력을 사용할지의 전환이 사용자 에이전트 밖, 시스템 차원에서 일어나는 한, 이 명세에서는 해당 재생을 로컬 재생 기기에서 일어나는 것으로 간주합니다.

원격 재생 기기란 로컬 재생 기기를 제외한, 브라우징 컨텍스트가 미디어 재생에 사용할 수 있는 모든 다른 기기를 의미합니다.

미디어 요소 상태란, 페이지 및/또는 사용자가 사용자 에이전트 구현을 통해 관찰할 수 있는 모든 개별 미디어 요소 속성들의 집합을 의미합니다. 이 명세에서 새롭게 도입되는 속성들은 편의상 미디어 요소 상태에 포함되지 않습니다.

예를 들어 paused 속성이나 미디어 요소 기본 컨트롤의 일시정지/재개 버튼(상태 반영)은 미디어 요소 상태의 일부입니다.

로컬 재생 상태란 특정 미디어 요소 상태를 미디어 요소 및 로컬 재생 기기에 맞게 사용자 에이전트가 구현한 것입니다.

원격 재생 상태란, 특정 미디어 요소 상태를 미디어 요소 및 원격 재생 기기에 맞게 사용자 에이전트가 구현한 것입니다.

참고

좋은 사용자 경험을 위해 미디어 요소 상태는 state가 바뀔 때 예기치 않게 변경되지 않아야 합니다. 또한 원격 재생 상태가 미디어 요소 상태와 항상 동기화되어야 하며, 미디어가 원격 재생 기기에서 일시정지되면 사용자와 페이지 모두에서 일시정지 상태로 보여야 합니다.

이 명세에서 언급된 태스크의 태스크 소스는 미디어 요소 이벤트 태스크 소스입니다.

5.2 RemotePlayback 인터페이스 

...

RemotePlayback 객체를 사용하면 페이지에서 원격 재생 기기의 가용성 감지, 연결, 재생 제어를 할 수 있습니다.

RemotePlaybackState 열거형(enum)은 원격 재생 기기에 대한 가능한 연결 상태를 나타냅니다.

RemotePlaybackAvailabilityCallback은 현재 원격 재생 기기 가용성을 반환합니다.

5.2.1 원격 재생 기기 가용성 관찰

RemotePlaybackAvailabilityCallback 은(는) 페이지에서 해당 미디어 요소의 원격 재생 기기 가용성을 획득하는 방법입니다. 사용자 에이전트가 백그라운드에서(아직 prompt() 요청이 없더라도) 원격 재생 기기 목록 모니터링을 할 수 있으면, 아래 정의된 대로 RemotePlaybackAvailabilityCallback 동작을 사용자 에이전트가 반드시(MUST) 구현해야 합니다. 그렇지 않으면 watchAvailability()가 반환하는 프로미스는 반드시 NotSupportedError로 거부되어야 합니다.

5.2.1.1 가용성 콜백 집합

사용자 에이전트는 각 가용성 콜백 집합을 미디어 요소 별로 watchAvailability() 메서드를 통해 관리해야 하며, 각 가용성 콜백 집합은 RemotePlayback 객체마다, (callbackId, callback) 형태의 튜플 집합(초기에 비어 있음)입니다. 여기서:

  1. callbackId는 해당 watchAvailability()가 반환한 id 중에서 해당 브라우징 컨텍스트 내에서 고유한 양의 정수입니다;
  2. callback은 RemotePlaybackAvailabilityCallback 객체입니다.

각 RemotePlayback 객체는 각 미디어 요소와 1:1로 대응하므로, 해당 미디어 요소의 가용성 콜백 집합은 해당 remote 프로퍼티가 참조하는 RemotePlayback 객체의 집합과 같습니다.

RemotePlayback 객체 전체의 가용성 콜백 집합을 모두 합한 것을 글로벌 가용성 콜백 집합이라 합니다.

5.2.1.2 사용 가능한 원격 재생 기기 목록

사용자 에이전트는 MUST 사용 가능한 원격 재생 기기 목록을 유지해야 합니다. 이 목록에는 원격 재생 기기가 포함되며, 구현별 탐색 메커니즘을 기반으로 채워집니다. 이 알고리즘을 아직 실행하지 않았다면 비어있는 목록이고, 실행한 경우에는 사용 가능한 원격 재생 기기 목록 모니터링 알고리즘의 최신 결과로 설정됩니다.

사용자 에이전트는 MAY 플랫폼이나 전력 소비 제한 등으로 인해 사용 가능한 원격 재생 기기 목록 모니터링 알고리즘을 지속적으로 실행하지 않을 수 있습니다. 이 경우 watchAvailability() 가 반환하는 프로미스는 MUST NotSupportedError로 거부되어야 하며, 글로벌 가용성 콜백 집합은 비어 있게 되고 사용 가능한 원격 재생 기기 목록 모니터링 알고리즘은 원격 재생 시작 알고리즘의 일부로만 실행됩니다.

글로벌 가용성 콜백 집합이 비어 있지 않은 경우, 사용자 에이전트는 MUST 사용 가능한 원격 재생 기기 목록 모니터링을 계속 실행해야 하며, 이를 통해 페이지들이 등록된 콜백을 통해 받은 마지막 값을 추적하여, 사용 가능한 기기가 있을 때에만 원격 재생을 제공할 수 있게 해야 합니다.

참고

사용 가능한 원격 재생 기기 목록 모니터링을 가능하다면 실행하지 않는 것이 절전 비기능 요구사항을 충족하는 데 권장됩니다. 예를 들어, 글로벌 가용성 콜백 집합이 비어 있거나, 모든 페이지의 미디어 요소의 가용성 콜백 집합이 비어 있지 않으면서 모두 백그라운드에 있는 경우, 모니터링 알고리즘을 실행하지 않을 수 있습니다.

일부 원격 재생 기기는 기능적, 보안 또는 하드웨어적인 제약으로 미디어 리소스의 일부만 재생할 수 있습니다. 예를 들어, 특정 형식의 비디오/오디오만 재생 가능한 셋톱박스, 스마트 TV, 네트워크 스피커 등이 있습니다. 이러한 기기에서 특정 미디어 리소스에 대해 사용자 에이전트가 해당 리소스의 원격 재생 성공을 합리적으로 보장할 수 있다면, 해당 기기를 호환 가능한 원격 재생 기기라 합니다.

참고

사용자 에이전트는 track 요소의 srclang 속성을 텍스트 트랙 데이터의 언어 힌트로 사용하여 호환 가능한 원격 재생 기기를 식별할 수 있습니다.

미디어 리소스들 중 사용자 에이전트가 호환 가능한 원격 재생 기기 탐색에 고려한 리소스들의 집합을 가용성 소스 집합이라 합니다.

선택된 원격 재생 기기에서 원격 재생을 시작하는 데 사용되는 미디어 리소스를 원격 재생 소스라 하며, 원격 재생 소스는 MUST 반드시 해당 미디어 요소의 가용성 소스 집합에 속해야 합니다.

원격 재생 소스를 가용성 소스 집합에서 선택하는 방법은 구현에 따라 다릅니다. 그러나 사용자 에이전트는 SHOULD 모든 집합의 리소스를 잠재적 원격 재생 소스로 고려해야 합니다.

참고
선택된 기기별 원격 재생 소스 선택 알고리즘은 사용자 에이전트와 지원되는 원격 재생 기기 유형에 따라 다릅니다. 예를 들어 미디어 미러링의 경우 사용자 에이전트가 HTMLMediaElement의 리소스 선택 알고리즘을 따르면 됩니다. 그러나 미디어 리모팅이나 미디어 플링의 경우, 가장 적합한 미디어 소스는 선택된 원격 재생 기기의 가져오기 및 재생 기능에 따라 달라질 수 있습니다.

사용자 에이전트가 선택된 원격 재생 기기에 적합한 원격 재생 소스를 결정할 수 없다면, RECOMMENDED 사용자 에이전트는 가용성 소스 집합 내 모든 리소스에 대한 메타데이터(예: 확장 MIME 유형)를 원격 재생 기기에 전달하여, 기기 자체에서 리소스 선택 알고리즘을 실행하고 원격 재생 소스를 선택하도록 해야 합니다.

미디어 요소의 사용 가능한 원격 재생 기기 목록이 비었거나, 목록 내 어떤 기기도 해당 미디어 요소의 가용성 소스 집합 중 아무 리소스와도 호환되지 않는 경우, 해당 미디어 요소의 원격 재생은 사용 불가(unavailable)로 간주합니다. 그렇지 않으면 원격 재생은 사용 가능(available)입니다. remote playback이 unavailable일 때 false, available일 때 true인 boolean 값을 해당 미디어 요소의 가용성(availability)이라 부릅니다.

사용자 에이전트가 사용 가능한 원격 재생 기기 목록 모니터링을(사용자 제어나 절전 기능 등으로) 중단할 경우 SHOULD 글로벌 가용성 콜백 집합의 모든 콜백을 false로 호출해 페이지가 사용자 경험을 적절히 업데이트할 수 있게 해야 합니다. 또한 모든 미디어 요소의 가용성 값을 false로 설정하여, 나중에 모니터링이 재개될 경우 가용성 정보가 올바르게 전파되도록 해야 합니다.

5.2.1.3 원격 재생 기기 가용성 정보 얻기

watchAvailability() 메서드가 호출되면, 사용자 에이전트는 다음 단계를 반드시 수행해야 합니다(MUST):

입력
callback — 가용성 정보를 전달받을 콜백.
출력
promise — Promise.
  1. promise를 새 Promise로 정한다.
  2. promise를 반환하고, 아래 단계를 계속 수행한다:
  3. disableRemotePlayback 속성이 media element에 존재하면, promise를 InvalidStateError로 거부(reject)하고 모든 남은 단계를 중단한다.
  4. 사용자 에이전트가 원격 재생 기기 목록 모니터링을 브라우징 컨텍스트 전체 생명주기 동안 할 수 없는 경우(예: 사용자가 해당 기능을 비활성화함), 다음 단계를 병렬로 실행한다:
    1. promise를 이행(fulfill)한다.
    2. 태스크 큐에 추가하여 callback을 false 인자와 함께 호출한다.
    3. 남은 모든 단계를 중단한다.
  5. 사용자 에이전트가 원격 재생 기기 목록을 지속적으로 모니터링할 수는 없지만, 원격 재생 시작 시점에는 짧은 시간 동안 단기적으로 모니터링이 가능할 경우:
    1. promise를 NotSupportedError 예외로 거부한다.
    2. 남은 모든 단계를 중단한다.
  6. callbackId를 해당 브라우징 컨텍스트 내에서 이전에 반환된 모든 callbackIds 중에서 고유한 양의 정수로 설정한다.
  7. (callbackId, callback) 튜플을 생성하여 해당 가용성 콜백 집합에 추가한다.
  8. promise를 callbackId로 이행하고, 아래 단계를 병렬로 실행한다:
    1. 태스크 큐에 추가하여 callback을 현재 가용성값과 함께 호출한다.
    2. 사용자 에이전트가 현재 원격 재생 기기 목록을 모니터링하고 있지 않다면, 해당 모니터링 알고리즘을 실행한다.
참고

callbackId 값을 할당하는 간단한 방법은 각 브라우징 컨텍스트마다 카운터를 두고 6단계에서 증분하는 것입니다.

참고
사용자 식별 정보 유출을 방지하기 위해, 사용자 에이전트는 callbackId를 브라우저 프로필의 영구 정보나 원격 재생 기기의 정보를 사용해 할당하지 않아야 합니다.
5.2.1.4 원격 재생 기기 목록 모니터링

가용성 콜백 집합이 비어 있지 않거나 원격 재생 시작이 대기 상태일 때, 사용자 에이전트는 MUST 원격 재생 기기 목록 모니터링 알고리즘을 다음 단계로 실행해야 합니다:

  1. 구현별 메커니즘을 사용하여 사용 가능한 원격 재생 기기들을 검색하고, 그 목록을 newDevices로 둔다.
  2. media element를 알고 있는 브라우징 컨텍스트의 각 media element에 대해:
    1. mediaElement에 disableRemotePlayback 속성이 있으면 해당 튜플의 남은 단계를 모두 중단하고 다음으로 넘어간다.
    2. newAvailabilityValue를 가용성 값으로 설정하되, 기존 사용 가능한 원격 재생 기기 목록 대신 newDevices를 사용해 계산한다.
    3. 현재 가용성 값이 newAvailabilityValue와 다르다면, 해당 요소의 가용성 콜백 집합 내 각각의 (callbackId, callback)에 대해:
      1. 태스크 큐에 추가하여 callback을 newAvailabilityValue 값을 인자로 호출한다.
  3. 사용 가능한 원격 재생 기기 목록을 newDevices 값으로 설정한다.
5.2.1.5 원격 재생 기기 가용성 관찰 중단

cancelWatchAvailability() 메서드가 호출되면, 사용자 에이전트는 다음 단계를 반드시 수행해야 합니다(MUST):

입력
id — 콜백 식별자.
출력
promise — Promise.
  1. promise를 새 Promise로 둔다.
  2. promise를 반환하고, 아래 단계를 계속 수행한다:
  3. disableRemotePlayback 속성이 media element에 존재하면, promise를 InvalidStateError로 거부(reject)하고, 남은 단계를 모두 취소한다.
  4. 파라미터 id가 undefined이면 가용성 콜백 집합을 모두 비운다.
  5. 그렇지 않고 id가 가용성 콜백 집합 내의 callbackId와 일치하면, 해당 항목을 집합에서 제거한다.
  6. 그렇지 않으면 promise를 NotFoundError로 거부하고, 남은 모든 단계를 중단한다.
  7. 가용성 콜백 집합이 비었고, 대기 중인 원격 재생 시작 요청도 없다면, 절전 목적 등으로 원격 재생 기기 목록 모니터링에 대한 대기 중 태스크를 모두 취소한다.
  8. promise를 이행(fulfill)한다.
참고
원격 재생 기기 가용성 모니터링과 선택된 가용성 소스 집합에 대한 원격 재생 기기 호환성 판단의 구체적 메커니즘은 사용자 에이전트에 위임됩니다.

5.2.2 원격 재생 상태 변경을 위한 사용자 프롬프트

prompt() 메서드가 호출되면, 사용자 에이전트는 MUST 다음 단계를 수행해야 합니다:

입력
없음. 하지만 알고리즘은 미디어 요소, 그 remote 프로퍼티, 가용성 소스 집합을 참고합니다.
출력
Promise
  1. promise를 새 Promise로 둔다.
  2. promise를 반환하고, 아래 단계를 병렬로 계속 수행한다.
  3. disableRemotePlayback 속성이 미디어 요소에 있다면, promise를 InvalidStateError 로 거부하고 나머지 단계를 모두 중단한다.
  4. 동일 미디어 요소 또는 심지어 동일 브라우징 컨텍스트에 대해 이전 prompt() 호출에서 해결되지 않은 promise가 있는 경우, 사용자 에이전트는 MAY promise를 OperationError 예외로 거부하고 나머지 단계를 중단할 수 있다.
    참고
    그 이유는 사용자 에이전트가 미디어 요소 또는 브라우징 컨텍스트에 모달인 다이얼로그를 보여줄 수 있기 때문입니다. 이 경우 두 번째 prompt() 호출은 UI를 보여줄 수 없습니다.
  5. 문서의 활성 창에 일시적 활성화가 없으면, promise를 InvalidAccessError 예외로 거부하고, 이 단계를 중단한다.
  6. 선택적으로, 사용자 에이전트가 미리 이 특정 미디어 요소의 원격 재생이 불가능하다고(현재 state 또는 사용 가능한 원격 재생 기기 목록과 상관없이) 아는 경우, promise를 NotSupportedError로 거부하고 나머지 단계를 모두 중단한다.
    참고
    예를 들어 사용자 에이전트가 미디어 플링만 지원하고, 미디어 요소 소스가 URL이 아니어서 원격 재생 기기에 전달할 수 없는 경우가 있습니다.
  7. 사용자 에이전트가 사용 가능한 원격 재생 기기 목록을 보여줄 필요가 있고, 현재 기기 목록을 모니터링하지 않고 있다면, 모니터링 알고리즘을 병렬로 실행한다.
  8. 원격 재생이 불가(unavailable)이고, 사용자 허가 요청이 끝나기 전에 계속 불가능하다면, promise를 NotFoundError 예외로 거부하고, 남은 단계를 모두 중단한다.
  9. 원격 재생 상태 변경을 위해 사용자 권한을 요청한다.
    참고
    권한 요청 예시 UI는 사용자가 새로운 원격 재생 기기를 선택하거나, 로컬과 원격 재생 기기 간 전환 또는 원격 재생 기기 연결 해제를 허용할 수 있습니다.
    참고
    사용자가 이미 디스플레이 미러링이나 페이지 미러링 등과 같은 관련된 목적으로 원격 재생 기기를 선택했을 수 있습니다. 이런 경우 사용자 에이전트는 기기 선택 UI를 생략하고 곧바로 다음 단계로 진행할 수 있습니다.
  10. 사용자가 원격 재생 기기 device를 선택해 원격 재생 시작을 진행하면, 사용자 에이전트는 MUST 다음 단계를 수행한다:
    1. remote 객체의 state 상태를 connecting으로 설정한다.
    2. promise를 이행한다.
    3. 태스크 큐에 추가하여 connecting 이벤트를 remote 프로퍼티가 참조하는 미디어 요소에서 발생시킨다. 이 이벤트는 버블링되지 않고, 취소(as cancelable) 불가이며, 기본 동작이 없음.
    4. 원격 재생 기기와의 연결 절차를 실행한다.
    참고

    사용자가 원격 재생 기기를 선택하면, 해당 기기 사용에 권한을 부여한 것입니다.

  11. 그렇지 않고 사용자가 원격 재생 기기 device와의 연결 해제를 선택한 경우, 사용자 에이전트는 MUST 다음 단계를 수행한다:
    1. promise를 이행한다.
    2. 원격 재생 기기 연결 해제 알고리즘을 그 device에 대해 실행한다.
  12. 그 외의 경우 사용자가 해당 기기 사용 권한을 거부한 것으로 간주하여, promise를 NotAllowedError 예외와 함께 거부하며, 사용자 에이전트가 띄운 UI를 숨긴다.
참고
UI와 기기 선택 구현의 세부 사항은 사용자 에이전트에 위임됩니다. 예를 들어, 사용자에게 다이얼로그를 보여 선택 가능하게 하거나(권한을 부여), 선택을 취소하는 것(권한 거부)이 가능합니다. 대부분의 경우, 사용 가능한 기기는 친숙한 이름(로케일, 글자 방향 정보 포함)을 광고하며, 사용자 에이전트는 해당 정보를 써서 UI에서 렌더링하는 것이 권장됩니다.

5.2.3 state 속성

state 속성은 RemotePlayback 연결의 현재 상태를 나타냅니다. 이 값은 연결 상태에 따라 RemotePlaybackState 중 하나가 됩니다:

  • connecting은 사용자 에이전트가 선택된 원격 재생 기기와 원격 재생 시작을 시도하고 있음을 뜻합니다. 이는 prompt() 호출의 promise가 이행(fulfill)될 때 초기 상태입니다. 이 상태에서 미디어 요소의 로컬 재생이 계속되며, 미디어 명령은 로컬 재생 상태에 영향을 줍니다.
  • connected는 로컬에서 원격 재생으로 전환이 완료되어 모든 미디어 명령이 원격 재생 상태에 적용되고 있음을 의미합니다.
  • disconnected는 원격 재생이 시작되지 않았거나, 시작에 실패했거나, 중지된 상태임을 뜻합니다. 모든 미디어 명령은 로컬 재생 상태에 적용됩니다. prompt() 호출로 원격 재생을 시작할 수 있습니다.

5.2.4 원격 재생 기기와의 연결 설정

사용자 에이전트가 원격 재생 기기와의 연결을 수행할 때는 MUST 다음 단계를 실행해야 합니다:

입력
remote — 연결할 RemotePlayback 객체.
device — 연결하려는 원격 재생 기기.
  1. remote의 state가 "connecting"이 아니면, 나머지 단계를 모두 중단합니다.
  2. remote를 device에 연결하도록 요청합니다. 이 단계의 구현은 사용자 에이전트에 따라 다릅니다.
  3. 연결이 성공적으로 완료되면, 태스크를 큐에 추가하여 다음 단계를 실행합니다:
    1. remote의 state 값을 "connected"로 설정합니다.
    2. connect 이벤트를 remote에서 발생시킵니다.
    3. 현재 미디어 요소 상태를 원격 재생 상태와 동기화합니다. 이 단계의 구현은 사용자 에이전트에 따라 다릅니다.
  4. 연결이 실패하면, 태스크를 큐에 추가하여 다음 단계를 실행합니다:
    1. remote의 원격 재생 상태를 "disconnected"로 설정합니다.
    2. disconnect 이벤트를 remote에서 발생시킵니다.

원격 재생 상태가 "connected"인 동안에는 미디어 요소의 로컬 오디오 및 비디오 출력이 일시중지(SHOULD)되어야 합니다.

사용자 에이전트가 미디어 요소에 기본 컨트롤 등 사용자 인터페이스를 노출하는 경우, 원격 재생 상태가 "connected"임을 아이콘 등으로 표시해야 합니다(SHOULD).

참고
사용자 에이전트가 원격 재생 기기와 연결·원격 재생 소스 선택·재생 시작에 사용하는 메커니즘은 모두 구현에 따라 다릅니다. 동기화 목적상, 연결은 원격 재생 기기에 미디어 명령을 전달하고 원격 상태를 받아올 수 있는 양방향 메시징 추상화를 제공해야 할 수 있습니다(미디어 미러링이 아닌 경우).
참고
사용자 에이전트는 로케일 및 글자 방향 정보를 원격 재생 기기로 전달하는 것이 바람직하며, 원격 재생 기기가 사용자 환경에 맞춘 UI/동작을 제공할 수 있도록 해야 합니다. 예를 들어, 원격 재생 기기는 해당 정보로 동일한 기본 텍스트 트랙을 선택하거나, 미디어 자원 요청 시 HTTP Accept-Language 헤더를 설정할 수 있습니다.
참고
"connected" 상태이고 콘텐츠가 원격 재생 기기에서 렌더링 될 때는 미디어 요소의 출력을 화면에 렌더링하지 않는 것이 좋습니다.

5.2.5 브라우저가 시작하는 원격 재생

사용자 에이전트는 브라우저에서 원격 재생 기기 연결을 지원할 수 있습니다(MAY). 이는 브라우저 UI에 적합한 미디어 컨트롤을 추가하거나, 사용자가 시스템 전체 미러링을 활성화했을 때 등으로 구현할 수 있습니다. 이 기능을 브라우저가 시작하는 원격 재생이라고 합니다. 이 기능을 지원하는 user agent는 SHOULD 사용자가 브라우저 버튼 등을 클릭하는 명시적 제스처로 원격 재생을 시작해야 합니다.

브라우저가 시작하는 원격 재생을 지원하는 경우, state 속성은 MUST 그 연결의 현재 상태를 반영해야 하며, 브라우저가 원격 재생을 시작/종료할 때마다 원격 재생 기기 연결 및 연결 해제 알고리즘에 따라 해당 이벤트를 MUST 발생시켜야 합니다.

브라우저가 새로 생성한 미디어 요소에서 원격 재생을 시작하려는 경우, state 속성의 값을 "connecting"으로 초기화한 후 원격 재생 기기 연결 단계를 따라야 합니다(SHOULD).

참고
브라우저가 시작하는 원격 재생을 구현한 user agent는 어떤 media element가 재생 허용 상태인지, 백그라운드 미디어 재생 최적화 등 media 재생에 영향을 주는 다른 정책과의 상호작용을 반드시 고려해야 합니다.

5.2.6 미디어 명령 및 미디어 재생 상태

HTMLMediaElement 인터페이스는 원격 재생 기기와 연결이 이루어진 즉시 원격으로 재생되는 미디어와 상호작용합니다.

state 값이 "connected"인 RemotePlayback 객체와 관련하여, 로컬 재생 상태, 미디어 요소 상태, 원격 재생 상태 간 연관은 다음과 같습니다:

어떤 미디어 명령의 전송이 실패한 경우, 사용자 에이전트는 MAY 원격 재생 기기 연결 해제를 실행할 수 있습니다.

참고

원격 재생 기기가 사용자 에이전트의 플레이백 엔진의 일부 기능만 구현할 수 있고, HTMLMediaElement API 중 일부는 원격 재생 중 사용할 수 없는 경우도 있습니다. 이럴 때에는, 로컬 재생 상태가 원격에서 지원되지 않는 미디어 명령 실행 후, 실제 원격 재생 상태와 최대한 일치하도록 반영합니다.

예시: 원격 재생이 원격 재생 기기에서 fastSeek()를 지원하지 않는데 호출한 경우, seeking 속성은 false로 남고 seeking 이벤트도 발생하지 않습니다.

5.2.7 원격 재생 기기 연결 해제

사용자 에이전트가 원격 재생 기기 연결 해제를 수행할 때는 MUST 다음을 해야 합니다:

입력
remote — 중단하려는 재생을 나타내는 RemotePlayback 객체.
device — 연결을 해제할 원격 재생 기기.
  1. remote의 state 값이 disconnected라면, 남은 단계를 모두 중단한다.
  2. 태스크 큐에 추가하여 다음 단계를 실행한다:
    1. remote를 device와의 연결을 해제하도록 요청한다. 이 단계의 구현은 사용자 에이전트에 따라 다르다.
    2. remote의 state를 disconnected로 변경한다.
    3. disconnect 이벤트를 remote에서 발생시킨다.
    4. 현재 미디어 요소 상태를 로컬 재생 상태와 동기화한다. 이 단계의 구현은 사용자 에이전트에 따라 다르다.

만약 원격 재생 기기가 재생 중 갑자기 끊어지면(예: 전원 차단, 네트워크 끊김 등), 사용자 에이전트는 SHOULD 원격 재생 기기 연결 해제 이전에 원격 재생 기기 목록 모니터링 알고리즘을 실행해야 합니다. 이렇게 하면 가용성 콜백 집합의 콜백이 disconnect 이벤트가 발생되기 전에 호출되어, 페이지가 "재생 재개 불가" 등의 상태로 갱신될 수 있습니다.

참고
원격 재생 기기는 사용자 에이전트가 재생 정지를 요청해도 실제로 미디어 재생을 정지하지 않을 수 있습니다. 이는 사용자 에이전트와 기기 구현에 따라 다릅니다. 이 경우 원격 재생 중지란 사용자 에이전트가 단순히 원격 기기와 연결만 끊고 미디어 요소는 disconnected 상태로 전환되는 것을 의미합니다.

5.2.8 이벤트 핸들러

다음은 이벤트 핸들러 (및 해당 이벤트 핸들러 이벤트 타입)로, RemotePlayback 인터페이스를 구현하는 객체가 반드시 지원해야 하는(이벤트 핸들러 IDL 속성으로) 목록입니다:

이벤트 핸들러 이벤트 핸들러 이벤트 타입
onconnecting connecting
onconnect connect
ondisconnect disconnect

5.3 HTMLMediaElement에 대한 확장 

WebIDLpartial interface HTMLMediaElement {
  [SameObject] readonly attribute RemotePlayback remote;

  [CEReactions] attribute boolean disableRemotePlayback;
};

remote 속성은 MUST RemotePlayback 인스턴스를 media element와 연관지어 반환해야 합니다.

5.3.1 disableRemotePlayback 속성

일부 페이지에서는 media element의 원격 재생 비활성화를 원하는 경우가 있습니다. 예를 들어, PresentationRequest를 이용해 프레젠테이션 화면 전체에 문서를 표시하고자 할 수 있습니다. 이런 사용 사례를 지원하기 위해 audio 및 video 요소의 content attributes에 disableRemotePlayback 속성이 추가되었습니다.

각 요소의 disableRemotePlayback 콘텐츠 속성 값을 반영(reflect)하는, HTMLMediaElement 인터페이스의 disableRemotePlayback IDL 속성이 추가되었습니다. disableRemotePlayback IDL 속성은 MUST 동명의 content attribute를 반영해야 합니다.

5.3.2 원격 재생 비활성화

disableRemotePlayback 속성이 media element에 있으면, 사용자 에이전트는 MUST NOT media element를 원격으로 재생하거나 관련 UI를 표시해서는 안 됩니다.

disableRemotePlayback 속성이 media element에 추가되는 경우, 사용자 에이전트는 MUST 원격 재생 비활성화 단계를 실행해야 합니다:

  1. RemotePlayback의 메서드가 반환한 대기(pending) 프라미스는 InvalidStateError로 거부해야 합니다.
  2. media element의 가용성 콜백 집합을 비워야 합니다.
  3. 해당 state가 disconnected가 아니라면, 해당 media element가 연결 혹은 연결 시도 중인 원격 재생 기기에 대해 원격 재생 기기 연결 해제 알고리즘을 실행해야 합니다.

6. 보안 및 개인정보 보호 고려사항

이 절은 비규범적입니다.

6.1 개인 식별 정보

watchAvailability() 메서드를 통해 제공된 callback을 트리거하면 로컬 네트워크를 통해 일반적으로 발견된 원격 재생 기기의 존재(또는 부재)에 대해 1비트의 정보가 노출됩니다. 이 정보는 다른 정보와 결합해 사용자를 지문화(fingerprinting)하는 데 활용될 수 있습니다. 하지만 이 정보는 사용자의 로컬 네트워크 환경에 따라 달라지므로 위험은 최소화됩니다. 또한 설계상, 원격 재생 기기의 사람이 읽을 수 있는 이름은 페이지에 노출되지 않습니다.

API는 사용 가능한 원격 재생 기기 목록 모니터링을 할 수 있게 합니다. 사용자 에이전트가 원격 재생 기기가 특정 media element의 리소스와 호환·가용한지 판별하는 방식은 구현 세부사항입니다. 만약 사용자 에이전트가 미디어 리소스를 특정 유형의 기기와 매칭하여 가용성을 판단한다면, 이 기능으로 사용자의 동의 없이 사용자가 가진 원격 재생 기기 정보를 파악할 수 있습니다.

사용자가 브라우저 설정을 통해 백그라운드 모니터링을 비활성화한 경우, 사용자 에이전트는 사용 가능한 원격 재생 기기 목록을 모니터링해서는 안 됩니다.

6.2 사용자 인터페이스 가이드라인

Origin(출처) 표시

원격 재생 상태 변경 단계에서 사용자에게 원격 재생 기기 사용 권한을 요청할 때, 사용자 에이전트는 요청이 어떤 오리진(origin)에서 왔는지 명확히 표시해야 합니다.

원격 재생을 요청한 오리진을 표시하면 어떤 콘텐츠가 요청을 발생시켰는지 사용자가 파악할 수 있습니다. 이는 특히 하위 네비게이션(child navigable)에서 요청이 시작된 경우에 더 중요합니다. 예를 들어, 임베디드 콘텐츠가 사용자를 속여 원치 않는 원격 재생 요청을 트리거하도록 할 수도 있기 때문입니다.

실제로 표시될 오리진을 보여주면 해당 콘텐츠가 신뢰할 수 있는 오리진(예: https:)인지, 예상한 사이트와 일치하는지 사용자가 쉽게 알 수 있습니다.

6.3 기기 접근

Remote Playback API는 디스플레이의 "로컬" 의미를 추상화하며, 네트워크로 접근 가능한 디스플레이도 마치 로컬 디스플레이인 것처럼 노출합니다. Remote Playback API는 페이지가 어떠한 디스플레이에 접근하려 할 때마다 사용자 권한을 요구합니다. 이는 남이 볼 수 있는 화면에 원치 않는 콘텐츠가 표시되는 등 발생할 수 있는 문제를 완화하기 위함입니다.

6.4 로컬·원격 재생 기기 간 메시징

본 명세는 로컬 재생 기기와 원격 재생 기기 사이의 통신 프로토콜을 규정하지 않으나, 사용자 에이전트는 이들 간 메시지의 기밀성과 진위(authenticity)가 보장되도록 해야 합니다.

6.5 안전한 컨텍스트

Remote Playback API는 [SECURE-CONTEXTS]에 한정되지 않습니다. 왜냐하면 이 API는 사용자 에이전트가 일반적으로 모든 미디어에 네이티브로 제공하는 기능을 웹 앱에 노출하기 때문입니다. (이것은 브라우징 컨텍스트가 안전한지 여부와 무관합니다.) 사용자 에이전트가 원한다면 [SECURE-CONTEXTS]에만 이 API를 제한할 수 있는데, 그 경우 안전하지 않은 컨텍스트의 알고리즘에서 사용 가능한 원격 재생 기기 목록 모니터링의 반환값을 항상 빈 리스트로 하면 됩니다.

A. 권고안 후보 종료 기준

본 명세가 Proposed Recommendation(권고안 제안) 단계로 진행되려면, 각 기능별로 최소 두 개의 독립적이고 상호 운용 가능한 구현이 있어야 합니다. 각각의 기능은 서로 다른 제품 집합이 구현할 수 있으며, 모든 기능이 반드시 한 제품에서 구현될 필요는 없습니다. 또한, 구현체는 미디어 리모팅과 미디어 플링 케이스를 동일 혹은 별개의 제품 내에서 각각 시연해야 합니다.

위 기준 적용을 위해 다음 용어는 다음과 같이 정의합니다:

독립적(Independent)
각 구현은 서로 다른 당사자에 의해 개발되어야 하며, 다른 인정 구현에서 사용한 코드를 공유·재사용·파생해서는 안 됩니다. 본 명세 구현과 무관한 코드 섹션은 이 요건에서 예외로 합니다.
상호운용 가능(Interoperable)
공식 테스트 스위트 내 해당 테스트 케이스를 통과하는 것.
구현체(Implementation)
아래 조건을 모두 충족하는 사용자 에이전트:
  1. 이 명세를 구현함
  2. 일반에 공개되어 있음. 구현체는 정식 출하시판 제품이거나, 베타, 프리뷰, 나이틀리 등의 형태도 허용됨. 출시 전 제품의 경우 최소 1달 이상 기능을 구현해 안정성을 보여야 함.
  3. 실험적이지 않음(즉, 오직 테스트용으로만 의도된 코드가 아님)

B. 참고문헌

B.1 규범적 참고문헌

[dom]
DOM Standard. Anne van Kesteren. WHATWG. Living Standard. URL: https://dom.spec.whatwg.org/
[HTML]
HTML Standard. Anne van Kesteren; Domenic Denicola; Ian Hickson; Philip Jägenstedt; Simon Pieters. WHATWG. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[PRESENTATION-API]
Presentation API. Mark Foltz; Dominik Röttsches. W3C. 16 October 2023. W3C Candidate Recommendation. URL: https://www.w3.org/TR/presentation-api/
[RFC2119]
Key words for use in RFCs to Indicate Requirement Levels. S. Bradner. IETF. March 1997. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc2119
[RFC8174]
Ambiguity of Uppercase vs Lowercase in RFC 2119 Key Words. B. Leiba. IETF. May 2017. Best Current Practice. URL: https://www.rfc-editor.org/rfc/rfc8174
[WEBIDL]
Web IDL Standard. Edgar Chen; Timothy Gu. WHATWG. Living Standard. URL: https://webidl.spec.whatwg.org/

B.2 비규범적 참고문헌

[SECURE-CONTEXTS]
Secure Contexts. Mike West. W3C. 10 November 2023. W3C Candidate Recommendation. URL: https://www.w3.org/TR/secure-contexts/
[url]
URL Standard. Anne van Kesteren. WHATWG. Living Standard. URL: https://url.spec.whatwg.org/