Javascript “实时视频”；“缓冲”；到html5视频

我正在使用服务器-客户机模式开发一个广播软件

视频+音频数据使用和API在广播公司的浏览器中捕获。使用setInterval每隔约200ms对数据进行分块，并通过WebSocket发送到服务器

然后，服务器将把接收到的blob广播给接收方客户机列表

接收器有一个

元素，该元素的源被设置为一个对象，该对象有一个

sourceBuffer

元素，并且每当客户端从WebSocket服务器接收数据时，都会向其追加数据

问题是，视频实际上并没有播放，它处于恒定缓冲状态，只显示它接收到的第一帧。但是，我可以通过将视频源重置为为每个blob创建的url，然后调用

video.play（）

，播放接收到的每个区块（音频和视频），这样服务器接收和广播的数据就完好无损了。（请注意，这种“缓冲”方法有一个非常不愉快的副作用：每次调用

play（）

时，视频元素都会闪烁白色）

这是接收器的代码

var ms;
var sourceBuffer
var video;
var serverAddress = 'ws://localhost:8000';
var socket;

$(document).ready (function(){
    video = document.getElementById('rendered_video');
    ms = new MediaSource();

    video.src = window.URL.createObjectURL(ms);
    video.play();

    ms.addEventListener ('sourceopen', function(e) {
        sourceBuffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    }, false);

    socket = new WebSocket (serverAddress);
    socket.onopen = function () {
        socket.send ('receiver');
    };

    socket.onmessage = function (event) {
        var fileReader = new FileReader();
        fileReader.onload = function(e) {
            sourceBuffer.appendBuffer(e.target.result);
        };
    // Convert blob to ArrayBuffer
    fileReader.readAsArrayBuffer(event.data);
    }
});

我知道我使用的API是相当新的，它们与许多浏览器不兼容，但我现在只想创建一个小的演示

---

编辑：我意识到广播公司那边有些不对劲。我通过

MediaRecorder

记录数据的方法是在流媒体开始时调用

start（）

，然后每隔200ms调用

stop（）

一次，然后再次调用

start（）

，以便触发

ondataavailable

。这将以指定的mimetype对捕获的流进行编码并发送到服务器。单独播放每个区块是可行的，因为每个区块都是一个合适的视频+音频容器，当试图在单个缓冲区中连接多个容器时，问题就出现了。仍在努力找到解决方法

我在Firefox和Chrome上都遇到了同样的问题。我猜要么规范不支持，要么我们做错了。我查看了所有API方法/属性，并搜索了示例代码，但没有找到任何解决方案。对视频调用play（）和/或设置sourceBuffer.timestampOffset似乎没有帮助。