react-native-webrtc remote stream does not work on android 5.0.2
See original GitHub issueI am trying to make a video call app using react-native-webrtc
. it is working well both local and remote stream
on android 8.1
But remote stream
it is not working on android 5.0.2
import React, {useState, useEffect} from 'react';
import {StyleSheet, SafeAreaView, TouchableOpacity, Text, View} from 'react-native';
import styles from '.styles';
import {
RTCPeerConnection,
RTCIceCandidate,
RTCSessionDescription,
RTCView,
MediaStream,
MediaStreamTrack,
mediaDevices,
registerGlobals
} from 'react-native-webrtc';
let globalStreamState = null, globalRemoteStreamState = null;
export default App = props => {
const [stream, setStream] = useState({toURL:()=>null});
const [streamRemote, setStreamRemote] = useState({toURL:()=>null});
globalStreamState = setStream;
globalRemoteStreamState = setStreamRemote;
console.log('App rendered..');
return (
<View style={styles.container}>
<View style={{flex: 1, flexDirection: 'row'}}>
<TouchableOpacity style={styles.callButton} onPress={makeLogin}>
<Text style={styles.callText}>LOGIN</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.callButton} onPress={callSomeone}>
<Text style={styles.callText}>CALL</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.callButton} onPress={cancelCall}>
<Text style={styles.callText}>Cancell Call</Text>
</TouchableOpacity>
</View>
<RTCView style={{flex: 1, width: '100%', height: '100%'}} streamURL={stream.toURL()} />
<RTCView style={{flex: 1, width: '100%', height: '100%'}} streamURL={streamRemote.toURL()} />
</View>
);
}
var name = "";
var connectedUser = "";
var conn = new WebSocket('ws://192.168.38.152:8000');
conn.onopen = function () {
console.log("Connected to the signaling server");
}
conn.onmessage = function (msg) {
var data = JSON.parse(msg.data);
switch(data.type) {
case "login":
handleLogin(data.success);
break;
case "offer":
handleOffer(data.offer, data.name);
break;
case "answer":
handleAnswer(data.answer);
break;
case "candidate":
handleCandidate(data.candidate);
break;
case "leave":
handleLeave();
break;
default:
break;
}
}
conn.onerror = function (err) {
console.log("Got error", err);
};
function send(message) {
//attach the other peer username to our messages
if (connectedUser) {
message.name = connectedUser;
}
conn.send(JSON.stringify(message));
}
var yourConn;
var stream;
const makeLogin = ()=> {
name = "muhammad";
send({ type: "login", name: name });
}
async function handleLogin(success) {
if (success === false) {
alert("Ooops...try a different username");
} else {
let isFront = true;
const sourceInfos = await mediaDevices.enumerateDevices();
let videoSourceId;
for (let i = 0; i < sourceInfos.length; i++) {
const sourceInfo = sourceInfos[i];
if(sourceInfo.kind == "videoinput" && sourceInfo.facing == (isFront ? "front" : "environment")) {
videoSourceId = sourceInfo.deviceId;
}
}
mediaDevices.getUserMedia({
audio: true,
video: {
mandatory: { minWidth: 320, minHeight: 200, minFrameRate: 30 },
facingMode: (isFront ? "user" : "environment"),
optional: (videoSourceId ? [{sourceId: videoSourceId}] : [])
}
})
.then(myStream => {
stream = myStream;
globalStreamState(stream);
var configuration = {"iceServers": [{ "url": "stun:stun.l.google.com:19302" }]};
yourConn = new RTCPeerConnection(configuration);
yourConn.addStream(stream);
yourConn.onaddstream = e => {
globalRemoteStreamState(e.stream);
};
yourConn.onicecandidate = event => {
if (event.candidate) {
send({
type: "candidate",
candidate: event.candidate
});
}
};
})
.catch(error => {
console.log("Error in handleLogin: ", error);
});
}
}
const callSomeone = ()=> {
var callToUsername = "wafa";
if (callToUsername.length > 0) {
connectedUser = callToUsername;
yourConn.createOffer().then(desc => {
yourConn.setLocalDescription(desc).then(() => {
send({ type: "offer", offer: yourConn.localDescription});
});
});
}
}
function handleOffer(offer, name) {
connectedUser = name;
yourConn.setRemoteDescription(new RTCSessionDescription(offer));
yourConn.createAnswer().then(answer => {
yourConn.setLocalDescription(answer).then(()=> {
send({ type: "answer", answer: answer});
});
});
}
function handleAnswer(answer) {
yourConn.setRemoteDescription(new RTCSessionDescription(answer));
}
function handleCandidate(candidate) {
yourConn.addIceCandidate(new RTCIceCandidate(candidate));
}
const cancelCall = ()=> {
send({
type: "leave"
});
handleLeave();
}
function handleLeave() {
connectedUser = null;
yourConn.close();
yourConn.onicecandidate = null;
yourConn.onaddstream = null;
};
Issue Analytics
- State:
- Created 4 years ago
- Comments:50 (19 by maintainers)
Top Results From Across the Web
react-native-webrtc remote stream does not work on android ...
I am trying to make a video call app using react-native-webrtc . it is working well both local and remote stream on android...
Read more >Remote only does not work on real device android 5.0.2
I am trying to make a video call app using react-native-webrtc. it is working well both local and remote stream on.
Read more >Bug listing with status RESOLVED with resolution OBSOLETE ...
Bug:1523 - "[IDEA] Offload work by distributing trivial ebuild maintenance ... script for is not working" status:RESOLVED resolution:OBSOLETE severity:major ...
Read more >Voice Android SDK Changelog | Twilio
This branch will no longer receive fixes for critical issues. ... The voice SDK now validates full remote domain names while setting up...
Read more >Changes from 5.0.2_r3 (LRX22L) to 5.1.0_r1 (LMY47D)
3ea1269 : audio: fix direct output channel mask reporting ... test This test is streaming video and audio between two bots using webrtc...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
The way we handle it is also via having offer creation within the negotiation hook. When you create the peer connection and then add your stream to it, the negotiation hook gets called. We also have a simple check within the negotiation hook to prevent the hook running if you aren’t the call initiator.
Pretty much when you call someone, create the peer connection, hook everything up with the peer connection and then add the stream. Seems to work pretty well.
@muhammadwafa is this still an issue for you? Closing for now