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

Question

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

我想，一旦我得到我正在寻找的firestore视频的URL，也许我就应该加载publisher，所以在获取URL的回调中，我放入了demo用来发布视频的代码。我认为这就是解决方案，但当加载的视频最终播放时，发布者不会播放视频流。

下面是我引用的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()

})()

现在，publish被触发了两次，我不知道为什么。此外，发布者没有推送它明确声明的流。希望社区可以很容易地为我解决这个问题。

提前感谢！基因

附注:此演示目前仅限于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元素上放置一个事件监听器，以便加载新视频后即可触发发布功能。

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);

当你正式发布到OpenTok视频聊天应用程序接口的时候，你会看到一个从Firebase动态加载的视频。

附注:非常重要的是，当你尝试从谷歌Firestore captureStream的网址，你遇到了CORS的问题。为了解决这个问题，我首先遵循了Google Firebase关于如何为我正在绘制的特定存储桶设置CORS规则的指南，然后在HTML中设置了我的视频的Crossorigin值。

google documentation中的CORS配置要在浏览器中直接下载数据，您必须将您的云存储存储桶配置为跨域访问(CORS)。这可以使用gsutil命令行工具来完成，您可以对其执行install from here。

如果您不想要任何基于域的限制(最常见的场景)，请将此JSON复制到名为cors.json的文件中：

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

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

然后，在HTML文件的video标记中，我添加了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通过视频聊天动态发布视频