javascript - NodeJS + Websockets + HTML5 视频标签和 'streaming'

标签 javascript html node.js websocket streaming

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

视频播放正常,但总是等到下载完整个视频后再播放,导致延迟较大。设置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);

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

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

如果我在 VLC 中直接从 HDD 播放分块视频 0.webm,它可以正常播放。如果我从浏览器中下载流并在 VLC 中播放,它只会播放前 3 秒。 This article描述了我想要做什么,但通过 HTTP。有人对 websockets 有任何建议吗?

最佳答案

删除 input.pipe(chunker); 解决了这个问题。虽然我不太确定这样做的原因,所以会调查原因。

关于javascript - NodeJS + Websockets + HTML5 视频标签和 'streaming',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25082272/

相关文章:

javascript - 类型错误 : Cannot read property 'then' of undefined Dialogflow Promise

javascript - 当我循环测试用例时,为什么 Mocha 会跳过重新分配变量?

html - CSS 背景图像淡化为白色

css - 在隐藏的单选框/复选框上显示 HTML5 错误消息/验证

javascript - 如何复制表格的特定部分?

node.js - 在 Amazon ec2 上对 Node.js 使用 nohup

javascript - 当我们将服务放在不同的 js 文件中时出错

javascript - 从勇者斗恶龙中绘制史莱姆

javascript - Object.create 与 new

javascript - 在多维 javascript 数组中查找唯一的条目,顺序重要取决于级别