我正在尝试在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 =流;