Как распространить изменения RTCPeerConnection на компонент React с помощью библиотеки управления состоянием Mobx - PullRequest
Новая
       8

Как распространить изменения RTCPeerConnection на компонент React с помощью библиотеки управления состоянием Mobx

0 голосов
/ 17 мая 2018

Я в настоящее время нахожусь в проекте, который использует React-native для мобильных устройств, React в Интернете и MobX для создания приложения, использующего WebRTC для предоставления пользователям возможности общаться через видеочат.

Проблема, с которой я сталкиваюсь, заключается в том, что рендеринг React не запускается изменениями RTCPeerConnection, такими как iceConnectionState, signalingState и изменения удаленного потока.

Кажется, что MobX работает не так, как описано, при использовании "нативной сущности", такой как RTCPeerConnection. Даже при том, что мы намеревались отслеживать свойства способом 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?

1 Ответ

0 голосов
/ 17 мая 2018

MobX не может автоматически отслеживать объекты среды хоста, которые на самом деле вообще не являются объектами JavaScript и не должны играть по правилам.

Выполнение @observable до того, как RTCPeerConnection не сможет реально сделать его наблюдаемым осмысленным образом.

Единственный способ добавить наблюдаемость здесь - это иметь отдельное наблюдаемое свойство и слушать события RTCPeerConnection: 

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