Использование видеопетлей с интерактивным холстом

Видео может быть очень эффективным способом использования высокопроизводительных визуальных эффектов в вашей игре Интерактивный холст для Google Assistant. В предыдущем посте мы обсуждали использование циклов видео в веб-приложении Interactive Canvas.

В этом посте обсуждаются необходимые шаги для подготовки видеофайлов и написания логики JavaScript для воспроизведения бесшовных циклов видео в веб-приложении Interactive Canvas.

Расширения источников мультимедиа

Для создания бесшовных циклов видео требуется использование Media Source Extensions (MSE), которое представляет собой функцию браузера, которая расширяет элемент мультимедиа HTML, чтобы позволить JavaScript генерировать потоки мультимедиа для воспроизведения.

Вы должны написать код JavaScript для загрузки и буферизации видеоданных, которые затем передаются непосредственно в буфер HTML-тегов видео с помощью MSE. Поскольку MSE - это низкоуровневый API, необходимо уточнить множество деталей, но в этом посте будут рассмотрены все необходимые шаги.

Подготовьте видео

Во-первых, вам нужно преобразовать видео во фрагментированный формат файла MP4 для потоковой передачи. Обычный файл MP4 состоит из заголовка и мультимедийных данных. Заголовок находится в конце файла. Для потоковой передачи заголовок необходимо переместить в начало файла.

Для подготовки видео вам понадобятся следующие инструменты:

• FFmpeg
• MP4Box

Используйте FFmpeg, чтобы преобразовать файл в правильный кодек:

ffmpeg -i video.mp4 -an -codec:v libx264 -profile:v baseline 
   -level 3 -b:v 2000k videocodec.mp4

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

MP4Box -dash 1000 -rap -frag-rap videocodec.mp4

Новый файл MP4 создается с постфиксом «_dashinit» в имени файла. Загрузите этот файл на свой веб-сервер.

Воспроизвести видео

Теперь, когда видеофайл имеет правильный формат, вы воспользуетесь MSE для загрузки и воспроизведения файла с медиа-элементом HTML.

Сначала определите элемент HTML-видео в своем веб-приложении:

<video id='vid' />

Получите ссылку на элемент видео в JavaScript:

let video = document.getElementById('vid');

Создайте объект MediaSource и создайте виртуальный URL-адрес, используя URL.createObjectURL с объектом MediaSource в качестве источника. Затем назначьте виртуальный URL-адрес свойству медиа-элемента src:

let mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);

Подождите, пока событие MediaSource sourceopen сообщит вам, что объект источника мультимедиа готов для добавления буфера. Создайте SourceBuffer с помощью метода MediaSource addSourceBuffer () с mime-типом видео, а затем начните загрузку файла:

let sourceBuffer;
mediaSource.addEventListener('sourceopen', function(){ 
   sourceBuffer = mediaSource.addSourceBuffer(
       'video/mp4; codecs="avc1.42c01e"');
   fileDownload('videocodec_dashinit.mp4');              
});

Используйте XMLHttpRequest, чтобы загрузить файл как ArrayBuffer:

function fileDownload(url) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'arraybuffer';
  xhr.send();
  xhr.onload = function(e) {
    if (xhr.status != 200) {
      onLoad();
      return;
    }
    onLoad(xhr.response);
  };
  xhr.onerror = function(e) {
    video.src = null;
  };
};

Добавьте данные файла в SourceBuffer с помощью appendBuffer ():

let allSegments;
function onLoad(arrayBuffer) {
  if (!arrayBuffer) {
    video.src = null;
    return;
  }
  allSegments = new Uint8Array(arrayBuffer);
  sourceBuffer.appendBuffer(allSegments);
  processNextSegment();
}

Вызовите метод play () для элемента видео и добавьте сегменты видео в исходный буфер, когда в конвейере воспроизведения осталось менее 10 секунд:

function processNextSegment() {
  // Wait for the source buffer to be updated
  if (!sourceBuffer.updating &&   
       sourceBuffer.buffered.length > 0) {
    // Only push a new fragment if we are not updating and we have
    // less than 10 seconds in the pipeline
    if (sourceBuffer.buffered.end( 
          sourceBuffer.buffered.length - 1) -  
          video.currentTime < 10) {
      // Append the video segments and adjust the timestamp offset 
      // forward
      sourceBuffer.timestampOffset =  
          sourceBuffer.buffered.end(
              sourceBuffer.buffered.length - 1);
      sourceBuffer.appendBuffer(allSegments);
    }
    // Start playing the video
    if (video.paused) {
      video.play();
    }
  }
  setTimeout(processNextSegment, 1000);
};

Видео будет повторяться бесконечно, и между каждым циклом не будет задержек.

Следующие шаги

Даже если вы не понимаете всех технических деталей использования MSE, просто скопируйте и вставьте приведенный выше код в файл HTML и сначала попробуйте его в браузере. Как только это будет работать должным образом, добавьте необходимый JavaScript для интерактивного веб-приложения Canvas и разверните его как действие.

Этот метод также можно использовать для создания плавных переходов между разными видео, но для этого требуется управление буфером для каждого видео.

Это все, что вам нужно для отображения высокопроизводительных визуальных элементов в вашей игре с интерактивным холстом. Повеселись!

Чтобы поделиться своими мыслями или вопросами, присоединяйтесь к нам на Reddit по адресу / r / GoogleAssistantDev. Подпишитесь на @ActionsOnGoogle в Твиттере, чтобы получать больше новостей нашей команды, и пишите в Твиттере, используя #AoGDevs, чтобы поделиться тем, над чем вы работаете.