Question

我正在使用服务器 - 客户端模型制作广播软件。

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

然后，服务器将收到的blob广播到接收方客户端列表。

接收方有一个<video>元素，其源设置为MediaSource对象，该对象具有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对捕获的流进行编码并发送到服务器。单独播放每个块是因为每个块都是一个合适的视频+音频容器，当尝试在单个缓冲区中连接多个容器时会出现问题。仍在努力寻找解决方法。

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

0 个答案: