Hello, I’m trying to make a video call application. I made a backend server to exchange data between users with websocket. My problem is that i cannot show remote stream (even if I receive the stream in the onaddstream event, I get a transparent view.
I tried multiple android devices and emulators but always the same result.
react-native-webrtc version : 1.75.3
Here’s my code:
import React, { Component } from ‘react’;
import { View, Text } from ‘react-native’;
import WS from ‘react-native-websocket’;
import {
RTCPeerConnection, RTCSessionDescription, RTCIceCandidate, mediaDevices, RTCView
} from ‘react-native-webrtc’;let peerConnection;
let dataChannel;
console.disableYellowBox = true;
class App extends Component {
constructor(props) {
super(props);
this.ws = React.createRef();
this.state = { stream: null, currentStream: null };
}initialize() {
const configuration = { iceServers: [{ url: ‘stun:stun.l.google.com:19302’ }] };peerConnection = new RTCPeerConnection(configuration);
// Setup ice handling
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
this.ws.send(JSON.stringify({
event: ‘candidate’,
data: event.candidate
}));
}
};mediaDevices.enumerateDevices().then((sourceInfos) => {
let videoSourceId;
for (let i = 0; i < sourceInfos.length; i++) {
const sourceInfo = sourceInfos[i];
if (sourceInfo.kind == ‘videoinput’ && sourceInfo.facing == (‘front’)) {
videoSourceId = sourceInfo.deviceId;
}
}
mediaDevices.getUserMedia({
audio: true,
video: {
mandatory: {
minWidth: 500, // Provide your own width, height and frame rate here
minHeight: 300,
minFrameRate: 30
},
facingMode: ‘user’,
optional: (videoSourceId ? [{ sourceId: videoSourceId }] : )
}
})
.then((stream) => {
peerConnection.addStream(stream);
this.setState({ currentStream: stream });
// Got stream!
})
.catch((error) => {
console.log(error);
});
});peerConnection.onaddstream = (event) => {
this.setState({ stream: event.stream });
};dataChannel = peerConnection.createDataChannel(‘dataChannel’, {
reliable: true
});dataChannel.onerror = (error) => {
console.log(‘Error occured on datachannel:’, error);
};dataChannel.onmessage = (event) => {
console.log(‘message:’, event.data);
};dataChannel.onclose = () => {
console.log(‘data channel is closed’);
};
}createOffer() {
peerConnection.createOffer().then((offer) => {
peerConnection.setLocalDescription(offer).then(() => {
this.ws.send(JSON.stringify({
event: ‘offer’,
data: offer
}));
});
}).catch((error) => {
console.log(error);
});
}handleOffer(offer) {
return peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
.then(() => peerConnection.createAnswer().then((answer) => {
peerConnection.setLocalDescription(answer).then(() => {
this.ws.send(JSON.stringify({
event: ‘answer’,
data: answer
}));
});
}));
}handleCandidate(candidate) {
peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
}handleAnswer(answer) {
peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
}render() {
return (
<View style={{ flex: 1 }}>
<Text onPress={() => this.createOffer()}>Create offer
{
this.state.stream ? (<RTCView style={{ height: 200, width: 200 }} streamURL={this.state.stream.toURL()} />) : null
}
{
this.state.currentStream ? (<RTCView style={{ height: 200, width: 200 }} streamURL={this.state.currentStream.toURL()} />) : null
}
<WS
ref={(ref) => { this.ws = ref; }}
url=“ws://192.168.43.240:8083/socket”
onOpen={() => {
this.initialize();
}}
onMessage={(msg) => {
const content = JSON.parse(msg.data);
const { data } = content;
switch (content.event) {
case ‘offer’:
this.handleOffer(data);
break;
case ‘answer’:
this.handleAnswer(data);
break;
case ‘candidate’:
this.handleCandidate(data);
break;
default:
break;
}
}}
onError={console.log}
onClose={console.log}
reconnect
/>
);
}
}export default App;