Chrome 63/64의 미디어 업데이트

François Beaufort
François Beaufort
GitHub

미디어 기능 - 디코딩 정보 API

오늘날 웹 개발자는 isTypeSupported() 또는 canPlayType()를 사용하여 일부 미디어를 디코딩할 수 있는지 여부를 대략적으로 파악합니다. 하지만 실제로 물어봐야 할 질문은 다음과 같습니다. '이 기기에서 얼마나 잘 실행될까?'

이것이 바로 제안된 미디어 기능이 해결하고자 하는 문제 중 하나입니다. 코덱, 프로필, 해상도, 비트 전송률 등의 정보를 기반으로 기기의 디코딩 기능에 관해 브라우저에 쿼리하는 API입니다. 브라우저에서 기록한 이전 재생 통계를 기반으로 재생이 원활하고 전력 효율적인지 등의 정보를 노출합니다.

간단히 말해 현재 디코딩 정보 API는 다음과 같이 작동합니다. 공식 샘플을 확인하세요.

const mediaConfig = {
  type: 'media-source', // or 'file'
  audio: {
    contentType: 'audio/webm; codecs=opus',
    channels: '2', // audio channels used by the track
    bitrate: 132266, // number of bits used to encode a second of audio
    samplerate: 48000 // number of samples of audio carried per second
  },
  video: {
    contentType: 'video/webm; codecs="vp09.00.10.08"',
    width: 1920,
    height: 1080,
    bitrate: 2646242, // number of bits used to encode a second of video
    framerate: '25' // number of frames used in one second
  }
};

navigator.mediaCapabilities.decodingInfo(mediaConfig).then(result => {
  console.log('This configuration is' +
      (result.supported ? '' : ' NOT') + ' supported,' +
      (result.smooth ? '' : ' NOT') + ' smooth and' +
      (result.powerEfficient ? '' : ' NOT') + ' power efficient.');
});

최적의 미디어 구성(smooth 및 powerEfficient)을 찾을 때까지 다양한 미디어 구성을 시도하고 이를 사용하여 적절한 미디어 스트림을 재생할 수 있습니다. 참고로 Chrome의 현재 구현은 이전에 기록된 재생 정보를 기반으로 합니다. 드롭된 프레임의 비율이 10% 미만이면 smooth가 true로 정의되고, 하드웨어에서 디코딩된 프레임이 50% 를 초과하면 powerEfficient가 true로 정의됩니다. 작은 프레임은 항상 전력 효율적인 것으로 간주됩니다.

아래와 유사한 스니펫을 사용하여 사용 가능 여부를 감지하고 이 API를 지원하지 않는 브라우저의 경우 현재 구현으로 대체하는 것이 좋습니다.

function isMediaConfigSupported(mediaConfig) {

  const promise = new Promise((resolve, reject) => {
    if (!('mediaCapabilities' in navigator)) {
      return reject('MediaCapabilities API not available');
    }
    if (!('decodingInfo' in navigator.mediaCapabilities)) {
      return reject('Decoding Info not available');
    }
    return resolve(navigator.mediaCapabilities.decodingInfo(mediaConfig));
  });

  return promise.catch(_ => {
    let fallbackResult = {
      supported: false,
      smooth: false, // always false
      powerEfficient: false // always false
    };
    if ('video' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.video.contentType);
      if (!fallbackResult.supported) {
        return fallbackResult;
      }
    }
    if ('audio' in mediaConfig) {
      fallbackResult.supported = MediaSource.isTypeSupported(mediaConfig.audio.contentType);
    }
    return fallbackResult;
  });
}

오리진 트라이얼에서 사용 가능

필드에서 디코딩 정보 API (미디어 기능의 일부)를 사용하는 개발자로부터 최대한 많은 의견을 받기 위해 이전에 Chrome 64에 이 기능을 오리진 트라이얼로 추가했습니다.

평가판은 2018년 4월에 종료되었습니다.

실험 의도 | 제공 의도 | Chromestatus 추적기 | Chromium 버그

Windows 10에서 HDR 동영상 재생

HDR (High Dynamic Range) 동영상은 대비가 높아 이전보다 더 선명하게 정확하고 세부적인 그림자와 놀라운 하이라이트를 보여줍니다. 또한 넓은 색상 영역을 지원하면 색상이 더 선명해집니다.

시뮬레이션된 SDR과 HDR 비교 (진정한 HDR을 보려면 HDR 디스플레이가 필요함)
시뮬레이션된 SDR과 HDR 비교 (진정한 HDR을 보려면 HDR 디스플레이가 필요함)

이제 Windows 10 가을 크리에이터 업데이트용 Chrome에서 VP9 프로필 2 10비트 재생이 지원되므로 Chrome은 Windows 10이 HDR 모드인 경우 HDR 동영상 재생도 지원합니다. 기술적으로 말하면 Chrome 64는 이제 scRGB 색상 프로필을 지원하므로 미디어가 HDR로 재생될 수 있습니다.

YouTube에서 The World in HDR in 4K (ULTRA HD)를 시청하여 직접 확인하고 YouTube 플레이어 품질 설정을 확인하여 HDR로 재생되는지 확인할 수 있습니다.

HDR이 포함된 YouTube 플레이어 화질 설정
HDR이 포함된 YouTube 플레이어 품질 설정

현재 필요한 것은 Windows 10 Fall Creator Update, HDR 호환 그래픽 카드 및 디스플레이 (예: NVIDIA 10 시리즈 카드, LG HDR TV 또는 모니터)이며 Windows 디스플레이 설정에서 HDR 모드를 사용 설정해야 합니다.

웹 개발자는 최근 color-gamut 미디어 쿼리를 사용하여 출력 기기에서 지원하는 대략적인 색상 영역을 감지하고 screen.colorDepth를 사용하여 화면에 색상을 표시하는 데 사용되는 비트 수를 감지할 수 있습니다. 다음은 이를 사용하여 VP9 HDR이 지원되는지 감지하는 한 가지 방법입니다.

// Detect if display is in HDR mode and if browser supports VP9 HDR.
function canPlayVp9Hdr() {

  // TODO: Adjust VP9 codec string based on your video encoding properties.
  return (window.matchMedia('(color-gamut: p3)').matches &&
      screen.colorDepth >= 48 &&
      MediaSource.isTypeSupported('video/webm; codecs="vp09.02.10.10.01.09.16.09.01"'))
}

위 예에서 isTypeSupported()에 전달된 프로필 2가 있는 VP9 코덱 문자열은 동영상 인코딩 속성에 따라 업데이트해야 합니다.

HDR 색상은 CSS, 캔버스, 이미지, 보호된 콘텐츠에서 아직 정의할 수 없습니다. Chrome팀에서 이 문제를 해결하기 위해 노력하고 있습니다. 계속해서 많은 관심 부탁드립니다.

Windows 및 Mac용 영구 라이선스

Encrypted Media Extensions (EME)의 영구 라이선스는 애플리케이션이 서버에 다른 라이선스 요청을 전송하지 않고도 메모리에 라이선스를 로드할 수 있도록 라이선스를 기기에 유지할 수 있음을 의미합니다. 오프라인 재생은 EME에서 다음과 같이 지원됩니다.

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

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

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. '재생' 버튼을 클릭하여 동영상을 즐기세요.

미디어 미리 로드 기본값이 'metadata'로 설정됨

다른 브라우저의 구현과 일치하도록 Chrome 데스크톱에서는 이제 대역폭과 리소스 사용량을 줄이기 위해 <video> 및 <audio> 요소의 기본 미리 로드 값을 "metadata"로 설정합니다. Chrome 64부터 이 새로운 동작은 프리로드 값이 설정되지 않은 경우에만 적용됩니다. 웹사이트에서 자체적으로 미리 로드를 처리하므로 MediaSource가 미디어 요소에 연결되면 미리 로드 속성의 힌트가 삭제됩니다.

즉, <video> 미리 로드 값은 이제 "metadata"이고 <video preload="auto"> 미리 로드 값은 "auto"으로 유지됩니다. 공식 샘플을 사용해 보세요.

출시 의도 | Chromestatus 추적기 | Chromium 버그

지원되지 않는 playbackRate는 예외를 발생시킴

HTML 사양 변경에 따라 미디어 요소의 playbackRate이 Chrome에서 지원하지 않는 값 (예: 음수 값)으로 설정되면 Chrome 63에서 "NotSupportedError" DOMException이 발생합니다.

const audio = document.querySelector('audio');
try {
  audio.playbackRate = -1;
} catch(error) {
  console.log(error.message); // Failed to set the playbackRate property
}

참고로 Chrome의 현재 구현에서는 playbackRate가 음수이거나 0.0625보다 작거나 16보다 큰 경우 이 예외를 발생시킵니다. 공식 샘플을 사용해 보세요.

출시 의도 | Chromestatus 추적기 | Chromium 버그

백그라운드 동영상 트랙 최적화

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

동영상에 오디오 트랙이 포함되어 있지 않으면 Chrome 데스크톱 (Windows, Mac, Linux, ChromeOS)에서 백그라운드 (예: 표시되지 않는 탭)로 재생될 때 동영상이 자동으로 일시중지됩니다. 이는 Chrome 62의 MSE 동영상에만 적용되는 유사한 변경사항의 후속 조치입니다.

Chromium 버그

과도한 재생률에 대한 음소거 삭제

Chrome 64 이전에는 품질이 크게 저하되어 playbackRate가 0.5 미만이거나 4 이상이면 소리가 음소거되었습니다. Chrome이 품질 저하를 위해 파형 유사성 중첩 추가 (WSOLA) 접근 방식으로 전환되었으므로 더 이상 소리를 음소거할 필요가 없습니다. 이제 소리를 아주 느리게 또는 아주 빠르게 재생할 수 있습니다.

Chromium 버그