从 socket.io（JavaScript 和 Node.js）接收流时，Blob 视频流未在 iOS 上显示答案

【问题标题】：Blob video stream not showing on iOS when receiving a stream from socket.io (JavaScript and Node.js)从 socket.io（JavaScript 和 Node.js）接收流时，Blob 视频流未在 iOS 上显示
【发布时间】：2022-01-15 14:09:57
【问题描述】：

这在 android 上运行得非常好（它的每个部分）。但是，当我从 Android 或其他 iOS 设备收到包含在 iOS 上的 blob 中的视频流时，它没有显示任何加载视频或显示视频的迹象。但是，当我在 iOS 上向自己展示自己的视频时，它可以正常工作。

我尝试了以下方法：

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

或者向视频元素添加源元素，但这些都不起作用。

我应该如何解决 iOS 上的视频接收问题？

代码（抱歉所有样式）：

客户：

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

服务器：

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

提前致谢！

【问题讨论】：

标签： javascript node.js socket.io blob getusermedia

【解决方案1】：

这几乎可以肯定是媒体类型（f/k/a MIME 类型）问题。 MediaRecorder 生成的默认媒体类型在 Android 和 iOS 设备上并不相同。在您的 media = new MediaRecorder(stream) 行之后检查 media type 和 media.mimeType 以查看您在每种情况下收到的默认值。

您可以尝试使用这样的代码显式选择媒体类型，这样您就不会被默认设置所困扰。

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

或

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

您可能很难找到 Android 和 iOS 都提供的通用媒体类型。

您似乎正在尝试在 Blob 构造函数中选择媒体类型。你不能那样做™。媒体类型在您构建 MediaRecorder 时设置。

【讨论】：