3

I am trying to stream video attachment from CouchDB using nano middleware in NodeJS. Video is received on the browser. I do not know how I should stream it on client and how to display it in HTML Tag.

Here is my NodeJS code to read attachment from CouchDB which I found from here:

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

On the client side my ajax call looks like this :

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

In HTML Video tag is like this :

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

I am not sure if Blob is the right way to stream video to Video tag. How should I append the streams to the video tag?

Edit :

You are right brianchirls. It works! I have set the video URL. But what I get in the video tag is this :

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

But when I click on play it does not play the video. But when I click on the link from the inspect element it plays the video in new browser window.

This solution is almost there.

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
Bhoomi
  • 781
  • 6
  • 22
  • 2
    Have you tried skipping the ajax bit and just setting the src on the video to that same url? You can let the browser manage the request. – brianchirls Jun 18 '14 at 13:38
  • Since it has been a few years, what has been your experience streaming directly from CouchDB in terms of stability and performance? – tobiak777 May 29 '22 at 18:57

2 Answers2

1

@brianchirls answer has helped.

By changing the src attribute of video tag rather than source tag started the video streaming.

Thanks!

Bhoomi
  • 781
  • 6
  • 22
1

@Bhoomi, I know it was a long time ago, but how did you go streaming directly from CouchDB in terms of stability and performance?

Smyrnian
  • 701
  • 9
  • 15