I'm trying to stream a large video file to the browser in a <video> tag using websockets.
The video plays fine, but it always waits until it's downloaded the entire video before playing, resulting in a large delay. Setting autoplay = true and preload="none" seems to have no effect on this. So I've looked into chunking the video out and then sending it to the browser as a blob URL. For the chunking I'm using Node-Chunking-Streams
My code so far:
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);
My plan is to make the chunks small enough to load quickly - say ~2MB - and then send the next one when the clients ready. My issue is though that the first chunk (0) only plays for 3 seconds or so, before skipping straight to the end and stopping. This happens in Chrome and FF.
Increasing the chunk size until it encompasses the whole video still only results in the first 3 seconds playing.
If I play the chunked video 0.webm directly from the HDD in VLC, it plays fine. If I download the stream from within the browser and play it in VLC, it only plays the first 3 seconds. This article describes what I'm looking to do, but over HTTP. Anyone have any pointers for websockets?
removing input.pipe(chunker); solved this. I'm not quite sure the reason for this though, so will investigate as to why.