미디어 세션

1. 소개

이 섹션은 비규범적입니다.

오늘날 미디어는 광범위하게 사용되고 있으며, 웹은 미디어 콘텐츠를 소비하는 주요 수단 중 하나입니다. 많은 플랫폼에서는 알림, 미디어 제어 센터, 기기 잠금 화면, 웨어러블 기기와 같은 다양한 UI 요소에 제목, 아티스트, 앨범 및 앨범 아트와 같은 미디어 메타데이터를 표시할 수 있습니다. 이 명세는 웹 페이지가 플랫폼 UI에 표시할 미디어 메타데이터를 지정하고, 플랫폼 UI나 미디어 키에서 발생할 수 있는 미디어 컨트롤에 응답하여 사용자 경험을 향상시키는 것을 목표로 합니다.

5. MediaSession 인터페이스

[Exposed=Window]
partial interface Navigator {
  [SameObject] readonly attribute MediaSession mediaSession;
};

enum MediaSessionPlaybackState {
  "none",
  "paused",
  "playing"
};

enum MediaSessionAction {
  "play",
  "pause",
  "seekbackward",
  "seekforward",
  "previoustrack",
  "nexttrack",
  "skipad",
  "stop",
  "seekto",
  "togglemicrophone",
  "togglecamera",
  "togglescreenshare",
  "hangup",
  "previousslide",
  "nextslide",
  "enterpictureinpicture",
  "voiceactivity"
};

enum MediaSessionEnterPictureInPictureReason {
  "other",
  "useraction",
  "contentoccluded"
};

callback MediaSessionActionHandler = undefined(MediaSessionActionDetails details);

[Exposed=Window]
interface MediaSession {
  attribute MediaMetadata? metadata;

  attribute MediaSessionPlaybackState playbackState;

  undefined setActionHandler(MediaSessionAction action, MediaSessionActionHandler? handler);

  undefined setPositionState(optional MediaPositionState state = {});

  Promise<undefined> setMicrophoneActive(boolean active);

  Promise<undefined> setCameraActive(boolean active);

  Promise<undefined> setScreenshareActive(boolean active);
};

MediaSession 객체는 특정 문서의 미디어 세션을 나타내며, 문서가 사용자 에이전트와 재생 및 처리 방법에 대한 정보를 소통할 수 있도록 합니다.

MediaSession 은 metadata 객체를 가지고 있으며, 이는 MediaMetadata로 표현됩니다. 초기값은 null입니다.

mediaSession 속성은 MediaSession 인스턴스를 반환해야 하며, 이는 Navigator 객체와 연관되어 있습니다.

metadata 속성은 MediaSession의 metadata를 반영합니다. getter는 MediaSession의 metadata를 반환해야 합니다. setter는 새 값을 value로 설정할 때 다음 단계를 수행해야 합니다:

1. MediaSession의 metadata 가 null이 아니면, media session을 null로 설정합니다.
2. MediaSession의 metadata 를 value로 설정합니다.
3. MediaSession의 metadata 가 null이 아니면, media session을 현재 MediaSession으로 설정합니다.
4. 병렬로 update metadata algorithm을 실행합니다.

playbackState 속성은 media session의 선언된 재생 상태를 나타내며, 세션이 자신의 브라우징 컨텍스트에서 미디어를 재생 중인지 선언합니다. 초기값은 none입니다. setter는 새 값이 MediaSessionPlaybackState의 유효한 값이라면 IDL 속성에 설정해야 합니다. getter는 마지막으로 설정된 유효한 값을 반환해야 합니다. playbackState 속성은 사용자 에이전트가 해당 브라우징 컨텍스트가 재생 중인지 일시정지 중인지 판단하는 힌트입니다.

playbackState를 설정하면 실제 재생 상태가 변경될 수 있으며, 미디어 세션 액션 업데이트 알고리즘이 실행될 수 있습니다.

MediaSessionPlaybackState 열거형은 브라우징 컨텍스트가 미디어를 재생 중인지 여부를 나타내며, 값은 다음과 같이 설명됩니다:

• none: 브라우징 컨텍스트가 재생 중 또는 일시정지 중임을 명시하지 않음을 의미하며, playbackState 속성에서만 사용할 수 있습니다.
• playing: 브라우징 컨텍스트가 현재 미디어를 재생 중이며 일시정지할 수 있음을 의미합니다.
• paused: 브라우징 컨텍스트가 미디어를 일시정지했으며 다시 재생할 수 있음을 의미합니다.

setActionHandler(action, handler) 메서드를 호출하면, MediaSession에서 action과 handler를 사용하여 액션 핸들러 업데이트 알고리즘을 실행해야 합니다.

setPositionState(state) 메서드를 호출하면 다음 단계를 수행해야 합니다:

• state가 빈 딕셔너리라면, 포지션 상태를 초기화하고 이 단계를 중단합니다.
• state의 duration 이 존재하지 않으면 TypeError를 throw합니다.
• state의 duration 이 음수 또는 NaN이면 TypeError를 throw합니다.
• state의 position 이 존재하지 않으면 0으로 설정합니다.
• state의 position 이 음수이거나 duration보다 크면, TypeError를 throw합니다.
• state의 playbackRate가 존재하지 않으면 1.0으로 설정합니다.
• state의 playbackRate 가 0이면 TypeError를 throw합니다.
• 포지션 상태와 마지막 위치 갱신 시간을 업데이트합니다.

setMicrophoneActive(active) 메서드는 페이지가 원하는 마이크 캡처 상태를 사용자 에이전트에 알립니다(예: 페이지가 더 이상 오디오를 통화로 전송하지 않기 때문에 마이크를 "비활성"으로 간주하면 setMicrophoneActive(false)를 호출). 호출 시 다음 단계를 수행해야 합니다:

1. document를 this의 관련 글로벌 객체의 연결된 Document로 설정합니다.
2. captureKind를 "microphone"으로 설정합니다.
3. 캡처 상태 업데이트 알고리즘을 document, active, captureKind로 실행한 결과를 반환합니다.

setCameraActive(active) 메서드도 페이지가 원하는 카메라 캡처 상태를 사용자 에이전트에 알리며, 호출 시 다음 단계를 수행해야 합니다:

1. document를 this의 관련 글로벌 객체의 연결된 Document로 설정합니다.
2. captureKind를 "camera"로 설정합니다.
3. 캡처 상태 업데이트 알고리즘을 document, active, captureKind로 실행한 결과를 반환합니다.

setScreenshareActive(active) 메서드도 페이지가 원하는 화면 공유 캡처 상태를 사용자 에이전트에 알리며, 호출 시 다음 단계를 수행해야 합니다:

1. document를 this의 관련 글로벌 객체의 연결된 Document로 설정합니다.
2. captureKind를 "screenshare"로 설정합니다.
3. 캡처 상태 업데이트 알고리즘을 document, active, captureKind로 실행한 결과를 반환합니다.

캡처 상태 업데이트 알고리즘은 document, active, captureKind로 호출될 때 다음 단계를 수행해야 합니다:

1. document가 완전히 활성화된 상태가 아니면 거부된 promise를 InvalidStateError와 함께 반환합니다.
2. active가 true이고 document의 visibility state가 "visible"이 아니면, 사용자 에이전트는 거부된 promise를 InvalidStateError와 함께 반환할 수 있습니다.
3. p를 새 promise로 설정합니다.
4. 병렬로 다음 단계를 실행합니다:
   1. applyPausePolicy를, 만약 사용자 에이전트가 UI에 따라 captureKind 타입의 모든 입력 소스 일시정지 정책을 구현한다면 true로, 그렇지 않으면 false로 설정한다.
   2. applyPausePolicy가 true라면, 다음 하위 단계를 실행한다:
      1. currentlyActive를, 사용자 에이전트가 현재 captureKind 타입의 모든 입력 소스 일시정지 중이면 false로, 그렇지 않으면 true로 설정한다.
      2. active와 currentlyActive가 같다면, queue a task를 user interaction task source로 추가하여 p를 undefined로 resolve하고 이 단계들을 중단한다.
      3. active가 true라면, 사용자 에이전트는 예를 들어 사용자에게 프롬프트를 표시하기 위해 진행을 잠시 대기할 수 있다.
      4. 사용자 에이전트가 캡처 상태 업데이트 요청을 거부하면, queue a task를 user interaction task source로 추가하여 p를 NotAllowedError로 reject하고 이 단계들을 중단한다.
   3. 사용자 에이전트의 캡처 상태 UI를 captureKind와 active에 따라 업데이트한다.
   4. Queue a task를 user interaction task source로 추가하여 p를 undefined로 resolve한다.
   5. applyPausePolicy가 true라면, 다음 하위 단계를 실행한다:
      1. newMutedState를, active가 false면 true로, 그렇지 않으면 false로 설정한다.
      2. captureKind 타입의 소스를 가진 각 MediaStreamTrack에 대해, queue a task를 user interaction task source로 추가하여 트랙의 음소거 상태 설정을 newMutedState로 실행한다.
5. p를 반환합니다.

setMicrophoneActive(active), setCameraActive(active) 및 setScreenshareActive(active) 메서드는 사용자 에이전트의 특성에 따라 거부될 수 있습니다. 특히 페이지에서 마이크, 카메라, 화면 공유를 활성화(음소거 해제)하려고 할 때 거부될 수 있습니다. 사용자 에이전트는 이 경우 일시적 활성화를 요구할 수 있습니다. 실제 결정을 위해 사용자 입력(프롬프트 등)을 요구할 수도 있습니다.

사용자 에이전트는 미디어 세션 액션에 대한 핸들러를 호출하는 UI를 표시할 수 있습니다.

6. MediaMetadata 인터페이스

[Exposed=Window]
interface MediaMetadata {
  constructor(optional MediaMetadataInit init = {});
  attribute DOMString title;
  attribute DOMString artist;
  attribute DOMString album;
  attribute FrozenArray<object> artwork;
  [SameObject] readonly attribute FrozenArray<ChapterInformation> chapterInfo;
};

dictionary MediaMetadataInit {
  DOMString title = "";
  DOMString artist = "";
  DOMString album = "";
  sequence<MediaImage> artwork = [];
  sequence<ChapterInformationInit> chapterInfo = [];
};

MediaMetadata 객체는 MediaSession 과 연관된 메타데이터를 표현하며, 사용자 에이전트가 맞춤형 사용자 인터페이스를 제공하는 데 사용할 수 있습니다.

MediaMetadata 는 media session과 연관될 수 있습니다.

MediaMetadata 는 title, artist, album을 가지며, 모두 DOMString 타입입니다.

MediaMetadata 는 artwork images라는 MediaImage 타입의 시퀀스를 가집니다. 또한 MediaMetadata 는 converted artwork images를 가지며, 초기값은 undefined입니다.

MediaMetadata 는 chapter information이라는 리스트를 가집니다.

MediaMetadata 가 null이거나 다음 모든 조건을 만족하면 empty metadata라고 합니다:

• title이 빈 문자열이다.
• artist가 빈 문자열이다.
• album이 빈 문자열이다.
• artwork images의 길이가 0이다.
• chapter information의 길이가 0이다.

MediaMetadata(init) 생성자를 호출하면 다음 단계를 수행해야 합니다:

1. metadata를 새 MediaMetadata 객체로 설정합니다.
2. metadata의 title을 init의 title로 설정합니다.
3. metadata의 artist를 init의 artist로 설정합니다.
4. metadata의 album을 init의 album으로 설정합니다.
5. init의 artwork를 input으로 하여 convert artwork algorithm을 실행하고 성공하면 결과를 metadata의 artwork images로 설정합니다.
6. chapters를 ChapterInformation 타입의 빈 리스트로 설정합니다.
7. init의 chapterInfo의 각 entry에 대해, create a ChapterInformation을 실행하여 chapters에 추가합니다.
8. metadata의 chapter information을 creating a frozen array의 결과로 설정합니다.
9. metadata를 반환합니다.

input 파라미터로 convert artwork algorithm이 호출되면, input이 MediaImage 타입의 시퀀스일 때 사용자 에이전트는 다음 단계를 실행해야 합니다:

1. output을 MediaImage 타입의 빈 리스트로 설정합니다.
2. input의 각 entry(MediaImage 리스트)에 대해 다음 단계를 실행합니다:
   1. image를 새 MediaImage로 설정합니다.
   2. baseURL을 entry settings object에서 지정된 API base URL로 설정합니다.
   3. entry의 src를 baseURL로 Parse합니다. 실패가 아니면 image의 src를 반환값으로 설정합니다. 실패 시 TypeError를 throw하고 단계를 중단합니다.
   4. image의 sizes를 entry의 sizes로 설정합니다.
   5. image의 type을 entry의 type으로 설정합니다.
   6. image를 output에 추가합니다.
3. output을 결과값으로 반환합니다.

title 속성은 MediaMetadata의 title을 반영합니다. getter는 MediaMetadata의 title을 반환해야 하며, setter는 MediaMetadata의 title을 주어진 값으로 설정해야 합니다.

artist 속성은 MediaMetadata의 artist를 반영합니다. getter는 MediaMetadata의 artist를 반환해야 하며, setter는 MediaMetadata의 artist를 주어진 값으로 설정해야 합니다.

album 속성은 MediaMetadata의 album을 반영합니다. getter는 MediaMetadata의 album을 반환해야 하며, setter는 MediaMetadata의 album을 주어진 값으로 설정해야 합니다.

artwork 속성은 MediaMetadata의 artwork images를 반영합니다. getter는 다음 단계를 실행해야 합니다:

1. MediaMetadata의 converted artwork images가 undefined라면 다음 단계를 실행합니다:
   1. frozenArtwork을 JavaScript Array 값으로 설정합니다.
   2. MediaMetadata의 artwork images의 각 entry에 대해 다음 단계를 실행합니다:
      1. image를 converting to a JavaScript object entry의 결과로 설정합니다.
      2. SetIntegrityLevel(image, "frozen")를 실행하여 스크립트에 의한 의도치 않은 변경을 방지합니다.
      3. image를 frozenArtwork에 추가합니다.
   3. SetIntegrityLevel(frozenArtwork, "frozen")을 실행합니다.
   4. MediaMetadata의 converted artwork images를 frozenArtwork로 설정합니다.
2. MediaMetadata의 converted artwork images를 반환합니다.

setter는 value를 새 값으로 설정할 때 다음 단계를 실행해야 합니다:

1. convertedArtwork을 converting value를 MediaImage 타입의 시퀀스로 변환한 결과로 설정합니다.
2. convertedArtwork로 convert artwork algorithm을 실행하여 성공하면 MediaMetadata의 artwork images로 결과값을 설정합니다.
3. MediaMetadata의 converted artwork images를 undefined로 설정합니다.

MediaMetadata의 title, artist, album, artwork images가 수정될 때 사용자 에이전트는 다음 단계를 실행해야 합니다:

1. 인스턴스에 media session이 연관되지 않았다면 단계를 중단합니다.
2. 그렇지 않으면 작업을 큐에 추가하여 다음 하위 단계를 실행합니다:
   1. 인스턴스가 더 이상 media session과 연관되지 않으면 단계를 중단합니다.
   2. 그렇지 않으면 병렬로 update metadata algorithm을 실행합니다.

7. ChapterInformation 인터페이스

[Exposed=Window]
interface ChapterInformation {
  readonly attribute DOMString title;
  readonly attribute double startTime;
  [SameObject] readonly attribute FrozenArray<MediaImage> artwork;
};

dictionary ChapterInformationInit {
  DOMString title = "";
  double startTime = 0;
  sequence<MediaImage> artwork = [];
};

ChapterInformation 객체는 개별 챕터에 대한 메타데이터(섹션 제목, 해당 타임스탬프, 해당 섹션의 스크린샷 이미지 데이터 등)를 표현하며, 사용자 에이전트가 맞춤형 사용자 인터페이스를 제공하는 데 사용할 수 있습니다.

ChapterInformation 은 title이라는 DOMString 값을 가집니다.

ChapterInformation 은 startTime이라는 double 값을 가집니다.

ChapterInformation 은 artwork images 리스트를 가집니다.

create a ChapterInformation 을 init으로 생성하려면, 다음 단계를 실행합니다:

1. chapterInfo를 새 ChapterInformation 객체로 설정합니다.
2. chapterInfo의 title을 init의 title로 설정합니다.
3. chapterInfo의 startTime을 init의 startTime으로 설정합니다. startTime이 음수이거나 duration보다 크면 TypeError를 throw합니다.
4. artwork에 init의 artwork를 input으로 하여 convert artwork algorithm을 실행한 결과를 저장합니다.
5. chapterInfo의 artwork images를 artwork에서 creating a frozen array의 결과로 설정합니다.
6. chapterInfo를 반환합니다.

title 속성은 ChapterInformation의 title을 반영합니다. getter는 ChapterInformation의 title을 반환해야 합니다.

startTime 속성은 ChapterInformation의 startTime(초 단위)을 반영합니다. getter는 ChapterInformation의 startTime을 반환해야 합니다.

artwork 속성은 ChapterInformation의 artwork images를 반영합니다. getter는 ChapterInformation의 artwork images를 반환해야 합니다.

8. MediaImage 딕셔너리

dictionary MediaImage {
  required USVString src;
  DOMString sizes = "";
  DOMString type = "";
};

MediaImage 딕셔너리 멤버는 ImageResource 명세를 참고했습니다 [IMAGE-RESOURCE].

src 딕셔너리 멤버는 MediaImage 객체의 source를 지정하는 데 사용됩니다. 이미지를 가져올 수 있는 URL입니다.

sizes 딕셔너리 멤버는 MediaImage 객체의 sizes를 지정하는 데 사용됩니다. HTML sizes 속성의 명세를 따르며, link 요소의 sizes 속성과 동일하게 파싱됩니다. 이 문자열은 고유한 공백으로 구분된 토큰의 무순서 집합이며, ASCII 대소문자 구분 없음으로 이미지 크기를 나타냅니다. 각 키워드는 "any" 문자열과 일치하거나, 앞에 0이 없는 두 개의 유효한 0이 아닌 정수를 X 문자로 구분한 값입니다. 키워드는 원시 픽셀 단위의 아이콘 크기를 나타냅니다(CSS 픽셀과 다름). 여러 이미지 객체가 있으면 사용자 에이전트는 이 값을 사용해 디스플레이 컨텍스트에 가장 적합한 아이콘을 선택할 수 있습니다. sizes 속성의 파싱 단계는 HTML link 요소의 sizes 속성 파싱 단계를 따라야 합니다.

type 딕셔너리 멤버는 MediaImage 객체의 MIME type을 지정하는 데 사용됩니다. 이미지의 미디어 타입을 나타내는 힌트입니다. 사용자 에이전트가 지원하지 않는 미디어 타입의 이미지를 무시할 수 있도록 합니다.

9. MediaPositionState 딕셔너리

dictionary MediaPositionState {
  unrestricted double duration;
  double playbackRate;
  double position;
};

MediaPositionState 딕셔너리는 MediaSession과 연관된 현재 재생 위치를 표현하며, 사용자 에이전트가 현재 재생 위치와 길이를 표시하는 사용자 인터페이스를 제공하는 데 사용할 수 있습니다.

duration 딕셔너리 멤버 는 길이를 초 단위로 지정합니다. 항상 양수이어야 하며, 끝이 정의되지 않은 미디어(예: 라이브 재생)에는 양의 무한대를 사용할 수 있습니다.

playbackRate 딕셔너리 멤버 는 재생 속도를 지정합니다. 양수면 정방향, 음수면 역방향 재생을 나타냅니다. 0이 되어서는 안 됩니다.

position 딕셔너리 멤버 는 마지막 보고된 재생 위치(초 단위)를 지정합니다. 항상 양수여야 합니다.

10. MediaSessionActionDetails 딕셔너리

dictionary MediaSessionActionDetails {
  required MediaSessionAction action;
  double seekOffset;
  double seekTime;
  boolean fastSeek;
  boolean isActivating;
  MediaSessionEnterPictureInPictureReason enterPictureInPictureReason;
};

MediaSessionActionHandler 는 details 파라미터(딕셔너리 타입 MediaSessionActionDetails)와 함께 실행되어야 합니다.

action 딕셔너리 멤버는 MediaSessionActionHandler가 연관된 media session action을 지정합니다.

seekOffset 딕셔너리 멤버는 media session action이 seekbackward 또는 seekforward일 때 제공될 수 있습니다. 재생 시간을 이동할 초 단위 시간이며, 있으면 항상 양수여야 합니다. 제공되지 않으면 사이트가 적절한 시간(예: 몇 초)을 선택해야 합니다.

media session action이 seekto일 때:

• seekTime 딕셔너리 멤버는 반드시 제공되어야 하며, 재생 시간을 이동할 초 단위 시간입니다.
• fastSeek 딕셔너리 멤버는 제공될 수 있으며, action이 여러 번 연속 호출되고 마지막 호출이 아닌 경우 true입니다.

isActivating 딕셔너리 멤버는 사용자 에이전트가 모든 입력 소스 일시정지를 수행할 예정이면 false이고, 그렇지 않으면 true입니다. 사용자 에이전트가 모든 입력 소스 일시정지 정책을 구현하고 media session action이 togglecamera, togglemicrophone 또는 togglescreenshare인 경우 이 딕셔너리 멤버는 반드시 존재해야 합니다.

media session action이 enterpictureinpicture일 때, enterPictureInPictureReason 딕셔너리 멤버는 반드시 제공되어야 하며, UA가 이 액션을 트리거한 이유입니다.

enterPictureInPictureReason 는 다음 값 중 하나를 가질 수 있습니다:

• other: picture-in-picture에 들어가는 이유가 기존 열거형 값에 속하지 않음
• useraction: 사용자가 명시적으로 picture-in-picture 버튼(예: 사용자 에이전트 UI에서 picture-in-picture 버튼 클릭)을 눌러 진입함
• contentoccluded: 페이지가 가려져서(탭 전환, 탭 최소화 등) 사용자 에이전트가 picture-in-picture를 요청함

11. 권한 정책 통합

이 명세는 "mediasession"이라는 문자열로 식별되는 정책 제어 기능을 정의합니다. 기본 허용 목록은 *입니다.

문서의 권한 정책은 해당 문서의 콘텐츠가 MediaSession API를 사용할 수 있는지 결정합니다. 문서에서 비활성화된 경우, 사용자 에이전트는 해당 문서의 미디어 세션을 활성 미디어 세션으로 선택하지 않아야 합니다.

12. 예시

이 섹션은 비규범적입니다.

navigator.mediaSession.metadata = new MediaMetadata({
  title: "Episode Title",
  artist: "Podcast Host",
  album: "Podcast Title",
  artwork: [{src: "podcast.jpg"}],
  chapterInfo: [
    {title: "Chapter 1", startTime: 0, artwork: [{src: "chapter1.jpg"}]},
    {title: "Chapter 2", startTime: 120, artwork: [{src: "chapter2.jpg"}]}
  ]
});

navigator.mediaSession.metadata = new MediaMetadata({
  title: "Episode Title",
  artist: "Podcast Host",
  album: "Podcast Title",
  artwork: [
    {src: "podcast.jpg", sizes: "128x128", type: "image/jpeg"},
    {src: "podcast_hd.jpg", sizes: "256x256"},
    {src: "podcast_xhd.jpg", sizes: "1024x1024", type: "image/jpeg"},
    {src: "podcast.png", sizes: "128x128", type: "image/png"},
    {src: "podcast_hd.png", sizes: "256x256", type: "image/png"},
    {src: "podcast.ico", sizes: "128x128 256x256", type: "image/x-icon"}
  ],
  chapterInfo: [
    {title: "Chapter 1", startTime: 0, artwork: [
       {src: "chapter1_a.jpg", sizes: "128x128", type: "image/jpeg"},
       {src: "chapter1_b.png", sizes: "256x256", type: "image/png"}
     ]},
    {title: "Chapter 2", startTime: 120, artwork: [
       {src: "chapter2_a.jpg", sizes: "128x128", type: "image/jpeg"},
       {src: "chapter2_b.png", sizes: "256x256", type: "image/png"}
     ]}
  ]
});

var audio1 = document.createElement("audio");
audio1.src = "chapter1.mp3";

var audio2 = document.createElement("audio");
audio2.src = "chapter2.mp3";

audio1.play();
audio1.addEventListener("ended", function() {
  audio2.play();
});

function updateMetadata(event) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: event.target == audio1 ? "Chapter 1" : "Chapter 2",
    artist: "An Author",
    album: "A Book",
    artwork: [{src: "cover.jpg"}]
  });
}

audio1.addEventListener("play", updateMetadata);
audio2.addEventListener("play", updateMetadata);

var tracks = ["chapter1.mp3", "chapter2.mp3", "chapter3.mp3"];
var trackId = 0;

var audio = document.createElement("audio");
audio.src = tracks[trackId];

function updatePlayingMedia() {
  audio.src = tracks[trackId];
  // metadata 업데이트 (생략)
}

navigator.mediaSession.setActionHandler("previoustrack", function() {
  trackId = (trackId + tracks.length - 1) % tracks.length;
  updatePlayingMedia();
});

navigator.mediaSession.setActionHandler("nexttrack", function() {
  trackId = (trackId + 1) % tracks.length;
  updatePlayingMedia();
});

navigator.mediaSession.setActionHandler("seekto", function(details) {
  audio.currentTime = details.seekTime;
});

var adFrame;
var audio = document.createElement("audio");
audio.src = "foo.mp3";

function resetActionHandlers() {
  navigator.mediaSession.setActionHandler("play", _ => audio.play());
  navigator.mediaSession.setActionHandler("pause", _ => audio.pause());
}

resetActionHandlers();

// 페이지가 광고를 재생하려 할 때 호출되는 메서드
function pauseAudioAndPlayAd() {
  audio.pause();
  navigator.mediaSession.playbackState = "playing";
  setUpAdFrame();
  adFrame.contentWindow.postMessage("play_ad");
  navigator.mediaSession.setActionHandler("pause", pauseAd);
}

function pauseAd() {
  adFrame.contentWindow.postMessage("pause_ad");
  navigator.mediaSession.playbackState = "paused";
  navigator.mediaSession.setActionHandler("play", resumeAd);
}

function resumeAd() {
  adFrame.contentWindow.postMessage("resume_ad");
  navigator.mediaSession.playbackState = "playing";
  navigator.mediaSession.setActionHandler("pause", pauseAd);
}

window.onmessage = function(e) {
  if (e.data === "ad finished") {
    removeAdFrame();
    navigator.mediaSession.playbackState = "none";
    resetActionHandlers();
  }
}

function setUpAdFrame() {
  adFrame = document.createElement("iframe");
  adFrame.src = "https://example.com/ad-iframe.html";
  document.body.appendChild(adFrame);
}

function removeAdFrame() {
  adFrame.remove();
}

// 미디어가 로드되면, 길이(duration) 설정.
navigator.mediaSession.setPositionState({
  duration: 60
});

// 미디어가 처음부터 재생 시작.
navigator.mediaSession.playbackState = "playing";

// 2배속 10초부터 재생 시작.
navigator.mediaSession.setPositionState({
  duration: 60,
  playbackRate: 2,
  position: 10
});

// 미디어 일시정지.
navigator.mediaSession.playbackState = "paused";

// 미디어 리셋(reset).
navigator.mediaSession.setPositionState(null);

var isMicrophoneActive = false;
var isCameraActive = false;

navigator.mediaSession.setMicrophoneActive(isMicrophoneActive);
navigator.mediaSession.setCameraActive(isCameraActive);

navigator.mediaSession.setActionHandler("togglemicrophone", function() {
  if (isMicrophoneActive) {
    // 마이크 음소거. 구현 생략.
  } else {
    // 마이크 음소거 해제. 구현 생략.
  }
  isMicrophoneActive = !isMicrophoneActive;
  navigator.mediaSession.setMicrophoneActive(isMicrophoneActive);
});

navigator.mediaSession.setActionHandler("togglecamera", function() {
  if (isCameraActive) {
    // 카메라 끄기. 구현 생략.
  } else {
    // 카메라 켜기. 구현 생략.
  }
  isCameraActive = !isCameraActive;
  navigator.mediaSession.setCameraActive(isCameraActive);
});

navigator.mediaSession.setActionHandler("hangup", function() {
  // 통화 종료. 구현 생략.
});

var currentSlideIndex = 0;

navigator.mediaSession.setActionHandler("previousslide", function() {
  currentSlideIndex--;
  // 현재 슬라이드 설정. 구현 생략.
});

navigator.mediaSession.setActionHandler("nextslide", function() {
  currentSlideIndex++;
  // 현재 슬라이드 설정. 구현 생략.
});

navigator.mediaSession.setActionHandler("enterpictureinpicture", function() {
  remoteVideo.requestPictureInPicture();
});

// 오디오가 활성화된 MediaStream 생성.
const stream = await navigator.mediaDevices.getUserMedia({audio:true});
const track = stream.getAudioTracks()[0];
navigator.mediaSession.setActionHandler("voiceactivity", function() {
  if (track.muted) {
    // 음소거 해제 알림 표시. 사용자가 허용하면 setMicrophoneActive(true)를 호출하여 음소거 해제.
  }
});

감사의 글

편집자들은 Paul Adenot, Jake Archibald, Tab Atkins, Jonathan Bailey, François Beaufort, Marcos Caceres, Domenic Denicola, Ralph Giles, Anne van Kesteren, Tobie Langel, Michael Mahemoff, Jer Noble, Elliott Sprehn, Chris Wilson, 그리고 Jörn Zaefferer가 기술적 논의에 참여해 이 명세가 가능하도록 해주신 것에 감사를 표합니다.

특별히 Philip Jägenstedt와 David Vest에게는 미디어 세션의 모든 측면을 설계하는 데 도움을 주시고, 초기 설계 이슈를 해결하는 데 인내심을 보여주신 것에 깊이 감사드리며; Jer Noble에게는 iOS 오디오 포커스 모델과도 잘 작동하는 모델을 구축하는 데 도움을 주신 것에, 그리고 Mounir Lamouri와 Anton Vayvod에게는 이 명세가 실제로 만들어질 수 있도록 초기 참여와 피드백, 지원을 해주신 것에 감사드립니다.