通过NodeJS socket.io服务器进行视频广播-问题

时间:2018-12-19 01:52:27

标签: node.js socket.io streaming webcam broadcasting

我正在尝试在nodeJS中编写UserMedia流应用。问题是当我想将网络摄像头视频流式传输到服务器并以blob链接src的不同标签获取响应时。

我有1000毫秒的数据块推送到服务器,接下来,当我收到请求时,我会将响应发送给访问者。我不需要将其保存在文件中。

节点接收缓冲区数据,我在控制台中看到了。相同的响应将再次发送给客户端,但客户端的控制台会向我发送邮件:

无法在“ SourceBuffer”上执行“ appendBuffer”:此SourceBuffer已从父媒体源中删除。

您是否知道其中出了什么问题?

客户端

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

    if(navigator.getUserMedia) {
        navigator.getUserMedia({
            audio: true,
            video: true
        }, function(stream) {
            videoPlayer.append(player);
            var video = document.querySelector("#video");
            video.srcObject = stream;
            video.onloadedmetadata = function(e) {
                video.play();
            };
            var mediaRecorder  = new MediaRecorder(stream, {
                mimeType: 'video/webm'
            });

            mediaRecorder.ondataavailable = function(e) {
                let chunk = [];
                if (e.data && e.data.size > 0) {
                    socket.emit("video_chunk", e.data);
                } else {
                    console.log("Media Recorder error.");
                }
            }
            mediaRecorder.start(1000);
        }, function(err) {
            alert("Error: " + err.message);
        }
        );
    } else {
        alert("Your browser doesn't support streaming.");
    }
});
if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
    var mediaSource = new MediaSource();
    preview.src = URL.createObjectURL(mediaSource);
    mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
    alert("Unsupported MIME type or codec: " + mimeCodec);
}
function sourceOpen(_) {
    var mediaSource = this;
    var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
    socket.on('video_chunk', function(data) {
        sourceBuffer.addEventListener('updateend', function() {
            if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
            mediaSource.endOfStream();
            }
            preview.play();
        });
        console.log(new Uint8Array(data));
        sourceBuffer.appendBuffer(new Uint8Array(data));
        console.log("Adding chunk");  
    });
}

和后端看起来像这样

function stream(io, app) {
io.on("connection", function(socket) {
    console.log("Video Socket connected.");
    socket.on("video_chunk", function(data) {
        console.log(data);
        console.log(data.byteLength/1000 + "kB")
        io.emit("video_chunk", data)
    })
});

}

module.exports =流;

0 个答案:

没有答案