Aktualności multimedialne w Chrome 63 i 64

François Beaufort
François Beaufort
GitHub

Możliwości multimedialne – interfejs API informacji o dekodowaniu

Obecnie programiści stron internetowych polegają na isTypeSupported() lub canPlayType(), aby niejasnie określić, czy niektóre multimedia można zdekodować, czy nie. Powinno jednak brzmieć: „Jak sprawdzić wydajność na tym urządzeniu?”

Jest to dokładnie jedna z rzeczy, które chce rozwiązać zaproponowany przez funkcję obsługi multimediów: interfejs API służący do wysyłania do przeglądarki zapytań o możliwości dekodowania urządzenia na podstawie informacji takich jak kodeki, profil, rozdzielczość, szybkość transmisji bitów itp. Na podstawie wcześniejszych statystyk odtwarzania zarejestrowanych przez przeglądarkę widoczne byłyby informacje o tym, czy odtwarzanie powinno być płynne i efektywne.

Oto jak obecnie działa interfejs Decoding Info API. Przeczytaj oficjalną próbkę.

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.');
});

Możesz wypróbować różne konfiguracje multimediów, aż znajdziesz najlepszą (smooth i powerEfficient) i używać jej do odtwarzania odpowiedniego strumienia. Przy okazji – bieżąca implementacja Chrome opiera się na wcześniej zarejestrowanych informacjach o odtwarzaniu. smooth ma wartość prawda, gdy odsetek pominiętych klatek jest mniejszy niż 10%, a powerEfficient ma wartość true, jeśli ponad 50% klatek jest zdekodowanych przez sprzęt. Małe ramki zawsze są uważane za oszczędne.

Zalecamy użycie fragmentu podobnego do tego poniżej, aby wykryć dostępność i wrócić do bieżącej implementacji w przypadku przeglądarek, które nie obsługują tego interfejsu 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;
  });
}

Dostępne w przypadku testowania origin

Aby zebrać jak najwięcej opinii od programistów, którzy korzystają z interfejsu Decoding Info API (w ramach funkcji Media Capabilities), dodaliśmy tę funkcję w Chrome 64 w ramach wersji próbnej origin.

Okres próbny zakończył się w kwietniu 2018 r.

Zamiar eksperymentu | Zamiar wysyłki | Narzędzie do śledzenia stanu Chrome | Błąd Chromium

Odtwarzanie filmów w trybie HDR w systemie Windows 10

Filmy HDR (High Dynamic Range) mają wyższy kontrast, dzięki czemu obraz są bardziej wyraziste i precyzyjne. Ponadto obsługa szerokiej gamy kolorów oznacza, że kolory są bardziej żywe.

Porównanie symulowanego SDR i HDR (prawdziwy tryb HDR wymaga wyświetlacza HDR)
Porównanie symulowanego SDR i HDR (prawdziwy HDR wymaga wyświetlacza HDR)

Chrome umożliwia teraz odtwarzanie 10-bitów w wersji 10-bitowej na urządzeniach z systemem Windows 10, dlatego Chrome obsługuje też odtwarzanie filmów w jakości HDR po systemie Windows 10 w trybie HDR. Od strony technicznej Chrome 64 obsługuje teraz profil kolorów scRGB, który pozwala odtwarzać multimedia w trybie HDR.

Możesz wypróbować tę opcję, oglądając w YouTube film The World w HDR w rozdzielczości 4K (ULTRA HD) i sprawdzić, czy film będzie odtwarzany w jakości HDR, sprawdzając ustawienia jakości w odtwarzaczu YouTube.

Ustawienie jakości odtwarzacza YouTube z HDR
Ustawienie jakości odtwarzacza YouTube z funkcją HDR

Na razie potrzebujesz tylko jesiennej aktualizacji Windows 10 dla twórców, karty graficznej i wyświetlacza zgodnego z HDR (np. karta NVIDIA 10-series, telewizor lub monitor LG HDR) oraz włącz tryb HDR w ustawieniach wyświetlacza Windows.

Deweloperzy mogą wykryć przybliżoną gamę kolorów obsługiwaną przez urządzenie wyjściowe za pomocą niedawnego zapytania o multimedia o gamie kolorów oraz liczbę bitów używanych do wyświetlania koloru na ekranie za pomocą parametru screen.colorDepth. Oto jeden ze sposobów użycia tych funkcji do sprawdzenia, czy standard VP9 obsługuje 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"'))
}

Ciąg kodeka VP9 z profilem 2 przekazany do isTypeSupported() w powyższym przykładzie należy zaktualizować zgodnie z właściwościami kodowania filmu.

Pamiętaj, że nie można jeszcze definiować kolorów HDR w plikach CSS, canvas, obrazach i treściach chronionych. Zespół Chrome pracuje nad rozwiązaniem tego problemu. Nie przegap ważnych informacji!

Licencje trwałe dla systemów Windows i Mac

Trwała licencja w rozszerzeniach zaszyfrowanych multimediów (EME) oznacza, że licencja może być przechowywana na urządzeniu, dzięki czemu aplikacje mogą wczytywać ją w pamięci bez wysyłania kolejnych żądań licencji do serwera. Tak obsługiwane jest odtwarzanie offline w EME.

Do tej pory jedynymi platformami, które obsługiwały trwałe licencje, były ChromeOS i Android. To już nieprawda. Odtwarzanie chronionych treści przy użyciu EME, gdy urządzenie jest offline, jest teraz możliwe także w Chrome 64 na Windowsie i na Macu.

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.
});

Możesz wypróbować licencje trwałe, sprawdzając przykładową progresywną aplikację internetową (PWA) i wykonując te czynności:

  1. Otwórz stronę https://biograf-155113.appspot.com/ttt/episode-2/.
  2. Kliknij „Udostępnij w trybie offline” i poczekaj, aż film zostanie pobrany.
  3. Wyłącz połączenie z internetem.
  4. Kliknij przycisk „Odtwórz” i odtwórz film.

Wstępne wczytywanie multimediów to domyślnie „metadane”

Podobnie jak w innych przeglądarkach, Chrome na komputery ustawia teraz domyślną wartość wstępnego wczytywania elementów <video> i <audio> na "metadata", by zmniejszyć wykorzystanie przepustowości i zasobów. Od wersji Chrome 64 ten nowy sposób działa tylko w przypadkach, gdy nie ustawiono żadnej wartości wstępnego wczytywania. Pamiętaj, że wskazówka dotycząca atrybutu wstępnego wczytywania jest odrzucana, gdy do elementu multimedialnego dołączono element MediaSource, ponieważ witryna internetowa obsługuje własne wstępne wczytywanie.

Oznacza to, że <video> wartość wstępnego wczytywania wynosi teraz "metadata", a <video preload="auto"> ma wartość "auto". Wypróbuj oficjalną próbkę.

Zamiar wysyłki | Narzędzie do śledzenia stanu Chrome | Błąd Chromium

Nieobsługiwana szybkość odtwarzania stanowi wyjątek

Po zmianie specyfikacji HTML, gdy parametr playbackRate elementów multimedialnych jest ustawiony na wartość nieobsługiwaną przez Chrome (np. na wartość ujemną), w Chrome 63 zgłaszany jest DOMException "NotSupportedError".

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

Przy okazji – obecna implementacja Chrome powoduje wystąpienie tego wyjątku, gdy playbackRate ma wartość ujemną, mniejszą niż 0, 0625 lub większą niż 16. Zajrzyj do oficjalnej próbki, by zobaczyć, jak to działa.

Zamiar wysyłki | Narzędzie do śledzenia stanu Chrome | Błąd Chromium

Optymalizacje ścieżek wideo w tle

Zespół Chrome cały czas szuka nowych sposobów na wydłużenie czasu pracy na baterii i Chrome 63 nie jest wyjątkiem.

Jeśli film nie zawiera żadnych ścieżek audio, odtwarzanie filmu w tle (np. na niewidocznej karcie) w Chrome (Windows, Mac, Linux i ChromeOS) zostanie automatycznie wstrzymane. Ten artykuł nawiązuje do podobnej zmiany, która dotyczyła tylko filmów MSE w Chrome 62.

Błąd Chromium

Usuń wyciszenie, aby uzyskać ekstremalną szybkość odtwarzania

Przed Chrome 64 dźwięk był wyciszony, gdy wartość playbackRate była poniżej 0,5 lub wyższa.Wynika to z znacznego pogorszenia jakości obrazu. W Chrome nastawiliśmy się na WSOLA, więc w celu pogorszenia jakości dźwięku nie trzeba już wyciszać dźwięku. Oznacza to, że teraz dźwięk może być bardzo wolny i bardzo szybki.

Błąd Chromium