Использование API возможностей медиа

API возможностей медиа (Media Capabilities API) предоставляет несколько ключевых функций, которые помогут вам лучше справиться с медиа, а также определить, как эффективно оно обрабатывается в реальном времени.

Эти функции включают:

• Возможность запросить у браузера информацию о его способности кодировать или декодировать медиа с заданным набором параметров кодирования. Эти параметры могут включать кодеки, разрешения, битрейты, частоту кадров и другие подобные детали. С помощью API возможностей медиа вы можете определить не только поддерживает ли браузер данный формат, но и насколько эффективно и плавно он это делает. Короче говоря, этот API заменяет и улучшает метод MediaSource isTypeSupported() или метод HTMLMediaElement canPlayType().
• Все более подробную информацию о свойствах экрана, чтобы принимать обоснованные решения при выборе лучшего формата для воспроизведения на устройстве пользователя. Например, вы можете использовать API для того, чтобы не пытаться воспроизводить контент с высоким динамическим диапазоном (HDR) на экране со стандартным динамическим диапазоном (SDR).
• Поддержка получения обратной связи в реальном времени о воспроизведении медиа, чтобы ваш код мог принимать обоснованные решения о корректировке качества потока или других настроек для управления воспринимаемыми пользователем производительностью и качеством медиа. Одним из элементов этого является возможность обнаруживать переключение устройства на другую графическую карту, чтобы вы могли внести соответствующие коррективы на основании возможностей новой графической карты.

Интерфейс MediaCapabilities доступен с помощью свойства mediaCapabilities, которое предоставляется как объектом navigator , так и объектом WorkerNavigator; другими словами, API возможностей медиа доступен как в основном потоке, так и в рабочих процессах.

Если объект существует, API возможностей медиа доступен. Поэтому вы можете проверить наличие API следующим образом:

if ("mediaCapabilities" in navigator) {
  // mediaCapabilities is available
} else {
  // mediaCapabilities IS NOT available
}

Например, для получения информации о возможностях декодирования видео вы создаете конфигурацию декодирования видео, которую передаете как параметр методу MediaCapabilities.decodingInfo(). Это возвращает промис, который выполняется с информацией о возможностях медиа, о том, можно ли декодировать видео и будет ли декодирование плавным и энергоэффективным. Вы также можете проверить декодирование аудио, а также кодирование видео и аудио.

Метод MediaCapabilities.decodingInfo() принимает в качестве параметра конфигурацию декодирования медиа.

В нашем примере мы проверяем возможности декодирования конфигурации видео. Конфигурация требует типа тестируемого медиа — например, простого file или MediaSource — и объекта конфигурации видео, который включает значения для contentType, width, height, bitrate, и framerate:

• contentType должен быть строкой, указывающей на допустимый тип MIME видео.
• width и height — это горизонтальные и вертикальные размеры видео; они также используются для определения соотношения сторон.
• bitrate — это количество битов, используемых для кодирования одной секунды видео.
• framerate — это количество кадров, воспроизводимых в секунду при воспроизведении видео.

const videoConfiguration = {
  type: "file",
  video: {
    contentType: "video/webm;codecs=vp8",
    width: 800,
    height: 600,
    bitrate: 10000,
    framerate: 15,
  },
};

Если бы мы запрашивали декодируемость аудиофайла, мы бы создали конфигурацию аудио, включая количество каналов и частоту дискретизации, исключив свойства, относящиеся только к видео — а именно размеры и частоту кадров:

const audioConfiguration = {
  type: "file",
  audio: {
    contentType: "audio/ogg",
    channels: 2,
    bitrate: 132700,
    samplerate: 5200,
  },
};

Если бы мы тестировали возможности кодирования, мы бы создали немного другую конфигурацию. В этом случае тип тестируемого медиа — это либо record (для записи медиа, т.е. объекта MediaRecorder), либо transmission (для медиа, передаваемого электронными средствами, такими как RTCPeerConnection) — плюс конфигурация аудио или видео, как описано выше.

Теперь, когда мы создали конфигурацию декодирования видео, мы можем передать её как параметр метода decodingInfo(), чтобы определить, можно ли декодировать видео, соответствующее этой конфигурации, и будет ли воспроизведение плавным и энергоэффективным.

let promise = navigator.mediaCapabilities.decodingInfo(videoConfiguration);

Методы decodingInfo() и encodingInfo() оба возвращают промисы. После выполнения промиса вы можете получить доступ к свойствам supported, smooth, и powerEfficient из возвращенного объекта.

Вместо присваивания промиса переменной, мы можем вывести значения, возвращаемые промисом, в консоль:

navigator.mediaCapabilities.decodingInfo(videoConfiguration).then((result) => {
  console.log(
    `This configuration is ${result.supported ? "" : "not "}supported,`,
  );
  console.log(`${result.smooth ? "" : "not "}smooth, and`);
  console.log(`${result.powerEfficient ? "" : "not "}power efficient.`);
});

В нашем примере декодирования видео произошла бы ошибка TypeError, если конфигурация медиа, переданная методу decodingInfo(), была некорректной. Возникновение ошибки может быть обусловлено несколькими причинами, в том числе:

• Указанный type не является одним из двух разрешенных значений: file или media-source
• Указанный contentType

Ошибка может быть вызвана тем, что type не является одним из двух возможных значений, contentType не является допустимым типом MIME кодека, или недопустимые или пропущенные определения пропущены из объекта конфигурации видео.

navigator.mediaCapabilities
  .decodingInfo(videoConfiguration)
  .then(console.log("It worked"))
  .catch((error) => console.error(`It failed: ${error}`));

• navigator.mediaCapabilities