PlayCanvas实现WebRTC通信出现Data channel type mismatch报错

你遇到的报错核心是RTP数据通道属于已废弃的Chrome私有实现，只有特定旧版本Brave还保留兼容，Chrome、新版Brave等主流浏览器均已移除该特性，默认生成符合W3C标准的SCTP协议SDP，两端通道协议类型不匹配就会触发SDP解析错误。

推荐方案：统一使用标准SCTP数据通道（兼容性最好） #

这是长期可用的最优方案，调整步骤如下：

• 移除RTCPeerConnection初始化时的废弃配置，原有代码：

this.yourConn = new RTCPeerConnection(configuration, {
    optional: [{ RtpDataChannels: true }],
});

修改为：

this.yourConn = new RTCPeerConnection(configuration);

• 确保所有对等端的WebRTC初始化逻辑一致，不要强制指定RTP通道。SCTP是WebRTC数据通道的标准实现，所有现代浏览器均支持，同时支持可靠、半可靠、不可靠三种传输模式，功能完全覆盖旧RTP通道。
• 修复STUN配置的属性错误：原配置中iceServers使用了非标准属性url，需修改为标准属性urls，避免部分浏览器无法识别STUN服务导致公网连接失败：

var configuration = {
    iceServers: [{ urls: 'stun:stun2.1.google.com:19302' }],
};

临时过渡方案：强制生成RTP协议SDP（不推荐，后续可能失效） #

如果短期内需要兼容原有RTP通道逻辑，可以在生成offer后手动修改SDP内容，替换SCTP相关配置为RTP格式，示例代码如下：

this.yourConn.createOffer(
    offer => {
        // 手动替换SDP协议类型
        offer.sdp = offer.sdp.replace(/m=application .* UDP\/DTLS\/SCTP .*\r\n/g, 'm=application 9 UDP/TLS/RTP/SAVPF 118\r\n');
        offer.sdp += 'a=rtpmap:118 google-data/90000\r\n';
        // 原有逻辑不变
        this.sendMessage({
            type: 'offer',
            offer: offer,
        });
        this.yourConn.setLocalDescription(offer);
    },
    error => {
        alert('Error when creating an offer');
    }
);

该方案依赖浏览器对RTP数据通道的残留支持，后续浏览器版本升级后可能完全失效，仅做临时过渡使用。

内容的提问来源于stack exchange，提问作者dark.magician