question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-native-webrtc remote stream does not work on android 5.0.2

See original GitHub issue

I 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:closed
  • Created 4 years ago
  • Comments:50 (19 by maintainers)

github_iconTop GitHub Comments

1reaction
8BallBomBomcommented, Mar 1, 2020

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.

0reactions
danjenkinscommented, Jul 2, 2020

@muhammadwafa is this still an issue for you? Closing for now

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found