如何在Opentok Videochat 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

这是我项目的代码框：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);

繁荣，您正在用动态加载Firebase的视频发表到Opentok视频聊天API。

P.S非常重要当试图从Google Firestore捕获URL时，您会遇到CORS问题。为了解决这个问题，我首先遵循了Google Firebase指南，介绍了如何为我从中绘制的特定存储桶设置CORS规则，然后在HTML中设置了视频的Crossorigin值。

Google文档中的CORS配置要直接在浏览器中下载数据，您必须配置云存储存储桶以进行交叉访问(CORS(。这可以使用GSUTIL命令行工具来完成，您可以从此处安装。

如果您不需要任何基于域的限制(最常见的情况(，请将此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进行视频聊天