Blob video stream not showing on iOS when receiving a stream from socket.io (JavaScript and Node.js)

This works perfectly fine on android (every part of it). But when I receive a video stream wrapped in a blob on iOS from android or another iOS device, it does not show any sign of loading the video or displaying it. However, when I show my own video to myself on iOS, it works.

I have tried the following:

video.setAttribute('autoplay', '');
video.setAttribute('playsinline', '');
video.setAttribute('muted', '');

Or adding a source element to the video element, but these did not work.

How am I supposed to fix the receiving video issue on iOS?

Code (sorry for all the styling):

Client:

let media;
const done = document.getElementById('done');
const vidCon = document.getElementById('video-con');
var getUserMedia = (navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia).bind(navigator.mediaDevices);
    getUserMedia({
        video: true,
        audio: true
    }).then((stream) => {
        const myVideo = document.createElement('video');
        myVideo.srcObject = stream;
        myVideo. setAttribute('autoplay', '');
        myVideo. setAttribute('muted', '');
        myVideo. setAttribute('playsinline', '');
        myVideo.style.width = '100%';
        myVideo.style.height = '80%';
        myVideo.muted = true;
        myVideo.style.display = 'block';
        myVideo.style.objectFit = 'cover';
        media = new MediaRecorder(stream); 
        media.onstart = function(e) {
        this.chunks = [];
        myVideo.play();
        document.getElementById('video-base-con').append(myVideo);
    }
    done.onclick = function() {
        media.stop();
        audio.src = "93642-Blakes_7_Gun_144bpm.wav";
        audio.play();
        audio.addEventListener('ended', go);
        done.style.display = 'none';
        document.getElementById('blank-choosing').style.display = 'block';
    }
    media.ondataavailable = function(e) {
        this.chunks.push(e.data);
    }
    media.onstop = function(e) {
        myVideo.remove();
        var blob = new Blob(this.chunks, { 'type' : 'video/ogg; codecs=opus' });
        socket.emit('send-video', blob);
    }
});
socket.on('recieve-video', (stream, codeNew) => {
            if (codeNew == code.value) {
                document.getElementById('blank-video').style.display = 'none';
                console.log('recieved video.');
            const blob = new Blob([stream], { 'type' : 'video/ogg; codecs=opus' });
            const video = document.createElement('video');
            video.src = window.URL.createObjectURL(blob);
                                video. setAttribute('autoplay', '');
video. setAttribute('muted', '');
video. setAttribute('playsinline', '');
            vidCon.style.display = 'block';
            video.style.width = '90%';
            video.style.height = '100%';
            video.style.objectFit = 'cover';
            vidCon.style.width = '100%';
            vidCon.style.height = '100%';
            vidCon.style.textAlign = 'center';
            vidCon.style.backgroundColor = 'lightgray';
            vidCon.style.borderRadius = '30px';
            vidCon.append(video);
            video.play();
            video.addEventListener('ended', () => {
                video.remove();
                vidCon.style.display = 'none';
                answers.style.display = 'block';
            }, false);
            }
        });

Server:

socket.on('send-video', (blob) => {
     socket.broadcast.emit('recieve-video', blob, code); 
});

Thanks in advance!