我想让视频流与香草js和网络套接字。我可以轻松地创建媒体记录器,并以ArrayBuffer的形式获取用户视频数据并将其发送出去,但问题是,由于这个错误,我无法添加SourceBuffer
这是我在websocket.onmessage期间获取websocket.onmessage并附加SourceBuffer的代码。错误发生在附加过程中。
const video2 = document.getElementById('video2')
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
if ('MediaSource'in window && MediaSource.isTypeSupported(mimeCodec)) {
var mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', sourceOpen);
video2.src = URL.createObjectURL(mediaSource);
console.log("mediaSource.readyState"); // closed
} else {
console.error('Unsupported MIME type or codec: ', mimeCodec);
}
function sourceOpen(_) {
if (MediaSource.isTypeSupported(mimeCodec)) {
console.log("yes it is supported")
}
const mediaSource = this;
const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
sourceBuffer.mode = "sequence";
streamsocket.onmessage = (buf) => {
sourceBuffer.addEventListener('updateend', function(_) {
mediaSource.endOfStream();
video2.play();
});
sourceBuffer.appendBuffer(buf);
}
}
这就是我在这里发送数组缓冲区的方式,一切都运行得很好。
static registerStream = (userdata , stream, streamsocket) => {
const mediaRecorder = new MediaRecorder(stream)
let countUploadChunk = 0
console.log(stream)
mediaRecorder.ondataavailable = (data) => {
Streaming.sendData(data.data, streamsocket, userdata, countUploadChunk)
countUploadChunk++
}
mediaRecorder.start()
setInterval(() => {
mediaRecorder.requestData()
}, 500)
}
static sendData = async (data, streamsocket, userdata, chunkNumber) =>{
let reader = new FileReader();
let rawData = new ArrayBuffer();
reader.loadend = function() {}
reader.onload = function(e) {
rawData = e.target.result;
streamsocket.send(rawData)
}
reader.readAsArrayBuffer(data);
}
更新:
由于我直接传递套接字数据而导致问题,我应该使用buf.data
。
在那个新问题发生之后:
发布于 2022-03-16 09:40:51
出现问题是因为我直接传递套接字数据(is buf
)。
解决方案:我需要使用buf.data
来访问附加的实际字节)。
https://stackoverflow.com/questions/71488781
复制相似问题