peerjs remote video not streaming tried all things in react native

[Smitchavan]

Please, check for existing issues to avoid duplicates.

• No similar issues found.

What happened?

import React, {useEffect, useState} from 'react';
import {View, Button, TextInput} from 'react-native';
import Peer from 'react-native-peerjs';
import {RTCPeerConnection, mediaDevices, RTCView} from 'react-native-webrtc';

const iceServers = {
  iceServers: [
    {
      url: 'stun:stun.l.google.com:19302',
    },
  ],
};
const options = {
  constraints: {
    mandatory: {
      OfferToReceiveAudio: true,
      OfferToReceiveVideo: true,
    },
    offerToReceiveAudio: 1,
    offerToReceiveVideo: 1,
  },
};

const VideoCallScreen = () => {
  const [localStream, setLocalStream] = useState(null);
  const [remoteStream, setRemoteStream] = useState();
  const [peer, setPeer] = useState(null);
  const [myPeer] = useState(() => new Peer());
  const [inputValue, setinputValue] = useState('');
  const [connected, setConnected] = useState(false);
  const [peerid, setPeerid] = useState('');

  useEffect(() => {
    const initPeer = async () => {
      const localStream = await mediaDevices.getUserMedia({
        video: true,
        audio: true,
      });
      setLocalStream(localStream);
    };

    initPeer();
    myPeer.on('open', id => {
      setPeerid(id);
      console.log('My peer ID is: ' + id);
      myPeer.on('call', call => {
        call.answer(localStream);
        call?.on('stream', rStream => {
          console.log('Local peer receives stream from remote peer');
          setRemoteStream(rStream);
        });
      });
    });

    return () => {};
  }, []);

  const handleCall = () => {
    // const con = peer.connect(inputValue);

    console.log(inputValue, 'value of the unooput');
    const outgoingcall = myPeer.call(inputValue, localStream, options);

    outgoingcall.on('stream', rStream => {
      console.log('Local peer receives stream from remote peer');
      setRemoteStream(rStream);
    });
    setConnected(true);
  };

  return (
    <View style={{flex: 1}}>
      {!connected && <Button title="Call" onPress={handleCall} />}
      <Button title="PeerId" onPress={() => console.log(peerid)} />
      <TextInput
        value={inputValue}
        onChangeText={text => setinputValue(text)}
        style={{backgroundColor: '#000', color: '#FFF'}}
      />
      {localStream && (
        <RTCView
          streamURL={localStream.toURL()}
          style={{width: 500, height: 300}}
        />
      )}

      <RTCView
        streamURL={remoteStream?.toURL()}
        style={{width: 500, height: 500}}
      />
    </View>
  );
};

export default VideoCallScreen;

How can we reproduce the issue?

No response

What do you expected to happen?

this is my code i am unable to get remote users video i am trying it since a long time what can be done to resolve this

Environment setup

• OS:windows
• Platform:windows
• Browser:chrome

Is this a regression?

No response

Anything else?

rn-webrtc:pc:DEBUG 1 ctor +18s
LOG rn-webrtc:pc:DEBUG 1 createOffer +25ms
LOG rn-webrtc:pc:DEBUG 1 createOffer OK +122ms
LOG rn-webrtc:pc:DEBUG 1 setLocalDescription +6ms
LOG rn-webrtc:pc:DEBUG 1 setLocalDescription OK +69ms
LOG rn-webrtc:pc:DEBUG 1 ctor +20s
LOG rn-webrtc:pc:DEBUG 1 setRemoteDescription +8ms
LOG rn-webrtc:pc:DEBUG 1 addIceCandidate +3ms
LOG rn-webrtc:pc:DEBUG 1 addIceCandidate +1ms
LOG rn-webrtc:pc:DEBUG 1 addIceCandidate +1ms
LOG rn-webrtc:pc:DEBUG 1 addIceCandidate +1ms
LOG rn-webrtc:pc:DEBUG 1 addIceCandidate +1ms
LOG rn-webrtc:pc:DEBUG 1 addIceCandidate +1ms
LOG rn-webrtc:pc:DEBUG 1 setRemoteDescription OK +26ms
LOG rn-webrtc:pc:DEBUG 1 createAnswer +2ms
LOG rn-webrtc:pc:DEBUG 1 setLocalDescription +6ms
LOG rn-webrtc:pc:DEBUG 1 setLocalDescription OK +31ms
LOG rn-webrtc:pc:DEBUG 1 setRemoteDescription +588ms
LOG rn-webrtc:pc:DEBUG 1 addIceCandidate +27ms
LOG rn-webrtc:pc:DEBUG 1 addIceCandidate +5ms
LOG rn-webrtc:pc:DEBUG 1 setRemoteDescription OK +5ms
LOG rn-webrtc:pc:DEBUG 1 addIceCandidate +49ms

i am getting this logs