Использование H.265/HEVC при воспроизведении веб-видео

задняя часть Архитектура

H.265

Ниже приводится введение энциклопедии Baidu в H.265: H.265 — это новый стандарт кодирования видео, разработанный ITU-T VCEG после H.264. Стандарт H.265 вращается вокруг существующего стандарта кодирования видео H.264, сохраняя некоторые исходные технологии и одновременно улучшая некоторые родственные технологии. Новая технология использует передовые методы для улучшения взаимосвязи между кодовым потоком, качеством кодирования, задержкой и сложностью алгоритма для достижения оптимальных настроек. Конкретное содержание исследования включает: повышение эффективности сжатия, повышение надежности и возможности исправления ошибок, уменьшение задержки в реальном времени, сокращение времени захвата канала и задержки произвольного доступа, а также снижение сложности. H.264 может достигать стандартного разрешения на скорости менее 1 Мбит/с благодаря оптимизации алгоритма (разрешение 1280P)720 или меньше) передача цифрового изображения; H.265 может передавать 720P (разрешение 1280) со скоростью передачи 1~2 Мбит/с720) Обычная передача аудио и видео высокой четкости.

По сравнению с H.264 он принес много качественных улучшений, и можно получить доступ к соответствующим сравнениям.Подробное объяснение различий между H.265 и H.264. Короче говоря, H.265, HEVC, как очень популярный в настоящее время метод сжатия видео, может обеспечить в среднем около 50% экономии ширины по сравнению с широко известным H.264.

在这里插入图片描述

связанная информация

Архитектура видеоплеера

Типичный современный плеер можно разделить на три части: пользовательский интерфейс, мультимедийный движок и декодер.Архитектурная модель выглядит следующим образом:

在这里插入图片描述

Жесткая поддержка декодирования

С ростом популярности видео 4K последние версии операционной системы Apple (Mac Hight Sierra и iOS 11) открыли новый отраслевой стандарт HEVC (High Efficiency Video Coding, также известный как H.265) [6]. По сравнению с текущим стандартом сжатия видео H.264, он может улучшить степень сжатия видео до 50%. С H.265 потоковое видео лучше, сохраняя качество видео неизменным. При том же битрейте качество можно улучшить почти в два раза. Следующие изображения представляют собой два изображения с одинаковым битрейтом и одинаковым разрешением (400 кбит/с 1080p): левое использует кодировку H.265, а правое — кодировку H.264.

在这里插入图片描述
Вообще говоря, операционная система использует аппаратное обеспечение (графическую карту) для декодирования видео, закодированного в формате H.265.Преимущества состоят в том, что энергопотребление жесткого решения низкое, а скорость декодирования высокая. Однако поддержка аппаратного декодирования кодировки H.265 в браузерах в настоящее время не популярна. После тестирования он поддерживается только в настраиваемых браузерах Chromium[7] и Edge 14. Вы можете использовать эту страницу для тестирования воспроизведения браузером видео по запросу, закодированного в формате H.265. Ниже приведен скриншот видео H.265, воспроизводимого в Chromium 64:
在这里插入图片描述
Следует отметить, что аппаратное декодирование требует, чтобы видеокарта пользователя поддерживала кодек H.265.В настоящее время графические карты, поддерживающие декодирование H.265, в основном включают: Intel HD Graphics 4400/4600/5000/5500/6000/620, Iris Графика 5100/5200/6100, NVIDIA GeForce GTX 745, GTX 750, GTX 750 Ti, GTX 850M, GTX 860M,GeForce 830M, 840M,GeForce GTX 970, GTX 980, GTX 970M, GTX 980M,GeForce GTX TITAN X, GeForce GTX 980 Ti, GeForce GTX 750 SE, GTX 950, GTX 960, GeForce GTX 1070, GTX 1080, GeForce GTX 1060, NVIDIA TITAN XP, GeForce GTX 1050, GTX 1050 Ti.

Веб-программное решение

В дополнение к жесткой схеме декодирования эффективным выбором также стало программное декодирование.Поскольку декодирование видео H.265 является задачей с интенсивным использованием ЦП и высокими требованиями к производительности, производительность декодера, реализованного языком сценариев на веб-стороне трудно удовлетворить требования. Исходя из этого, мы можем скомпилировать декодер, написанный на языке C, в библиотеку swc через схему декодирования H.265 на базе Flash, то есть через компилятор FlasCC[11], а затем вызвать библиотеку swc с помощью Action Script в Флэш плеер.

Еще одно решение основано на HTML5, то есть высокопроизводительный декодер, разработанный Kingsoft Cloud, компилируется в wasm-библиотеку по технологии WebAssembly.Wasm-файл существует в бинарном виде, который содержит независимые от платформы виртуальные инструкции (похожие на инструкции по сборке) . Это также решение, принятое многими мобильными платформами.

Связанные технологии HTML5

На следующем рисунке представлена ​​фоновая технология основных модулей и зависимостей ядра проигрывателя.

在这里插入图片描述
Контроллер Audio MSE основан на API-интерфейсе расширения источника мультимедиа, загрузчик потоков — на стандарте потоков, а декодер H.265 — на технологии WebAssembly.Каждый модуль разделен на разные потоки и зависит от веб-воркеров.

Расширения источника мультимедиа (сокращенно MSE):

Предоставляет функциональные возможности для потоковой передачи через Интернет без подключаемых модулей. С помощью API MSE (в основном включая: Media Source, Source Buffer и т. д.) можно создавать потоки мультимедиа с помощью JavaScript и воспроизводить их с помощью элементов HTMLMediaElement (включая элементы видео и аудио). Поддерживаются IE11 (win8+) и другие современные браузеры.

Streams

Стандарт предоставляет набор API для создания потоковых данных и управления ими, в частности, ReadableStream, WritableStream и TransformStream. Это позволяет нам обрабатывать данные постепенно, без необходимости кэшировать все данные в памяти для равномерной обработки. Мы можем использовать Fetch API для получения видеоданных, а возвращаемое тело — это объект ReadableStream. Этот объект представляет источник данных и внутренне поддерживает очередь для записи базового источника данных, который не был прочитан. Вы можете прочитать данные фрагмента во внутренней очереди через интерфейс getReader() ReadableStream.

Web Workers

Это позволяет однопоточному JavaScript иметь возможности многопоточного программирования, позволяя ядру видеоплеера разделять такие задачи, как демультиплексирование, декодирование, рендеринг и мониторинг операций пользовательского интерфейса, на разные потоки, а также обрабатывать ресурсоемкие задачи и отображение интерфейса параллельно. Связь между воркерами осуществляется через MessageChannel. IE10+ и другие современные браузеры поддерживают его.

WebAssembly

Это технология байт-кода на веб-стороне. Она определяет общий, компактный и быстро загружаемый двоичный формат в качестве цели компиляции, которая может полностью использовать производительность оборудования общего назначения и работать со скоростью, близкой к родным приложениям. . Программное декодирование H.265-кодированного видео в браузере — очень сложная задача по производительности, и языки сценариев, такие как JavaScript, для этой задачи не годятся. Таким образом, высокопроизводительная библиотека декодирования, написанная на языке C/C++, может быть скомпилирована в байт-код, а затем запущена через вызов JavaScript. В настоящее время эта технология доступна в более новых версиях браузеров Chrome, Firefox, Safari и Edge (например, Chrome57+, Firefox 52+).

H.265 Vs H.264

Для более подробных различий между H.265 и H.264 вы можете посетитьПодробное объяснение различий между H.265 и H.264.

Архитектура кодирования H.265/HEVC примерно аналогична архитектуре H.264/AVC, в основном, включая: внутреннее предсказание, межкадровое предсказание, преобразование, квантование, такие модули, как деблокирующий фильтр и энтропийное кодирование.

在这里插入图片描述

В архитектуре кодирования HEVC все делится на три основные единицы, а именно единицу кодирования (CU), единицу предсказания (PU) и единицу преобразования (TU). По сравнению с H.264/AVC, H.265/HEVC предоставляет больше различных инструментов для снижения скорости передачи данных.Что касается единиц кодирования, размер каждого макроблока (МБ) в H.264 фиксируется на уровне 16x16 пикселей, в то время как кодирование единицу H.265 можно выбрать от наименьшего 8x8 до самого большого 64x64.

В то же время режим внутреннего предсказания H.265 поддерживает 33 направления (H.264 поддерживает только 8) и обеспечивает улучшенную обработку компенсации движения и методы векторного предсказания. Неоднократные сравнительные тесты качества показали, что при одинаковом качестве изображения размер видео, закодированного в H.265, будет уменьшен примерно на 39-44% по сравнению с H.264. Из-за различных методов измерения, используемых для контроля качества, эти данные также будут соответственно различаться.

Ситуация поддержки

ios

В настоящее время, согласно информации на официальном сайте Apple, поддержку HEVC можно объяснить следующим предложением: В iOS 11 и macOS High Sierra появилась поддержка этих новых стандартных форматов мультимедиа. То есть поддерживаются следующие устройства.

  • iPhone 7 or iPhone 7 Plus or later
  • iPad (6th generation)
  • iPad Pro (10.5 inch)
  • iPad Pro 12.9-inch (2nd generation)

Android

在这里插入图片描述

браузер

В настоящее время браузеры не очень дружат с поддержкой H.265:

在这里插入图片描述

реальный бой

В настоящее время популярность HEVC не так высока, но мы все еще можем попытаться изящно воспроизвести видео H265 в Интернете.

Определить, поддерживать ли воспроизведение

О том, поддерживает ли платформа видео в формате H.265, можно судить по значению mimetype H265: type="video/mp4; codecs=hevc". Например:

var supportHEVC = function(video) {  
    if (typeof video.canPlayType == ‘ function’) {
        var playable = elem.canPlayType('video/mp4; codecs="hevc"');
        if ((playable.toLowerCase() == 'maybe') || (playable.toLowerCase() == 'probably')) {
            return true;
        }
    }
    return false;
};

Если видео не может быть воспроизведено с использованием H.265, оно будет воспроизводиться с использованием H.264, поэтому мы можем установить несколько форматов через источник:

<video controls autoplay>  
    <source src="your_video.mp4" type="video/mp4; codecs=hevc">
    <source src="your_video.webm" type="video/webm; codecs=vp9">
    <source src="your_video.mp4" type="video/mp4; codecs=avc1">
</video>  

Для веб-платформы мы используем libde265.js — библиотеку для декодирования видео H.265 через JS, которая преобразует данные кадра видео в пиксели rgba, а затем рисует их на Canvas. Вот пример использования:

<canvas id="canvas"></canvas>

<script src="./libde265.min.j"></script>  
<script>  
var VIDEO_URL = 'h265-test-640.mp4'  
var video = document.getElementById('canvas')  
 // var fpsWrap = document.querySelector('.hevc-fps')
  var status = document.querySelector('.hevc-status')
  var playback = function (event) {
    // event.preventDefault()
    if (player) {
      player.stop()
    }

    player = new libde265.RawPlayer(video)
    player.set_status_callback(function (msg, fps) {
      player.disable_filters(true)
      console.log(msg);
      switch (msg) {
        case 'loading':
          status.innerHTML = 'Loading movie...'
          break
        case 'initializing':
          status.innerHTML = 'Initializing...'
          break
        case 'playing':
          status.innerHTML = 'Playing...'
          break
        case 'stopped':
          status.innerHTML = 'stopped'
          break
        case 'fps':
          // fpsWrap.innerHTML = Number(fps).toFixed(2) + ' fps'
          break
        default:
          status.innerHTML = msg
      }
    })
    player.playback(VIDEO_URL)
  }
  playback()
</script>  

Адрес теста:events.Jack PU.com/ также 265.

在这里插入图片描述
Можно обнаружить, что разрыв между рисованием на холсте и собственным декодированием видео по-прежнему очень велик, но мы видим, что размер видео был уменьшен на 31% по сравнению с оригиналом, поэтому перспективу H265 стоит с нетерпением ждать.

Ссылаться на:H.265 / HEVC WiKi H.265 Vs H.264