Node.js环境下PeerJS iOS跨Android/iOS互通时视频流不显示问题求助

核心原因 #

iOS Safari/WebKit对WebRTC媒体流播放、自动播放策略的限制比安卓/桌面端严格，你的代码主要存在3个不兼容iOS的问题：

1. 依赖loadedmetadata事件触发播放，WebRTC的实时流在iOS上大概率不会触发该事件，导致播放逻辑永远不执行
2. 远端视频标签未配置muted属性，iOS不允许非静音视频在无用户主动交互的场景下自动播放
3. 未处理play()方法的异步异常，无法捕获播放权限相关的报错

修复步骤 #

1. 重写addVideo方法 #

移除对loadedmetadata事件的依赖，直接调用播放，同时新增muted配置，捕获播放异常，这一步可以解决90%以上的iOS黑帧问题：

function addVideo(video, stream) {
    video.srcObject = stream;
    video.playsInline = true;
    video.muted = true; // iOS要求无用户交互的自动播放视频必须静音
    video.autoplay = true;
    // 直接调用播放，不需要等待loadedmetadata事件
    video.play().catch(err => {
        console.log('自动播放失败，引导用户点击页面触发播放即可：', err);
        // 可选兼容方案：绑定一次全局点击事件触发播放
        document.body.addEventListener('click', () => {
            video.play();
        }, { once: true });
    });
    videos.append(video);
}

2. 强制指定兼容iOS的视频编码格式 #

安卓端默认输出的H.264 High Profile编码不被iOS Safari支持，需要在采集视频时指定编码偏好：

getUserMedia({
    video: {
        width: { ideal: 1280 },
        height: { ideal: 720 },
        codec: 'h264' // 优先使用iOS兼容的H.264 Baseline/Main Profile
    },
    audio: true
})

3. 可选：完善ICE穿透配置 #

如果修改后仍无画面，确认你的PeerJS服务端配置了STUN/TURN服务器，iOS对NAT穿透的要求更严格，仅STUN可能无法完成媒体链路协商：

const myPeer = new Peer(undefined, {
    host: '/',
    port: '8090',
    config: {
        iceServers: [
            { urls: 'stun:stun.l.google.com:19302' },
            // 新增你自己部署的TURN服务器配置
            {
                urls: 'turn:你的TURN服务器地址:端口',
                username: '认证用户名',
                credential: '认证密码'
            }
        ]
    }
});

内容的提问来源于stack exchange，提问作者Adude