I have this sfu server: https://github.com/pion/example-webrtc-applications/tree/master/sfu-ws
I made the browser implementation for audio conference, it's working. I have created the react native implementation using react-native-webrtc, it's working partially.
If I connect 1 browser and 1 mobile - it's ok.
If I connect another browser, when sending offer with the new peer to mobile, the mobile creates an answer. The answer has 2 ice-ufrags with different values. In browser I saw that the values are the same.
The server fails with the message: SetRemoteDescription called with multiple conflicting ice-ufrag values
My test react native code:
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',
},
});
How can I resolve the server issue, when adding the third peer?
SetRemoteDescription called with multiple conflicting ice-ufrag values.Also I notice a strange behaviour when removing RTCView components. I expected to not receive any audio and send my audio, but instead I receive everything but I'm not able to send any audio. My track is not added to the other peer.