Я пытаюсь сделать приложение видеозвонка, используя react-native-webrtc
. он работает хорошо both local and remote stream
на android 8.1
Но remote stream
не работает на 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;
};