****************MAKING VIDEO CALL ********************

 STEP-1:

TO GET MEDIA (AUDIO,VIDEO) WE USE NAVIGATOR

AND TO STREAM IT WE USE VIDEO TAG AND TO ADD THAT STREAM WE USE localVideoRef.current.srcObject


import React, { useEffect, useRef, useState } from "react";
import "../styles/VC.css";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
export default function VideoConference() {
  let [username, setUsername] = useState("");
  let [askForUsername, setAskForUsername] = useState(true);
  let [videoAvailable, setVideoAvailable] = useState(false);
  let [audioAvailable, setAudioAvailable] = useState(false);
  const localVideoRef = useRef();

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

  const getPermissions = async () => {
    let videoPermission = await navigator.mediaDevices.getUserMedia({
      video: true,
    });
    if (videoPermission) {
      setVideoAvailable(true);
      console.log("video permission granted!");
    } else {
      console.log("video permission denied!");
    }
    let audioPermission = await navigator.mediaDevices.getUserMedia({
      audio: true,
    });
    if (audioPermission) {
      setAudioAvailable(true);
      console.log("audio Permission granted!");
    } else {
      console.log("audio permission denied!");
    }
    const userMedia = await navigator.mediaDevices
      .getUserMedia({
        audio: true,
        video: true,
      })
      localVideoRef.current.srcObject = userMedia;
  };
  console.log(localVideoRef);
  let connect = () => {
    setAskForUsername(false);
  };
  return (
    <>
      {askForUsername ? (
        <>
          <TextField
            className="inputsRequired"
            label="enter username"
            value={username}
            onChange={(e) => {
              setUsername(e.target.value);
            }}
          />
          <Button variant="contained" onClick={connect}>
            connect
          </Button>
          <video ref={localVideoRef} autoPlay playsInline></video>
        </>
      ) : (
        <></>
      )}
    </>
  );
}






import React, { useEffect, useRef, useState } from "react";
import "../styles/VC.css";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import { io, Socket } from "socket.io-client";

export default function VideoConference() {
  let [username, setUsername] = useState("");
  let [askForUsername, setAskForUsername] = useState(true);
  let [videoAvailable, setVideoAvailable] = useState(false);
  let [audioAvailable, setAudioAvailable] = useState(false);
  const localVideoRef = useRef();
  const socketRef = useRef();

  useEffect(() => {
    getPermissions();
    socketRef.current = io.connect("https://localhost:8080");
    socketRef.current.on("signal", handleSignal);
  }, []);

//STEP-1
  const getPermissions = async () => {
    try {
      let videoPermission = await navigator.mediaDevices.getUserMedia({
        video: true,
      });
      if (videoPermission) {
        setVideoAvailable(true);
        console.log("video permission granted!");
      } else {
        console.log("video permission denied!");
      }
      let audioPermission = await navigator.mediaDevices.getUserMedia({
        audio: true,
      });
      if (audioPermission) {
        setAudioAvailable(true);
        console.log("audio Permission granted!");
      } else {
        console.log("audio permission denied!");
      }
      const userMedia = await navigator.mediaDevices.getUserMedia({
        audio: true,
        video: true,
      });
      if (userMedia) {
        window.localStream = userMedia;
        if (localVideoRef.current) {
          localVideoRef.current.srcObject = userMedia;
        }
      }
    } catch (e) {
      console.log(e);
    }
  };
  console.log(localVideoRef.current.srcObject.getTracks());

// STEP-3 ADDING MEDIA TRACKS TO CONNECTION

  let addTracks = async () => {
    const stream = localVideoRef.current.srcObject;
    stream.getTracks().forEach((track) => {
      peerConnection.addTrack(track, stream);
    });
  };

// STEP-4 CREATING OFFER
  let CreatingOffer = async (fromId) => {
    try {
      let offer = await peerConnection.createOffer();
      await peerConnection.setLocalDescription(offer);
     
// STEP-5 SENDING OFFER
socketRef.current.emit(
        "signal",
        fromId,
        JSON.stringify({ sdp: peerConnection.current.localDescription })
      );
    } catch (e) {
      console.log(e);
    }
  };


  let handleSignal = async (fromId, message) => {
    let signal = JSON.parse(message);
    try {
      if (signal.sdp.type === "offer") {
// STEP-6 RECEIVING OFFER
        await peerConnection.setRemoteDescription(
          new RTCSessionDescription(signal.sdp)
        );
// STEP-7 CREATING ANSWER
        const answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);

// STEP-8 SENDING ANSWER BACK
        socketRef.current.emit(
          "signal",
          fromId,
          JSON.stringify({
            sdp: peerConnection.localDescription,
          })
        );
      } else if (signal.sdp.type === "answer") {
        await peerConnection.setRemoteDescription(
          new RTCSessionDescription(signal.sdp)
        );
      }
    } catch (e) {
      console.log(e);
    }
  };

  let connect = async () => {
    setAskForUsername(false);

    //STEP-2 ESTABLISHING CONNECTION
    const peerConnection = new RTCPeerConnection({
      iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
    });

STEP-9 HANDLING ICE CANDIDATE
    peerConnection.event.onincecandidate = () => {
      if (event.candidate) {
        socketRef.current.emit(
          "signal",
          JSON.stringify({ ice: event.candidate })
        );
      }
    };
// STEP-10 DISPLAYING
    peerConnection.ontrack = (event) => {
      localVideoRef.srcObject = event.streams[0];
    };
    await addTracks();
    await CreatingOffer();
  };
  return (
    <>
      {askForUsername ? (
        <>
          <TextField
            className="inputsRequired"
            label="enter username"
            value={username}
            onChange={(e) => {
              setUsername(e.target.value);
            }}
          />
          <Button variant="contained" onClick={connect}>
            connect
          </Button>
          <video ref={localVideoRef} autoPlay playsInline></video>
        </>
      ) : (
        <></>
      )}
    </>
  );
}













Comments

Post a Comment

Popular posts from this blog

MIDDLEWARE.JS

  const User = require ( "../models/userModel" ); require ( "dotenv" ). config (); const jwt = require ( "jsonwebtoken" ); module . exports . userVerification = async ( req , res ) => {   console . log ( req . cookies );   const token = req . cookies . token ;   if ( ! token ) {     return res . status ( 404 ). json ({ message : "authentication failed!" });   }   jwt . verify ( token , process . env . TOKEN_KEY , async ( err , data ) => {     if ( err ) {       return res . status ( 400 ). json ({ message : "Invalid Token!" });     }     try {       console . log ( data );       const foundUser = await User . findById ( data . id );       if ( foundUser ) {         return res . status ( 200 ). json ({ message : "authentication successful!" });       } else {         r...
Read more

MODELS

 USER MODEL const mongoose = require ( "mongoose" ); const Schema = mongoose . Schema ; const Model = mongoose . model ; const bcrypt = require ( "bcryptjs" ); const userSchema = new Schema ({   name : {     type : String ,     required : true ,   },   username : {     type : String ,     required : true ,     unique : true ,   },   email : {     type : String ,     required : true ,     unique : true ,   },   password : {     type : String ,     required : true ,   }, }); userSchema . pre ( "save" , async function ( next ) {   if ( this . isModified ( "password" )) {     this . password = await bcrypt . hash ( this . password , 10 );   }   next (); }); const User = new Model ( "User" , userSchema ); module . exports = User ; MEETING MODEL const mongoose = require ( "mongoose...
Read more

AUTHENTICATION PAGE

 AUTH.JSX import React , { useState , useEffect } from "react" ; import axios from "axios" ; import Box from "@mui/material/Box" ; import IconButton from "@mui/material/IconButton" ; import Button from "@mui/material/Button" ; import ButtonGroup from "@mui/material/ButtonGroup" ; import InputAdornment from "@mui/material/InputAdornment" ; import TextField from "@mui/material/TextField" ; import Visibility from "@mui/icons-material/Visibility" ; import VisibilityOff from "@mui/icons-material/VisibilityOff" ; import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined" ; import { useSnackbar } from "notistack" ; import Footer from "./Footer" ; import styles from "../styles/Auth.module.css" ; import { useNavigate } from "react-router-dom" ; import { Link } from "react-router-dom" ;...
Read more