javascript - 使用 mediarecorder + mediasource 直播时产生的噪音

Question

我尝试使用mediarecorder和mediasource进行直播，视频可以正常播放，但是每一秒都会有噪音。

主机将blob发送到服务器，查看器通过ajax请求blob，然后在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)
        })
       

接收端：</p>

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);
    }
}

我能做些什么来消除噪音？

标签： javascriptmedia-sourceweb-mediarecorder