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

François Beaufort
François Beaufort
GitHub

미디어 기능 - Decoding Info API

오늘날 웹 개발자들은 isTypeSupported() 또는 canPlayType()에 의존하여 모호하게 디코딩할 수 있는 미디어인지 알 수 없습니다. 하지만 진짜 질문은 다음과 같아야 합니다. "이 기기에서 얼마나 잘 작동하나요?"

이는 제안된 미디어 기능이 원하는 기능 중 하나입니다. Solve: 기기의 디코딩 기능에 관해 브라우저에 쿼리하는 API입니다. 코덱, 프로필, 해상도, 비트 전송률 등의 정보를 기반으로 합니다. 는 재생이 매끄럽고 원활하게 이루어져야 하는지와 같은 정보를 노출합니다. 브라우저에서 기록한 이전 재생 통계에 근거한 전력 효율이 높은 편입니다.

요약하면 현재 Decoding Info 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의 현재 구현은 이전에 확인할 수 있습니다. 백분율이 충족되면 smooth를 true로 정의합니다. 10% 미만이며 powerEfficient은 50% 이상의 프레임이 하드웨어에서 디코딩됩니다. 작은 프레임은 항상 전력 효율이 높은 것으로 간주됩니다.

아래와 유사한 스니펫을 사용하여 제한 사항이 없는 브라우저의 경우 현재 구현으로 되돌아갈 수 이 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를 사용하는 개발자로부터 가능한 한 많은 피드백을 받으려면 Info API (미디어 기능의 일부)를 필드에 포함하려면 이전에 기능을 오리진 트라이얼로 제공합니다

무료 체험판은 2018년 4월에 종료되었습니다.

실험 의도 | 발송 예정 | Chrome상태 추적기 | Chromium 버그

Windows 10에서 HDR 동영상 재생

HDR (High Dynamic Range) 동영상은 대비가 높고 정확하고 섬세한 그림자와 놀라운 하이라이트를 그 어느 때보다도 선명하게 표현합니다. 그 외에도 넓은 색 영역을 지원하면 색상이 더 선명해집니다.

<ph type="x-smartling-placeholder">
</ph> 시뮬레이션된 SDR과 HDR 비교 (트루 HDR을 보려면 HDR 디스플레이가 필요함) <ph type="x-smartling-placeholder">
</ph> 시뮬레이션된 SDR과 HDR 비교 (트루 HDR을 보려면 HDR 디스플레이가 필요함)

VP9 프로필 2는 이제 Windows 10 가을용 Chrome에서 10비트 재생이 지원됩니다. 크리에이터 업데이트, Chrome은 Windows 10 HDR 모드입니다. 기술적으로 Chrome 64에서 이제 scRGB 색상을 지원합니다. 프로필을 통해 HDR로 미디어를 재생할 수 있습니다.

YouTube에서 4K HDR (ULTRA HD)로 즐기는 The World를 시청해 보세요. YouTube 플레이어 품질 설정을 확인하여 HDR이 재생되는지 확인합니다.

<ph type="x-smartling-placeholder">
</ph> HDR을 지원하는 YouTube 플레이어 품질 설정 <ph type="x-smartling-placeholder">
</ph> HDR을 지원하는 YouTube 플레이어 품질 설정

지금은 HDR 호환 Windows 10 가을 크리에이터 업데이트만 있으면 됩니다. 그래픽 카드 및 디스플레이 (예: 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"'))
}

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

CSS, 캔버스, 이미지 및 보호된 콘텐츠가 포함됩니다. Chrome팀에서 이 문제를 해결하기 위해 노력하고 있습니다. 계속해서 많은 관심 부탁드립니다.

Windows 및 Mac용 영구 라이선스

암호화된 미디어 확장 프로그램 (EME)의 영구 라이선스는 애플리케이션이 라이선스를 해당 기기에 다른 라이선스 요청을 서버로 전송하지 않고 메모리를 종료할 수 있습니다. 이렇듯 오프라인 재생은 EME에서 지원됩니다.

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

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. '재생'을 클릭합니다. 버튼을 누르고 동영상을 즐기세요!

미디어 미리 로드가 기본적으로 '메타데이터'로 설정됨

다른 브라우저와 일치 Chrome 데스크톱은 이제 기본 <video> 및 <audio> 요소의 값을 "metadata"에 미리 로드하여 대역폭 및 리소스 사용량을 줄일 수 있습니다 Chrome 64부터 이 새로운 동작은 미리 로드 값이 설정되지 않은 경우에 적용됩니다 preload 속성의 힌트는 MediaSource가 미디어 요소에 다음과 같이 연결되면 삭제됩니다. 자체 미리 로드를 처리합니다

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

발송 예정 | Chrome상태 추적기 | Chromium 버그

지원되지 않는 playRate로 인해 예외가 발생합니다.

HTML 사양 변경에 따라, 미디어 요소의 <ph type="x-smartling-placeholder">playbackRate</ph> 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보다 큽니다. 사용해 보기 공식 샘플과 확인해 보세요.

발송 예정 | Chrome상태 추적기 | Chromium 버그

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

Chrome 팀은 항상 배터리 수명을 향상하고 Chrome 63도 예외는 아니었습니다.

동영상에 오디오 트랙이 없으면 동영상이 자동으로 Chrome에서 백그라운드 (예: 보이지 않는 탭)에서 재생될 때 일시중지됨 데스크톱 (Windows, Mac, Linux, ChromeOS) 본 이메일은 유사한 변경사항이 Chrome 62의 MSE 동영상에만 적용되었습니다.

Chromium 버그

극한 재생 속도의 음소거 삭제

Chrome 64 이전에는 playbackRate이 0.5 미만이거나 4 이상일 때 소리가 음소거되었습니다. 품질이 크게 저하되었기 때문입니다. Chrome이 품질 저하, 사운드를 위한 WSOLA (WSOLA) 접근 방식 더 이상 음소거하지 않아도 됩니다. 즉, 매우 느리게 사운드를 재생할 수 있고 지금 엄청나게 빠릅니다.

Chromium 버그