从 Z3D7A7766E8CDEB1C1FF8508204C4EBZ 接收来自 Z3D7A7766E8CDEB1C1FF8508204C4EBZ 的 stream 时，Blob 视频 stream 未显示

Question

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!

Answer 1

This is almost certainly a media type (f/k/a MIME type) issue. The default media types generated by MediaRecorder are not the same on Android and iOS devices. Right after your media = new MediaRecorder(stream) line examine the media type with media.mimeType to see what default you received in each case.

You can try choosing the media type explicitly with code like this, so you don't get stuck with the default.

media = new MediaRecorder(stream, {mimeType: 'video/mp4'})

or

media = new MediaRecorder(stream, {mimeType: 'video/webm'})

You may have to struggle to find a common media type provided by both Android and iOS.

It looks like you're trying to choose the media type in your Blob constructor. You Can't Do That™. The media type is set when you construct your MediaRecorder.