Как опубликовать видео об API видеочата OpenTok, которое динамически загружается из Google Firestore?

Question

OpenTok имеет демонстрационную версию, которая публикует видео из файла. Я хочу опубликовать видео, которое динамически загружается из Firebase на основе их основной демонстрации, но издатель не отображает видео, которое я извлекаю из firestore, и считаю, что это связано с тем, когда я вызываю функцию публикации и async.

Я подумал, что, возможно, мне следует загрузить издателя, как только я получу URL-адрес искомого видео о пожарном депо, поэтому в обратном вызове для получения URL-адреса я поместил код, который использовался в демонстрационной версии для публикации видео. Я думал, что это было решением, но когда наконец загруженное видео воспроизводится, издатель не воспроизводит видеопоток.

Вот демонстрационная версия OpenTok, на которую я ссылаюсь

Демо-версия: https://opentok.github.io/opentok-web-samples/Publish-Video/ На основании этого репо: https://github.com/opentok/opentok-web-samples/tree/master/Publish-Video

Вот коды и коробка моего проекта: https://codepen.io/gene-yllanes/pen/MdoVYM

Вот код js, который обрабатывает видео:

storageRef.child(vid).getDownloadURL().then(function (url) {
  const video =  document.getElementById("video");
  video.src = url;
  // console.log(video)

  //Once I get the video I want, then I seek to publish it.
  //this is the code lifted directly from original demo
  //There has to be an easy way to do this, I hope you guys see so too

  (function closure() {
    const video = document.querySelector('#video');
    if (!video.captureStream) {
      alert('This browser does not support VideoElement.captureStream(). You must use Google Chrome.');
      return;
  }
  const stream = video.captureStream();
  console.log(stream)
  let publisher;
  const publish = () => {
    console.log("in publish")

    const videoTracks = stream.getVideoTracks();
    const audioTracks = stream.getAudioTracks();
    if (!publisher && videoTracks.length > 0 && audioTracks.length > 0) {
      console.log("!publisher && videoTracks.length > 0 && audioTracks.length > 0")
      stream.removeEventListener('addtrack', publish);
      publisher = OT.initPublisher('publisher', {
        videoSource: videoTracks[0],
        audioSource: audioTracks[0],
        fitMode: 'contain',
        width: 320,
        height: 240
      }, (err) => {
        if (err) {
          console.log("error")
          video.pause();
          alert(err.message);
        } else {
          console.log("vid plauy")
          video.play();
        }
      });
      publisher.on('destroyed', () => {
        video.pause();
      });
    }
  }
  stream.addEventListener('addtrack', publish);
  publish()

})()

Прямо сейчас, публикация запускается дважды, и я не знаю почему. Кроме того, издатель не продвигает поток, который он явно говорит, что имеет. Надеюсь, сообщество может легко разобраться в этом для меня.

Заранее спасибо! Гена

P.s Эта демонстрация ограничена только Chrome прямо сейчас

Answer 1

Ответ оказался очень простым при динамической публикации видео

1) Получив URL-адрес из Firestore видео, установите для элемента src video новый URL

const video =  document.getElementById("video");

// Get the download URL and switch vids
storageRef.child(vid).getDownloadURL().then(function (url) {
  video.src = url;
  // console.log("downloaded and updated")
  // console.log("video")
}).catch(function (error) { <stuff>}

2) Поместите прослушиватель событий в элемент видео, чтобы затем можно было запустить функцию публикации после загрузки нового видео.

video.addEventListener('loadeddata', function() {
  //Create Stream object and change it if in mozilla
  const stream = video.mozCaptureStream ? video.mozCaptureStream() : video.captureStream();
  //console.log(stream)
  let publisher;

//publisher function is called when stream has tracks added to it
  const publish = () => {
    const videoTracks = stream.getVideoTracks();
    const audioTracks = stream.getAudioTracks();
    if (!publisher && videoTracks.length > 0 && audioTracks.length > 0) {
      stream.removeEventListener('addtrack', publish);
      publisher = OT.initPublisher('publisher', {
        videoSource: videoTracks[0],
        audioSource: audioTracks[0],
        fitMode: 'contain',
        width: 320,
        height: 240
      }, (err) => {
        if (err) {
          video.pause();
          alert(err.message);
        } else {
          video.play();
        }
      });
      publisher.on('destroyed', () => {
        video.pause();
      });
    }
  };

  stream.addEventListener('addtrack', publish);
  publish();

}, false);

Boom, вы официально публикуете API-интерфейс видеочата OpenTok с помощьювидео динамически загружается из Firebase.

Ps ОЧЕНЬ ВАЖНО При попытке перехватить поток URL-адреса из Google Firestore у вас возникают проблемы с CORS.Чтобы справиться с этой проблемой, я сначала следовал руководству Google Firebase о том, как установить правило CORS для конкретного сегмента, из которого я рисовал, а затем я установил значение перекрестного определения моего видео в HTML.

Конфигурация CORS из Документация google Чтобы загружать данные непосредственно в браузере, необходимо настроить хранилище облачного хранилища для перекрестного доступа (CORS).Это можно сделать с помощью инструмента командной строки gsutil, который вы можете установить отсюда .

Если вы не хотите каких-либо доменных ограничений (самый распространенный сценарий), скопируйте этоJSON в файл с именем cors.json:

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Запустите gsutil cors set cors.json gs://your-cloud-storage-bucket для развертывания этих ограничений.

Затем в теге video в файле HTML я добавил свойство crossorigin

<video id="video" 
        src="video/BigBuckBunny_320x180.mp4" 
        crossorigin="Anonymous"
        width="320" height="240" 
        controls 
        autoplay
        loop
        muted
        >

      </video>

Второй БУМ!теперь вы справились с ограничениями CORS для своей учетной записи Firebase и можете динамически публиковать видео через видеочат с помощью OpenTok и Google Firestore