PX4 Gazebo SITL Video not streaming to browser


I am currently trying to stream video from the video camera on the PX4 Gazebo Simulator to a web browser.

The video displays fine in QGroundControl, so I have confirmed that the simulator is sending video fine.

I am attempting to stream it directly to a video tag in the browser using the Javascript below. All the packets are coming through fine on the signalR connection, but nothing is happening and there are no errors at all. One suspect is the codec, but I have tried changing the MIME type of the codec to many different things and had no success

Would anyone have any idea what the problem could be, or has anyone managed to get something like this to work?

    <video id="test-video" autoplay muted class="video-element"></video>

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/5.0.12/signalr.min.js"></script>

    const connection = new signalR.HubConnectionBuilder()

    connection.binaryType = 'arraybuffer';

        .then(() => {
            console.log("Connected to SignalR hub");
            connection.invoke("JoinGroup", "drone253"); // get this from the current drone
        .catch(err => console.error("Error connecting to SignalR hub:", err));

    // get video packets

    if ('MediaSource' in window) {
        let mediaSource = new MediaSource();
        let sourceBuffer;
        let bufferQueue = [];

        mediaSource.addEventListener('sourceopen', function () {
            sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001E,mp4a.40.2"');

        document.getElementById('test-video').src = URL.createObjectURL(mediaSource);

        connection.on("Video", function (dataChunk) {
            var byteArray = base64ToArrayBuffer(dataChunk);
            if (sourceBuffer && !sourceBuffer.updating) {
    } else {
        console.error('MSE not supported by this browser.');

    function base64ToArrayBuffer(base64) {
        var binary_string = window.atob(base64);
        var len = binary_string.length;
        var bytes = new Uint8Array(len);
        for (var i = 0; i < len; i++) {
            bytes[i] = binary_string.charCodeAt(i);
        return bytes.buffer;