如何在 OpenTok 视频聊天 API 上发布从 Google Firestore 动态加载的视频？

Question

OpenTok 有一个从文件发布视频的演示。我想发布一个基于他们的基本演示从 Firebase 动态加载的视频，但发布者没有显示我从 firestore 中提取的视频，我相信这与我调用发布函数和异步时有关。

我想也许我应该在获得我正在寻找的 firestore 视频的 URL 后加载发布者，所以在获取 URL 的回调中，我将代码放在用于发布视频的演示。我以为这是解决方案，但是当加载的视频最终播放时，发布者没有播放视频流。

这是我参考的OpenTok演示

演示： https://opentok.github.io/opentok-web-samples/Publish-Video/ 基于这个回购协议： https://github.com/opentok/opentok-web-samples/tree/master/Publish-Video

这是我的项目的codesandbox： 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)从视频的 Firestore 收到 URL 后，将视频元素的 src 设置为新的 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，您正在使用从 Firebase 动态加载的视频正式发布到 OpenTok 视频聊天 API。

P.s 非常重要尝试从 Google Firestore 捕获 URL 的流时，您运行遇到了 CORS 问题。为了处理这个问题，我首先遵循 Google Firebase 的指南，了解如何为我从中提取的特定存储桶设置 CORS 规则，然后我在 HTML.

来自 google documentation 的 CORS 配置要直接在浏览器中下载数据，您必须将 Cloud Storage 存储桶配置为 cross-origin 访问 (CORS)。这可以使用 gsutil 命令行工具完成，您可以 install from here.

如果您不想要任何 domain-based 限制（最常见的情况），请将此 JSON 复制到名为 cors.json:

的文件中

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

运行 gsutil cors set cors.json gs://your-cloud-storage-bucket部署这些限制。

然后，在 HTML 文件的视频标签中，我添加了 crossorigin 属性

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

      </video>

第二次繁荣！您现在已经处理了您的 Firebase 帐户的 CORS 限制，并且可以通过与 OpenTok 和 Google Firestore

的视频聊天动态发布视频

如何在 OpenTok 视频聊天 API 上发布从 Google Firestore 动态加载的视频？

How do I publish a video on the OpenTok videochat API that is dynamically loaded from Google Firestore?

javascript

firebase

opentok