Getting pc.iceConnectionState Checking, failed in pc.oniceconnectionstatechange event in webRTC

Question

I'm using webrtc for video calling in react native app.
If I call to someone else and receivers receives call then I get stream of receiver but there is a problem at receiver side.
Receiver gets remotestream but it shows blank view.

import AsyncStorage from '@react-native-async-storage/async-storage';
    import {
      RTCIceCandidate,
      RTCPeerConnection,
      RTCSessionDescription,
    } from 'react-native-webrtc';
    import io from '../scripts/socket.io';
    const PC_CONFIG = {
      iceServers: [
        { url: 'stun:motac85002'},
      ],
    };
    export const pc = new RTCPeerConnection(PC_CONFIG);
    // Signaling methods
    export const onData = data => {
      handleSignalingData(data.data);
    };
    const ENDPOINT = 'http://52.52.75.250:3000/';
    const socket = io(ENDPOINT);
    //  const PeerConnection = () => {
    const sendData = async data => {
      const roomId = await AsyncStorage.getItem('roomId');
      const userId = parseInt(await AsyncStorage.getItem('user_id'));
      socket.emit('data', roomId, userId, data);
    };
    export const createPeerConnection = async(stream, setUsers) => {
      try {
        pc.onicecandidate = onIceCandidate;
        const userId = parseInt(await AsyncStorage.getItem('user_id'));
        pc.onaddstream = e => {
          setUsers(e.stream);
        };
        pc.addStream(stream)
       pc.oniceconnectionstatechange = function () {
      // console.log('ICE state: ', pc);
      console.log('iceConnectionState', pc.iceConnectionState);
      if (pc.iceConnectionState === "failed" ||
      pc.iceConnectionState === "disconnected" ||
      pc.iceConnectionState === "closed") {
        console.log('iceConnectionState  restart', userId);
          //  console.log('ICE state: ', pc);
    // Handle the failure
    pc.restartIce();
  }
    };
        console.log('PeerConnection created',      userId);
        // sendOffer();
      } catch (error) {
        console.error('PeerConnection failed: ', error);
      }
    };
    export const callSomeone = () => {
      pc.createOffer({}).then(setAndSendLocalDescription, error => {
        console.error('Send offer failed: ', error);
      });
    };
    const setAndSendLocalDescription = sessionDescription => {
      pc.setLocalDescription(sessionDescription);
      sendData(sessionDescription);
    };
    const onIceCandidate = event => {
      if (event.candidate) {
        sendData({
          type: 'candidate',
          candidate: event.candidate,
        });
      }
    };
    export const disconnectPeer = () =>{
      pc.close();
    }
    const sendAnswer = () => {
      pc.createAnswer().then(setAndSendLocalDescription, error => {
        console.error('Send answer failed: ', error);
      });
    };
    export const handleSignalingData = data => {
      switch (data.type) {
        case 'offer':
          pc.setRemoteDescription(new RTCSessionDescription(data));
          sendAnswer();
          break;
        case 'answer':
          pc.setRemoteDescription(new RTCSessionDescription(data));
          break;
        case 'candidate':
          pc.addIceCandidate(new RTCIceCandidate(data.candidate));
          break;
      }
    };
    // }
    // export default PeerConnection

Can anyone please tell me why at receiver side video stream is not displaying?
Also there is a remoteStream issue in motorola device. Why is this happening?

Answer 1

This statement:

const PC_CONFIG = {
  iceServers: [
    { url: 'stun:motac85002'},
  ],
};

Has two potential issues:

First, the parameter for the iceServers object should be urls, not url. (Although it wouldn't surprise me if the browsers accepted either).

Second, as I mentioned in comments to your question, the STUN address itself looks to be a local address instead of an Internet address. That might explain why you aren't seeing any srflx or UDP candidates in the SDP. And as such, that might explain connectivity issues.

So instead of the above, could you try this:

const PC_CONFIG= {iceServers: [{urls: "stun:stun.stunprotocol.org"}]};