Praudyog

import React, { useState, useEffect } from 'react';
import { Text, StyleSheet, Button, View } from 'react-native';
import {
  RTCPeerConnection,
  RTCView,
  RTCIceCandidate,
  RTCSessionDescription,
  MediaStream,
  mediaDevices,
  
} from 'react-native-webrtc';
import firestore from '@react-native-firebase/firestore';
import CallActionBox from '../components/CallActionBox'
import { configuration } from '../config/webrtcConfig';

type StartCallScreenProps = {
  roomId: string;
  screens: { ROOM: string; CALL: string };
  setScreen: (screen: string) => void;
};

interface MediaDeviceInfo {
    deviceId: string;
    kind: 'audioinput' | 'audiooutput' | 'videoinput';
    label: string;
    groupId?: string;
    facing?: 'front' | 'environment';
  }

export default function StartCallScreen({ roomId, screens, setScreen }: StartCallScreenProps) {
  const [localStream, setLocalStream] = useState<MediaStream | null>(null);
  const [remoteStream, setRemoteStream] = useState<MediaStream | null>(null);
  const [cachedLocalPC, setCachedLocalPC] = useState<RTCPeerConnection | null>(null);
  const [isMuted, setIsMuted] = useState(false);
  const [isOffCam, setIsOffCam] = useState(false);

  useEffect(() => {
    startLocalStream();
  }, []);

  useEffect(() => {
    if (localStream) {
      startCall(roomId);
    }
  }, [localStream]);

  const endCall = async () => {
    if (cachedLocalPC) {
      const senders = cachedLocalPC.getSenders();
      senders.forEach((sender) => cachedLocalPC.removeTrack(sender));
      cachedLocalPC.close();
    }

    const roomRef = firestore().collection('room').doc(roomId);
    await roomRef.update({ answer: firestore.FieldValue.delete(), connected: false });

    setLocalStream(null);
    setRemoteStream(null);
    setCachedLocalPC(null);

    setScreen(screens.ROOM);
  };

  const startLocalStream = async () => {
    const isFront = true;
    const devices = await mediaDevices.enumerateDevices() as MediaDeviceInfo[];
    const facingMode = isFront ? 'user' : 'environment';
    const videoSourceId = devices.find(
      (device) => device.kind === 'videoinput' && device.facing === (isFront ? 'front' : 'environment')
    );

    const constraints = {
      audio: true,
      video: {
        mandatory: {
          minWidth: 500,
          minHeight: 300,
          minFrameRate: 30,
        },
        facingMode,
        optional: videoSourceId ? [{ sourceId: videoSourceId.deviceId }] : [],
      },
    };

    const newStream = await mediaDevices.getUserMedia(constraints);
    setLocalStream(newStream);
  };

  const startCall = async (id: string) => {
    const roomRef = firestore().collection('room').doc(id);
    const localPC: RTCPeerConnection = new RTCPeerConnection(configuration);

    localStream?.getTracks().forEach((track) => {
      localPC.addTrack(track, localStream);
    });

    const callerCandidatesCollection = roomRef.collection('callerCandidates');
    const calleeCandidatesCollection = roomRef.collection('calleeCandidates');

    (localPC as any).onicecandidate = (event: { candidate: RTCIceCandidate | null }) => {
        if (event.candidate) {
          callerCandidatesCollection.add(event.candidate.toJSON());
        }
      };
      

    (localPC as any).ontrack = (event: any) => {
    const newStream = new MediaStream();
    event.streams[0].getTracks().forEach((track: any) => {
        newStream.addTrack(track);
    });
    setRemoteStream(newStream);
    };

    const offer = await localPC.createOffer({});
    await localPC.setLocalDescription(offer);

    await roomRef.set({ offer, connected: false });

    roomRef.onSnapshot(async (snapshot) => {
      const data = snapshot.data();
      if (!localPC.remoteDescription && data?.answer) {
        const answer = new RTCSessionDescription(data.answer);
        await localPC.setRemoteDescription(answer);
      }      
    });

    calleeCandidatesCollection.onSnapshot((snapshot) => {
      snapshot.docChanges().forEach((change) => {
        if (change.type === 'added') {
          const data = change.doc.data();
          localPC.addIceCandidate(new RTCIceCandidate(data));
        }
      });
    });

    setCachedLocalPC(localPC);
  };

  const switchCamera = () => {
    localStream?.getVideoTracks().forEach((track) => track._switchCamera());
  };

  const toggleMute = () => {
    localStream?.getAudioTracks().forEach((track) => {
      track.enabled = !track.enabled;
      setIsMuted(!track.enabled);
    });
  };

  const toggleCamera = () => {
    localStream?.getVideoTracks().forEach((track) => {
      track.enabled = !track.enabled;
      setIsOffCam(!track.enabled);
    });
  };

  return (
    <View style={{ flex: 1 }}>
      {remoteStream && <RTCView style={{ flex: 1 }} streamURL={remoteStream.toURL()} objectFit="cover" />}
      {localStream && !isOffCam && (
        <RTCView
          style={{ width: 100, height: 150, position: 'absolute', top: 10, right: 10 }}
          streamURL={localStream.toURL()}
        />
      )}
      <View style={{ position: 'absolute', bottom: 0, width: '100%' }}>
        <CallActionBox switchCamera={switchCamera} toggleMute={toggleMute} toggleCamera={toggleCamera} endCall={endCall} />
      </View>
    </View>
  );
}