I want to make video streaming with vanilla js and websocket. I can easily create media recorder and get user video data as ArrayBuffer and send it but problem is I couldn't append SourceBuffer due to this error

This is my code for getting arrayBuffer during websocket.onmessage and appending SourceBuffer. Error happens during append.

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

This is how i am sending array buffer in here everything works very well.

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

Update:

Problem caused because I was passing directly socket data I ought to use buf.data.

After that new problem happened: