通过套接字streamvideo到html5video标签

您好,我一直在试图stream通过一个socket.io套接字的webmvideo直接到html5video标签。 客户端和服务器代码如下所示:

服务器:

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

客户:

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

当我尝试运行此代码时,似乎stream的第一个块被附加到sourceBuffer,我可以看到video文件的第一帧(标题和URL)试图播放,但多数民众赞成在它。 似乎只有第一个调用appendBuffer的作品。 我读了一些关于video播放需要的初始化段的东西,但是我也看到了一个不使用这个初始化段的工作示例,所以我有点困惑。( 链接到示例 )任何人都可以澄清,如果我真的需要这个初始段? 如果我这样做,我怎样才能检索这个段的字节范围? 或者如果我不需要这个细分市场,我的代码有什么问题? 谢谢。

我今天试了一点,我发现,如果我使用http://html5-demos.appspot.com/static/media-source.html的相同的文件,这段代码实际上工作。 当我尝试使用http://www.webmfiles.org/demo-files中的文件时,代码不起作用。 我不知道为什么。