3

我正在尝试将视频流式传输到 html5 视频标签。

我现在有点卡住了，SourceBuffer 确实获取了我所有的数据，我让那部分工作了。

视频只是不播放。我真的不知道为什么。它似乎也以某种方式被破坏了。

这是加载所有数据时的样子

这是控制台中对应的日志

new stream from server
webkitsourceopen 
Event {clipboardData: undefined, cancelBubble: false, returnValue: true, srcElement:         WebKitMediaSource, defaultPrevented: false…}
data append 
WebKitMediaSource {readyState: "open", duration: NaN, activeSourceBuffers:     WebKitSourceBufferList, sourceBuffers: WebKitSourceBufferList, addSourceBuffer: function…}
play
data append 
WebKitMediaSource {readyState: "open", duration: 32.48, activeSourceBuffers:     WebKitSourceBufferList, sourceBuffers: WebKitSourceBufferList, addSourceBuffer: function…}
data append 
WebKitMediaSource {readyState: "open", duration: 32.48, activeSourceBuffers:     WebKitSourceBufferList, sourceBuffers: WebKitSourceBufferList, addSourceBuffer: function…}
...
data append 
WebKitMediaSource {readyState: "open", duration: 32.48, activeSourceBuffers:         WebKitSourceBufferList, sourceBuffers: WebKitSourceBufferList, addSourceBuffer: function…}
stream 100% received on client client.js:39
webkitsourceclose

最后是我在浏览器中的代码：

jQuery(function () {
window.MediaSource = window.MediaSource || window.WebKitMediaSource;
var URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
if ( !URL ) {
    URL = {};
}
if ( !URL.createObjectURL ) {
    URL.createObjectURL = function (obj) {
        return obj;
    }
}

console.log("new stream from server")
// Create media source
var mediaSource = new MediaSource();
var streamClient = document.getElementById('streamClient');
streamClient.src = URL.createObjectURL(mediaSource);
document.getElementById('app').appendChild(streamClient);
mediaSource.addEventListener('webkitsourceopen', function (e) {
    var sourceBuffer = e.target.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
    console.log('webkitsourceopen', e);

    var client = new BinaryClient('ws://' + window.location.hostname + ':11345');
    client.on('open', function (stream) {
        // Stream received from server
        client.on('stream', function (stream) {
            // Wait for streamed data from server
            stream.on('data', function (data) {
                // Append data to client buffer
                console.log("data append", e.target);
                e.target.activeSourceBuffers[0].append(new Uint8Array(data));

                if ( streamClient.paused ) {
                    console.log('play');
                    streamClient.play();
                }
            });
            stream.on('end', function () {
                console.log("stream 100% received on client");
                stream.destroy();
            });
        });
    });
    client.on('close', function () {
        console.log('client closed')
    });
}, false);

mediaSource.addEventListener('webkitsourceclose', function (e) {
    console.log('webkitsourceclose');
});
});
4

0 回答 0