streaming a video into a web player using javacsript (react component)

I am using Javascript, however the possibly important caveat is in a WebView. I have a stream of data which is an mp4 that I can retrieve like so

            window.runtime.EventsOn('playback-continue', (chunk) => {
                console.log("chunk ", chunk)
                queue.push(new Uint8Array(chunk));
                appendToBuffer(sourceBuffer);
            });

I have no issues retrieving the bytes this way (if i print the chunk i can see the data albeit its printed in base64).

However I can’t seem to be able to use this to stream a video into a player.

My component looks like

const VideoPlayer = () => {
    const videoRef = useRef(null);
    const mimeCodec = 'video/mp4; codecs="avc1.4D401F"';
    let queue = [];
    const mediaSource = new MediaSource();
    useEffect(() => {
        if (!('MediaSource' in window) || !MediaSource.isTypeSupported(mimeCodec)) {
            console.error('Unsupported MIME type or codec: ', mimeCodec);
            return;
        }


        const video = videoRef.current;
        video.srcObject = mediaSource;

        mediaSource.addEventListener('sourceopen', () => {
            const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);

            window.runtime.EventsOn('playback-continue', (chunk) => {
                console.log("chunk ", chunk)
                queue.push(new Uint8Array(chunk));
                appendToBuffer(sourceBuffer);
            });

            window.runtime.EventsOn('playback-end', () => {
                mediaSource.endOfStream();
            });

            function appendToBuffer(sourceBuffer) {
                if (queue.length > 0 && !sourceBuffer.updating && mediaSource.readyState === 'open') {
                    sourceBuffer.appendBuffer(queue.shift());
                }
            }

            sourceBuffer.addEventListener('updateend', () => appendToBuffer(sourceBuffer));
            sourceBuffer.addEventListener('error', (e) => console.error('SourceBuffer error:', e));
        });

        return () => {
            window.runtime.EventsOff('playback-continue');
            window.runtime.EventsOff('playback-end');
        };
    }, []);

    const startStreaming = () => {
        const videoPath = '/Users/username/Desktop/video.mp4'; // Change to your actual video file path
        OpenVideoFile(videoPath);
    };
    const stopStreaming = () => {
        mediaSource.endOfStream();
    };
    return (
        <div>
            <button onClick={startStreaming}>Start Streaming</button>
            <button onClick={stopStreaming}>Stop Streaming</button>
            <video ref={videoRef} controls />
        </div>
    );
};

I have tried to find blogs/tutorials but I think the issue is how I am passing the stream to the player, not the player code itself.
I just don’t see anything except a continual spinner on the player

P.S OpenVideoFile calls a backend function that begins emitting the stream