Reputation: 11
I tried to use mediarecorder and mediasource for live broadcast, the video can be played normally, but there will be noise every second.
The host sends the blob to the server, and the viewer requests the blob through ajax, and then splices it in the mediasource.
navigator.mediaDevices.getUserMedia({
video: {
width: 1920,
height: 1080
},
audio: true
})
.then(function (stream) {
const mediaRecorder = new MediaRecorder(stream, {
mimeType: 'video/webm;codecs=vp8,opus'
});
mediaRecorder.addEventListener("dataavailable", handleDataAvailable);
mediaRecorder.start(1000)
})
function handleDataAvailable(event) {
event.data.arrayBuffer().then((buffer) => {
socket.send(buffer)
})
Receiving end:
const video = document.getElementById("video")
const mediaSource = new MediaSource();
const url = URL.createObjectURL(mediaSource);
video.src = url;
let start = 0
let sourceBuffer;
mediaSource.addEventListener("sourceopen", function () {
sourceBuffer = mediaSource.addSourceBuffer('video/webm;codecs=vp8,opus')
sourceBuffer.mode = 'sequence'
sourceBuffer.addEventListener("updateend", function () {
getBuffer(start, start + 1)
console.log(video.getVideoPlaybackQuality());
})
getBuffer()
});
const arrayOfBlobs = [];
function getBuffer() {
window.axios({
method: 'GET',
url: 'http://127.0.0.1:3000/buffer',
params: {
start: start,
end: start + 1
},
responseType: 'arraybuffer'
}).then((response) => {
arrayOfBlobs.push(response.data)
appendToSourceBuffer()
start += 1
})
}
function appendToSourceBuffer() {
if (
mediaSource.readyState === "open" &&
sourceBuffer &&
sourceBuffer.updating === false
) {
const buf = arrayOfBlobs.shift()
sourceBuffer.appendBuffer(buf);
}
}
What can I do to eliminate the noise?
Upvotes: 1
Views: 281