ontrack | : money_with_wings : A simple self-hosted budgeting app | Dashboard library

import React, { useEffect } from "react";
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TouchableOpacity,
  Dimensions,
} from "react-native";

import {
  RTCPeerConnection,
  RTCIceCandidate,
  RTCSessionDescription,
  RTCView,
  MediaStream,
  MediaStreamTrack,
  mediaDevices,
  registerGlobals,
} from "react-native-webrtc";

import io from "socket.io-client";

const dimensions = Dimensions.get("window");

const pc_config = {
  iceServers: [
    // {
    //   urls: 'stun:[STUN_IP]:[PORT]',
    //   'credentials': '[YOR CREDENTIALS]',
    //   'username': '[USERNAME]'
    // },
    {
      urls: "stun:stun.l.google.com:19302",
    },
  ],
};

function App(props) {
  const [localStream, SetlocalStream] = useState(null);
  const [remoteStream, SetremoteStream] = useState(null);
  const socket = useRef(
    io.connect("https://daae-171-61-.ngrok.io/webrtcPeer", {
      path: "/io/webrtc",
      query: {},
    })
  );
  const sdp = useRef(null);
  const pc = useRef(new RTCPeerConnection(pc_config));
  const candidates = useRef([]);

  useEffect(() => {
    socket.current.on("connection-success", (success) => {
      console.log(success);
    });

    socket.current.on("offerOrAnswer", (sdp) => {
      sdp.current = JSON.stringify(sdp);

      // set sdp as remote description
      pc.current.setRemoteDescription(new RTCSessionDescription(sdp));
    });

    socket.current.on("candidate", (candidate) => {
      // console.log('From Peer... ', JSON.stringify(candidate))
      // candidates.current = [...candidates.current, candidate]
      pc.current.addIceCandidate(new RTCIceCandidate(candidate));
    });

    pc.current = new RTCPeerConnection(pc_config);

    pc.current.onicecandidate = (e) => {
      // send the candidates to the remote peer
      // see addCandidate below to be triggered on the remote peer
      if (e.candidate) {
        // console.log(JSON.stringify(e.candidate))
        sendToPeer("candidate", e.candidate);
      }
    };

    // triggered when there is a change in connection state
    pc.current.oniceconnectionstatechange = (e) => {
      console.log(e);
    };

    pc.current.onaddstream = (e) => {
      debugger;
      // this.remoteVideoref.current.srcObject = e.streams[0]
      SetremoteStream(e.stream);
    };

    const success = (stream) => {
      console.log(stream.toURL());
      SetlocalStream(stream);
      pc.current.addStream(stream);
    };

    const failure = (e) => {
      console.log("getUserMedia Error: ", e);
    };

    let isFront = true;
    mediaDevices.enumerateDevices().then((sourceInfos) => {
      console.log(sourceInfos);
      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;
        }
      }

      const constraints = {
        audio: true,
        video: {
          mandatory: {
            minWidth: 500, // Provide your own width, height and frame rate here
            minHeight: 300,
            minFrameRate: 30,
          },
          facingMode: isFront ? "user" : "environment",
          optional: videoSourceId ? [{ sourceId: videoSourceId }] : [],
        },
      };

      mediaDevices.getUserMedia(constraints).then(success).catch(failure);
    });
  }, []);

  const sendToPeer = (messageType, payload) => {
    socket.current.emit(messageType, {
      socketID: socket.current.id,
      payload,
    });
  };

  const createOffer = () => {
    console.log("Offer");

    // https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createOffer
    // initiates the creation of SDP
    pc.current.createOffer({ offerToReceiveVideo: 1 }).then((sdp) => {
      // console.log(JSON.stringify(sdp))

      // set offer sdp as local description
      pc.current.setLocalDescription(sdp);

      sendToPeer("offerOrAnswer", sdp);
    });
  };

  const createAnswer = () => {
    console.log("Answer");
    pc.current.createAnswer({ offerToReceiveVideo: 1 }).then((sdp) => {
      // console.log(JSON.stringify(sdp))

      // set answer sdp as local description
      pc.current.setLocalDescription(sdp);

      sendToPeer("offerOrAnswer", sdp);
    });
  };

  const setRemoteDescription = () => {
    // retrieve and parse the SDP copied from the remote peer
    const desc = JSON.parse(sdp.current);

    // set sdp as remote description
    pc.current.setRemoteDescription(new RTCSessionDescription(desc));
  };

  const addCandidate = () => {
    // retrieve and parse the Candidate copied from the remote peer
    // const candidate = JSON.parse(this.textref.value)
    // console.log('Adding candidate:', candidate)

    // add the candidate to the peer connection
    // pc.current.addIceCandidate(new RTCIceCandidate(candidate))

    candidates.current.forEach((candidate) => {
      console.log(JSON.stringify(candidate));
      pc.current.addIceCandidate(new RTCIceCandidate(candidate));
    });
  };

  const remoteVideo = remoteStream ? (
    
  ) : (
    
      
        Waiting for Peer connection ...
      
    
  );

  return (
    
      
      
        
          
            
              Call
            
          
        
        
          
            
              Answer
            
          
        
      
      
        
          
             localStream._tracks[1]._switchCamera()}
            >
              
                
              
            
          
        
        
          
            {remoteVideo}
          
        
      
    
  );
}

export default App;

const styles = StyleSheet.create({
  buttonsContainer: {
    flexDirection: "row",
  },
  button: {
    margin: 5,
    paddingVertical: 10,
    backgroundColor: "lightgrey",
    borderRadius: 5,
  },
  textContent: {
    fontFamily: "Avenir",
    fontSize: 20,
    textAlign: "center",
  },
  videosContainer: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
  },
  rtcView: {
    width: 100, //dimensions.width,
    height: 200, //dimensions.height / 2,
    backgroundColor: "black",
  },
  scrollView: {
    flex: 1,
    // flexDirection: 'row',
    backgroundColor: "teal",
    padding: 15,
  },
  rtcViewRemote: {
    width: dimensions.width - 30,
    height: 200, //dimensions.height / 2,
    backgroundColor: "black",
  },
});