Safari和Mobile Chrome中的视频流问题

Question

我在Safari中为iPad和Android设备上的Google Chrome浏览器流式传输视频时遇到问题。该应用程序在使用Microsoft Edge Chromium浏览器的笔记本电脑上运行良好。我一直在寻找解决问题的例子，但是我找不到与此相关的任何东西。问题是客户端将发送获取请求以检索视频文件。我使用gridfs-stream从MongoDb数据库中检索该文件，然后将其通过管道传输到响应对象。这使用户可以在video-js player]中查看视频流。在使用Microsoft Edge Chromium浏览器的笔记本电脑和台式机设备上，此方法没有问题，但在Safari和Mobile Chrome浏览器中却无法通过。这是我的代码：

我响应请求并从数据库中检索文件，然后将其通过管道传递到节点中的响应对象：

app.get('/get-video', (req, res, next) => {
    let video = req.query.video;
    gfs.files.findOne({ filename: video }, (err, file) => {
        // Check if file ex
        if (!file || file.length === 0) {
          return res.status(404).json({
            err: 'No file exists'
          });
        }
        else {
            let readstream = gfs.createReadStream(file.filename);
            readstream.pipe(res);
        }
   });
});
您可以说，我在get请求中根据视频名称找到文件，创建一个ReadStream，并将该文件流式传输到响应对象。这是从客户端发出get请求的html代码。播放器正在使用video-js库，但是我在创建流时找不到任何兼容性问题，并且在Edge / Chromium浏览器中确实可以使用：

<video class="video-js vjs-big-play-centered vjs-16-9 card-img-top" autopreload="false" data-setup='{"autoplay": false, "controls": true}'>
    <source src="/get-video?video=<%= post.source %>">
</video>
我正在将视频源作为从get请求发送的响应，即视频流。在Safari浏览器中，我收到错误消息：由于损坏问题或媒体使用的浏览器不支持的功能，媒体播放被中止

通过get请求发送图像时，在任何浏览器中我都没有这个问题。当我简单地请求静态文件时，我也没有任何问题。当我尝试发送视频流时，此问题似乎包含在特定的浏览器中。

之所以使用流而不是静态文件是因为我将应用程序托管在云中。我必须从MongoDb数据库发送原始文件（或者至少是我的理解）。在将应用程序发送到云之前对其进行测试时，不会发生此问题，因为我可以简单地利用文件系统并将文件路径存储为视频源。但是，文件系统在Heroku应用程序中并不持久，因此在这种情况下我正在使用云数据库。现在，我需要从数据库中流式传输问题。

我在Safari中为iPad和Android设备上的Google Chrome浏览器流式传输视频时遇到问题。该应用程序在使用Microsoft Edge Chromium的笔记本电脑上运行正常...

Answer 1

使用自定义iframe概念