NodeJS + Websockets + HTML5视频标签和'流媒体'

时间:2014-08-01 14:16:42

标签: javascript html5 node.js websocket streaming

我正在尝试使用websockets将大型视频文件流式传输到<video>标记中的浏览器。

视频播放效果很好,但在播放之前它一直等到整个视频下载,导致延迟很长。设置autoplay = truepreload="none"似乎对此没有影响。所以我考虑将视频分块,然后将其作为blob URL发送到浏览器。对于我正在使用Node-Chunking-Streams

的分块

到目前为止我的代码:

var chunkingStreams = require('chunking-streams');
            var SizeChunker = chunkingStreams.Chunker;

            var input = fs.createReadStream('src-videos/redcliff450.webm'),
                chunker = new SizeChunker({                       
                    chunkSize: 2000000                         
                }),
                output;

            chunker.on('chunkStart', function(id, done) {
                output = fs.createWriteStream('src-videos/output/' + id + '.webm');
                done();
            });

            chunker.on('chunkEnd', function(id, done) { 
                output.end();
                done();
            });

            chunker.on('data', function(chunk) {
                output.write(chunk.data);
            });               


            input.pipe(chunker);

            //test out the video using just the first chunk
            var smallChunk = fs.createReadStream('src-videos/output/0.webm');              
            client.send(smallChunk);

我的计划是让块足够小以便快速加载 - 比如说~2MB - 然后在客户准备就绪时发送下一块。我的问题是,第一个块(0)只播放3秒左右,然后直接跳到最后并停止。这发生在Chrome和FF中。

增加块大小直到它包含整个视频仍然只会导致前3秒播放。

如果我直接从VLC中的HDD播放分块视频0.webm,它可以正常播放。如果我从浏览器中下载流并在VLC中播放它,它只播放前3秒。 This article描述了我要做的事情,但是通过HTTP。任何人都有任何指向websockets的指针?

1 个答案:

答案 0 :(得分:0)

删除input.pipe(chunker);解决了这个问题。我不太确定这个的原因,所以将调查为什么。