Can we use react-webcam and webrtc together for sending media stream to server for making a video call?

Question

In OnGoingCallModal.jsx, I am using react-webcam for displaying my video when clicked on video call icon. I want to share my video stream to server so that the backend developer can send my request to the other user. How can I implement this functionality of video calling using webrtc and socket.io. I have attached the code of OnGoingCallModal.jsx. Thanks.

import React from "react";
import {useRef} from 'react';
import Webcam from 'react-webcam';


import {
  Button,
  Center,
  Image,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  useDisclosure,
} from "@chakra-ui/react";
import { AspectRatio } from "@chakra-ui/react";

import { io } from "socket.io-client";

import {
  faCommentAlt,
  faEllipsisH,
  faInfo,
  faPhone,
  faMicrophoneAlt,
  faVideo,
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

// const callButtonClickHandler = () => {};
const videoConstraints = {
    width: 1280,
    height: 720,
    facingMode: "user",
    video:true
};

const OnGoingCallModal = (props) => {
;



  const { isOpen, onOpen, onClose } = useDisclosure()

  const webcamRef = useRef(null);

  console.log(webcamRef)



  return (
    <>
    <Center onClick={onOpen} cursor={'pointer'} borderRadius={'full'} boxSize={'8'} bgColor={'blue.700'}>
                <FontAwesomeIcon color='white' icon={faVideo} />
            </Center>

            <Modal size={'xl'} closeOnOverlayClick={false} isOpen={isOpen} onClose={onClose}>
                <ModalOverlay />
                <ModalContent borderRadius={'lg'}  >
                    <ModalHeader>Calling...</ModalHeader>
                    <ModalCloseButton />
                    <ModalBody pb={6}>
                        {
                            
                                <Webcam
                                    audio={false}
                                    height={720}
                                    ref={webcamRef}
                                    
                                    width={1280}
                                    style={{ borderRadius: '10px' }}
                                    videoConstraints={videoConstraints}
                                />
                        }


                    </ModalBody>

                     <ModalFooter>
                        <Button  colorScheme='red' mr={3} onClick={onClose}>
                            End Call
                        </Button>
                    </ModalFooter> 
                </ModalContent>
            </Modal>

    </>
  );
};

export default OnGoingCallModal;