Question

您好我一直试图通过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，我可以看到我试图播放的视频文件的第一帧（标题和网址），但就是这样。似乎只有第一个调用appendBuffer才有效。我在某处阅读了一些关于视频播放所需的初始化段的内容，但我也看到了一个不使用此初始化段的工作示例，所以我有点混淆。（link to the example）任何人都可以澄清我是否真的需要这个初始细分？如果我这样做，我该如何检索该段的字节范围？或者，如果我不需要这段，我的代码有什么问题？谢谢。

今天尝试了一下，我发现如果我使用http://html5-demos.appspot.com/static/media-source.html中的相同文件，这段代码实际上是有效的。当我尝试使用来自的文件时 http://www.webmfiles.org/demo-files，代码不起作用。我不明白为什么。

通过套接字将视频流式传输到html5视频标签

0 个答案: