3

我正在尝试使用 NodeJS 中的 nano 中间件从 CouchDB 流式传输视频附件。在浏览器上接收视频。我不知道我应该如何在客户端上流式传输它以及如何在 HTML 标记中显示它。

这是我从这里找到的从 CouchDB 读取附件的 NodeJS 代码：

if (req.headers.range) {
    var stream = db.attachment.get(docid, docname, {Range: req.headers.range});
    stream.on('response', function(response) {
        var start = req.headers.range.replace(/bytes=/, "").split("-")[0];
        var end = response.headers['content-length'];
        res.writeHead(206, {
            'ETag': response.headers.etag,
            'Content-Range': 'bytes ' + start + "-" + (end - 1) + '/' + end,
            'Accept-Ranges': 'bytes',
            'Content-Length': end - start,
            'Content-Type': response.headers['content-type']
        });
    });
} else {
    stream = db.attachment.get(docid, docname);
}
stream.pipe(res);
stream.on('end', function() {
    res.end();
});

在客户端，我的 ajax 调用如下所示：

jQuery.ajax({
        url: '/getvideoattachment/?id=' + this.id + "&name=" + videoname,
        contentType: 'video/webm',
        type: 'GET',
        headers : { "Range" : 'bytes=0-3200' },
        processData : false,
        success: function(content) {
            var oMyBlob = new Blob([content], { "type" : "video\/webm" });
            var docURL = window.URL.createObjectURL(oMyBlob);
            var elVideo = document.getElementById("videoid" );
            elVideo.addEventListener("load", function (evt) { window.URL.revokeObjectURL(docURL); });
            elVideo.setAttribute("src", docURL);
        },
        error : function(content)
        {
            Em.Logger.info('Model:', this.id, 'has no image', err);
            return '';
        }
    });

在 HTML Video 标签中是这样的：

<video controls id="videoid" >
                    <source src="" type="video/webm" />
                </video>

我不确定 Blob 是否是将视频流式传输到 Video 标签的正确方法。我应该如何将流附加到视频标签？

编辑 ：

你是对的brinchirls。有用！我已经设置了视频网址。但是我在视频标签中得到的是：

<video controls="" id="videoa" class="visible" data-bindattr-7="7">
                    <source src="/getvideoattachment/?id=a26de29ded4e33ad47205187f4000f46&amp;name=c.webm" data-bindattr-8="8" type="video/webm">
                </video>

但是当我点击播放时，它不会播放视频。但是，当我单击检查元素中的链接时，它会在新的浏览器窗口中播放视频。

这个解决方案几乎就在那里。

4

2 回答 2

1

@brianchirls 的回答有帮助。

通过改变 video 标签而不是 source 标签的 src 属性来启动视频流。

谢谢！

于 2014-06-24T06:05:49.530 回答
0

@Bhoomi，我知道那是很久以前的事了，但是就稳定性和性能而言，您是如何直接从 CouchDB 进行流式传输的？

于 2020-02-28T10:25:35.690 回答