Chrome 62의 미디어 업데이트

François Beaufort
François Beaufort
GitHub

Android용 영구 라이선스

암호화된 미디어 확장 프로그램 (EME)의 영구 라이선스란 애플리케이션이 서버에 다른 라이선스 요청을 전송하지 않고도 라이선스를 메모리에 로드할 수 있도록 라이선스를 기기에 유지할 수 있음을 의미합니다. EME에서 오프라인 재생이 지원되는 방식입니다.

지금까지 ChromeOS만 영구 라이선스를 지원하는 플랫폼이었습니다. 더 이상 사실이 아닙니다. 이제 Android에서도 기기가 오프라인 상태일 때 EME를 통해 보호된 콘텐츠를 재생할 수 있습니다.

const config = [{
  sessionTypes: ['persistent-license'],
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'SW_SECURE_DECODE' // Widevine L3
  }]
}];

// Chrome will prompt user if website is allowed to uniquely identify
// user's device to play protected content.
navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content while being offline when
  // license is stored locally on device and loaded later.
})
.catch(error => {
  // Persistent licenses are not supported on this platform yet.
});

샘플 미디어 PWA를 확인하고 다음 단계에 따라 영구 라이선스를 직접 사용해 볼 수 있습니다.

  1. https://biograf-155113.appspot.com/ttt/episode-2/로 이동합니다.
  2. '오프라인 저장'을 클릭하고 동영상이 오프라인 저장될 때까지 기다립니다.
  3. 비행기 모드를 사용 설정합니다.
  4. '재생' 버튼을 클릭하고 동영상을 즐기세요.

Android용 Widevine L1

이미 알고 계시겠지만 모든 Android 기기는 Widevine 보안 수준 3 (Widevine L3)을 지원해야 합니다. 하지만 모든 콘텐츠 처리, 암호화, 제어가 신뢰할 수 있는 실행 환경 (TEE) 내에서 실행되는 최고 보안 수준인 Widevine 보안 수준 1을 지원하는 기기도 많이 있습니다.

좋은 소식입니다. 이제 Android용 Chrome에서 Widevine L1이 지원되므로 미디어를 가장 안전한 방식으로 재생할 수 있습니다. ChromeOS에서는 이미 지원되었습니다.

const config = [{
  videoCapabilities: [{
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    robustness: 'HW_SECURE_ALL' // Widevine L1
  }]
}];

// Chrome will prompt user if website is allowed to uniquely identify
// user's device to play protected content.
navigator.requestMediaKeySystemAccess('com.widevine.alpha', config)
.then(access => {
  // User will be able to watch encrypted content in the most secure way.
})
.catch(error => {
  // Widevine L1 is not supported on this platform yet.
});

적응형 미디어 형식 (예: DASH 및 HLS)용 JavaScript 라이브러리인 Shaka Player에는 Widevine L1을 사용해 볼 수 있는 데모가 있습니다.

  1. https://shaka-player-demo.appspot.com/demo/로 이동하여 메시지가 표시되면 '허용'을 클릭합니다.
  2. 'Angel One (멀티코덱, 다국어, Widevine)'을 선택합니다.
  3. '구성' 섹션의 '동영상 안정성' 입력란에 HW_SECURE_ALL를 입력합니다.
  4. '로드' 버튼을 클릭하고 동영상을 즐기세요.

백그라운드 동영상 트랙 최적화 (MSE만 해당)

Chrome팀은 항상 배터리 수명을 개선할 새로운 방법을 모색하고 있으며 Chrome 62도 예외가 아닙니다.

이제 동영상이 미디어 소스 확장 프로그램(MSE)을 사용하는 경우 동영상이 백그라운드에서 재생될 때 (예: 표시되지 않는 탭에서) Chrome에서 동영상 트랙을 사용 중지합니다. 자세한 내용은 이전 도움말을 참고하세요.

실시간 MSE 스트림에서 탐색 가능한 범위 맞춤설정

이미 알고 계시겠지만 seekable 속성에는 브라우저가 탐색할 수 있는 미디어 리소스의 범위가 포함됩니다. 일반적으로 0에서 시작하여 미디어 리소스 길이에서 끝나는 단일 시간 범위가 포함됩니다. 라이브 스트림과 같이 시간을 사용할 수 없는 경우 시간 범위가 계속 변경될 수 있습니다.

좋은 소식은 이제 미디어 소스 확장 프로그램 (MSE)을 사용하여 현재 버퍼링된 범위와 결합된 단일 탐색 가능한 범위를 제공하거나 삭제하여 seekable 범위 로직을 더 효과적으로 맞춤설정할 수 있다는 것입니다. 따라서 미디어 소스 길이가 +Infinity인 경우 둘 다에 맞는 단일 탐색 가능한 범위가 생성됩니다.

아래 코드에서 미디어 소스는 이미 미디어 요소에 연결되어 있으며 init 세그먼트만 포함합니다.

const mediaSource = new MediaSource();
...

mediaSource.duration = +Infinity;
// Seekable time ranges: { }
// Buffered time ranges: { }

mediaSource.setLiveSeekableRange(1 /* start */, 4 /* end */);
// Seekable time ranges: { [1.000, 4.000) }
// Buffered time ranges: { }

// Let's append a media segment that starts at 3 seconds and ends at 6.
mediaSource.sourceBuffers[0].appendBuffer(someData);
// Seekable time ranges: { [1.000, 6.000) }
// Buffered time ranges: { [3.000, 6.000) }

mediaSource.clearLiveSeekableRange();
// Seekable time ranges: { [0.000, 6.000) }
// Buffered time ranges: { [3.000, 6.000) }

위에서 다루지 않은 사례가 많으므로 공식 샘플을 사용하여 버퍼링되고 탐색 가능한 시간 범위가 다양한 MSE 이벤트에 어떻게 반응하는지 확인해 보시기 바랍니다.

출고 예정 | Chromestatus 추적기 | Chromium 버그

MSE용 MP4의 FLAC

무손실 오디오 코딩 형식 FLAC은 Chrome 56부터 일반 미디어 재생에서 지원되었습니다. ISO-BMFF 지원 (즉, MP4의 FLAC)의 FLAC이 곧 추가되었습니다. 이제 Chrome 62에서 미디어 소스 확장 프로그램 (MSE)용으로 MP4의 FLAC을 사용할 수 있습니다.

참고로 Firefox팀에서 MP4 캡슐화 사양의 FLAC 지원을 개발하고 구현했으며 BBC에서는 MSE와 함께 이를 사용하는 실험을 진행하고 있습니다. 자세한 내용은 BBC의 'Delivering Radio 3 Concert Sound' 게시물을 참고하세요.

MP4의 FLAC이 MSE에서 지원되는지 감지하는 방법은 다음과 같습니다.

if (MediaSource.isTypeSupported('audio/mp4; codecs="flac"')) {
  // TODO: Fetch data and feed it to a media source.
}

전체 예시를 보려면 공식 샘플을 확인하세요.

출고 예정 | Chromestatus 추적기 | Chromium 버그

기기를 회전하면 동영상이 자동으로 전체 화면으로 전환됨

동영상이 표시 영역에서 재생되는 동안 기기를 가로 모드로 회전하면 재생이 자동으로 전체 화면 모드로 전환됩니다. 기기를 세로 모드로 회전하면 동영상이 창 모드로 다시 돌아갑니다. 자세한 내용은 이전 도움말을 참고하세요.