如何使用 Mobx 状态管理库将 RTCPeerConnection 更改传播到 React 组件

Question

我目前在一个项目中使用 React-native for mobile、React on the web 和 MobX 创建一个应用程序，该应用程序利用 WebRTC 使用户能够通过视频聊天进行交流。

我面临的问题是 React 渲染不是由 RTCPeerConnection 上的更改触发的，例如 iceConnectionState、signalingState 和远程流更改。

当使用像 RTCPeerConnection 这样的 "native entity" 时，MobX 似乎没有按照其描述的方式工作。尽管我们打算以 MobX 的方式跟踪属性，以便随着属性更改保持更新。

RoomStore：

import { observable } from 'mobx';
import { RTCPeerConnection, RTCMediaStream } from 'react-native-webrtc';

class RoomStore {
    @observable userMediaStream: RTCMediaStream;    
    @observable peerConnection: RTCPeerConnection;
}

export default RoomStore;

组件渲染方法：

render() {
    const { roomStore } = this.props;
    const peerConnection = roomStore.peerConnection;
    const iceConnectionState = peerConnection.iceConnectionState;

    if (peerConnection.getRemoteStreams().length > 0 && iceConnectionState === 'completed') {
        // display remote stream
    } else {
        // display connecting state
    }
}

我想出了一个解决方法，它正在监听 oniceconnectionstate、onsignalingstate、onaddstream 并存储现有的 peerconnection 状态值，在存储本身上单独流，但它是多余的并且不干净地复制一个已经存在的状态只是为了让图书馆工作。此外，当我自己完成项目时，这会在应用程序最敏感的部分产生额外的非预期复杂性。

我的问题是是否可以仅保持单个 RTCPeerConnection 可观察并使用 MobX 编写干净且不易出错的代码？

Answer 1

MobX 无法自动跟踪宿主环境对象，这些对象实际上根本不是 JavaScript 对象并且不需要遵守规则。

在 RTCPeerConnection 之前执行 @observable 实际上无法使其以有意义的方式被观察到。

在此处添加可观察性的唯一方法是拥有一个单独的可观察性属性并监听 RTCPeerConnection 的事件：

connection.onicecandidate = () => { /* update observable proprety here */ }
connection.oniceconnectionstatechange = () => { /* update observable proprety here */ }
connection.onsignalingstatechange =  { /* update observable proprety here */ }

如何使用 Mobx 状态管理库将 RTCPeerConnection 更改传播到 React 组件

How to propagate RTCPeerConnection changes to a React component with Mobx state management library

javascript

webrtc

reactjs

react-native

mobx