response-native-webrt c удаленный поток не работает на android 5.0.2 - PullRequest
0 голосов
/ 28 февраля 2020

Я пытаюсь сделать приложение видеозвонка, используя 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; 
};
...