Блог

У меня есть этот сервер sfu: https://github.com/pion/example-webrtc-applications/tree/master/sfu-ws

Я сделал реализацию браузера для аудиоконференции, она работает. Я создал собственную реализацию react с использованием react-native-webrtc, она частично работает.

Если я подключу 1 браузер и 1 мобильный телефон — все в порядке.

Если я подключу другой браузер, при отправке предложения с новым одноранговым узлом на мобильный телефон мобильный телефон создаст ответ. В ответе есть 2 фрагмента льда с разными значениями. В браузере я увидел, что значения одинаковы.

Сервер завершает работу с сообщением: SetRemoteDescription called with multiple conflicting ice-ufrag values

Мой тест реагирует на собственный код:

 import { StatusBar } from 'expo-status-bar';
import React, {
  useContext,
  useEffect,
  useCallback,
  useState,
  useRef,
} from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {RTCPeerConnection, RTCView, mediaDevices} from 'react-native-webrtc';


export default function App() {
     const [streams, setStreams] = useState([])

useEffect(() => {mediaDevices.getUserMedia({ video: false, audio: true })
    .then(stream => {
        var ws = new WebSocket('ws://192.168.0.193:6060/ws');

        var config = {
            iceServers: [{
                urls: ["stun:stun1.l.google.com:19302"]
            },
            ]
        };
        pc = new RTCPeerConnection(config)

        pc.onaddstream = function (event) {
            setStreams((old) => [
                ...old,
                {
                  stream: event.stream,
                  id: event.stream.id,
                },
              ]);
        }

        ws.onopen = function (){
            ws.send(JSON.stringify({"event": "webrtc.connect"}));
        }

        pc.onremovestream = (event) => {
          setStreams((old) => old.filter(({id}) => id !== event.stream.id));
        };

        pc.onicecandidate = e => {
            if (!e.candidate) {
                return
            }

            ws.send(JSON.stringify({event: 'candidate', data: JSON.stringify(e.candidate)}))
        }

        ws.onclose = function(evt) {
        }

        ws.onmessage = function(evt) {
            const dat = evt.data.split(/r?n/)
            for (let x = 0; x < dat.length; x  ) {
                let msg = JSON.parse(dat[x])
                if (!msg) {
                    return console.log('failed to parse msg')
                }
                switch (msg.event) {
                    case 'offer':
                        let offer = JSON.parse(msg.data)
                        if (!offer) {
                            return console.log('failed to parse answer')
                        }
                        pc.setRemoteDescription(offer).then(a => {
                            pc.createAnswer({}).then(answer => {
                                pc.setLocalDescription(answer)
                                ws.send(JSON.stringify({event: 'answer', data: JSON.stringify(answer)}))
                            })
                        })
                        return

                    case 'candidate':
                        let candidate = JSON.parse(msg.data)
                        if (!candidate) {
                            return console.log('failed to parse candidate')
                        }

                        pc.addIceCandidate(candidate)
                }
            }
        }

        ws.onerror = function(evt) {
            console.log("WS ERROR: "   evt.data)
        }
    }).catch((error) => {
        console.log(error.data);
      });
}, []);

  return (
    <View style={styles.container}>
      <StatusBar style="auto" />
      {streams.map(({stream, id}) => (
          <RTCView key={id} streamURL={stream.toURL()} />
        ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
 

1. Как я могу решить проблему с сервером при добавлении третьего однорангового узла? SetRemoteDescription called with multiple conflicting ice-ufrag values .
2. Также я замечаю странное поведение при удалении компонентов RTCView. Я ожидал, что не получу никакого аудио и отправлю свое аудио, но вместо этого я получаю все, но не могу отправить никакого аудио. Мой трек не добавляется к другому одноранговому узлу.

Я считаю, что проблема в том, что в текущем выпуске react-native-webrtc используется PlanB.

billylindeman/react-native-webrtc, который был обновлен для единого плана. Я сам этого не делал, но увидел ответ в слабине Пиона