Stream video through socket to html5 video tag

问题

Hello i`ve been trying to stream a webm video through a socket.io socket directly to the html5 video tag. The client and server code follows below:

Server:

(function() {
    var Alert, Channel, Receiver, Takeover, express, pathLib;

    pathLib = require("path");
    fs = require("fs");
    express = require("express");

    module.exports = function(app, sockets) {
        router = express.Router();

        router.get("/clearAlerts", function(req, res) {
            console.log("reached!");
            return sockets.emit("alert-deleted");
        });

        router.get("/castVideo", function(req, res) {
            //move this to a better place
            console.log("reachedCastVideoss");
            var readStream = fs.createReadStream(pathLib.join(__dirname + "/../../../public/elephants-dream.webm"));
            readStream.addListener('data', function(data) {
                console.log("cast-video emitted");
                sockets.emit('cast-video', data);
            });
        });

        return app.use('/custom/', router);
    };

}).call(this);

Client:

 var socket = io.connect('http://localhost:4994');


window.URL = window.URL || window.webkitURL;
window.MediaSource = window.MediaSource || window.WebKitMediaSource;

var mediaSource = new MediaSource();
var video = document.getElementById("video");
var queue = [];
var sourceBuffer;
var firstChunk = true;

video.src = window.URL.createObjectURL(mediaSource);

streamIt = function(e) {
    video.pause();
    mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    mediaSource.sourceBuffers[0].addEventListener('updateend', onBufferUpdated);

    socket.on("cast-video", function(data) {
        console.log("appending to buffer");
        var uIntArray = new Uint8Array(data);

        if (firstChunk) {
            mediaSource.sourceBuffers[0].appendBuffer(uIntArray);
            firstChunk = false;
        }

        queue.push(uIntArray);
        if (queue.length === 33) {
            //mediaSource.endOfStream();
        }
    });

    var onBufferUpdated = function() {
        if (queue.length) {
            mediaSource.sourceBuffers[0].appendBuffer(queue.shift());
        }
    };
};


mediaSource.addEventListener('sourceopen', streamIt);
mediaSource.addEventListener('webkitsourceopen', streamIt);

When I try to run this code, It seems that the first chunk of the stream is appended to the sourceBuffer, I can see the first frame(title and an url) of the video file im trying to play, but thats it. It seems that only the first call appendBuffer works. I read somewhere something about a required initialization segment for the video to play, but I also saw an working example that does not use this initialization segment, so im a little confuse.(link to the example) Can anyone clarify if I really need this initial segment? If I do, how can I retrieve the byte range of this segment? Or if I dont need this segment, what is wrong in my code? Thank you.

Trying a little bit more today,Ive found that if I use the same file from http://html5-demos.appspot.com/static/media-source.html, this code actually works. When I try with the files from http://www.webmfiles.org/demo-files, the code does not works. I have no idea why.

来源：https://stackoverflow.com/questions/27309027/stream-video-through-socket-to-html5-video-tag

标签

html5

node.js

Socket.IO

media-source