RTCPeerConnection设置remoteDescription时抛出只读错误是什么原因？

安全阿岳

2026-10-1

问题根因

核心原因：你直接将MQTT通道反序列化得到的普通JSON对象传入setRemoteDescription方法，未转换为react-native-webrtc要求的RTCSessionDescription实例，库内部赋值逻辑操作普通对象时触发只读属性限制，引发报错。
次要原因：你的代码使用了WebRTC规范早已废弃的mandatory配置项，且属性名大小写不符合现行标准，存在触发未知异常的风险。

解决步骤

1. 修改offer处理逻辑

引入RTCSessionDescription构造器，将收到的普通对象包装为标准实例后再传入setRemoteDescription，同时更新answer生成配置为规范写法：

import { RTCSessionDescription } from 'react-native-webrtc';

const handleOffer = offer => {
    const remoteOffer = new RTCSessionDescription(offer);
    peerConn.setRemoteDescription(remoteOffer)
        .then(() => {
            return peerConn.createAnswer({
                offerToReceiveAudio: true,
                offerToReceiveVideo: true,
            });
        })
        .then(answer => {
            return peerConn.setLocalDescription(answer);
        })
        .then(() => {
            sendMqttMessage({
                type: 'answer',
                answer: answer,
            });
        })
        .catch(err => {
            console.error('处理offer失败: ', err);
        });
};

2. 修改offer生成逻辑

移除废弃的mandatory配置项，使用规范的小写属性名：

const handleCall = () => {
    setCallActive(true);
    peerConn.createOffer({
        offerToReceiveVideo: false,
        offerToReceiveAudio: false,
    })
    .then(offer => {
        return peerConn.setLocalDescription(offer);
    })
    .then(() => {
        sendMqttMessage({
            type: 'offer',
            offer: offer,
            name: userId,
        });
    })
    .catch(err => {
        console.error('生成offer失败: ', err);
    });
};