2

您好，我一直在尝试通过 socket.io 套接字将 webm 视频直接流式传输到 html5 视频标签。客户端和服务器代码如下：

服务器：

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

当我尝试运行此代码时，似乎流的第一块附加到了 sourceBuffer，我可以看到我试图播放的视频文件的第一帧（标题和 url），但就是这样。似乎只有第一次调用 appendBuffer 有效。我在某处读到了一些关于播放视频所需的初始化段的内容，但我也看到了一个不使用此初始化段的工作示例，所以我有点困惑。（链接到示例）谁能澄清我是否真的需要这个初始段？如果我这样做，我怎样才能检索这个段的字节范围？或者如果我不需要这个段，我的代码有什么问题？谢谢你。

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

4

0 回答 0