*********SCREEN SHARING *********

 TO SHARE THE SCREEN WE USE A NAVIGATOR PROPERTY CALLED getDisplayMedia()

VIDEOCONFERENCE.JSX

 <IconButton
                onClick={handleScreenShare}
                style={{ color: "white" }}
              >
                {screen === true ? (
                  <StopScreenShareTwoToneIcon />
                ) : (
                  <ScreenShareTwoToneIcon />
                )}
              </IconButton>


SCREEN SHARE FUNCTION

  const handleScreenShare = () => {
    console.log(screen);
    if (screen) {
      StopScreenShare();
    } else {
      if (navigator.mediaDevices.getDisplayMedia) {
        navigator.mediaDevices
          .getDisplayMedia({ video: true, audio: true })
          .then(getDisplayMediaSuccess)
          .catch((e) => console.log(e));
      }
      setScreen(true);
    }
  };



  let getDisplayMediaSuccess = (stream) => {

    //TO STOP EXISTING TRACKS
    try {
      window.localStream.getTracks().forEach((track) => track.stop());
    } catch (e) {
      console.log(e);
    }

    //ASSIGNING THE CURRENT STREAM
    window.localStream = stream;
    localVideoRef.current.srcObject = stream;


    Object.entries(connections).forEach(([id, conn]) => {
      if (id !== socketIdRef.current) {
        const senders = conn.getSenders();
        stream.getTracks().forEach((track) => {
          const sender = senders.find((s) => s.track?.kind === track.kind);

          // IF SENDER EXISTS WE REPLACE THE TRACK
          if (sender) {
            sender.replaceTrack(track);
          } else {
            // WE ADD A NEW TRACK
            conn.addTrack(track, stream);
          }
          // CREATNG OFFER
          conn.createOffer().then((description) => {
            // SETTING LOCAL DESCRIPTION
            conn
              .setLocalDescription(description)

              // EMITTING SIGNAL
              .then(() => {
                socketRef.current.emit(
                  "signal",
                  id,
                  JSON.stringify({ sdp: conn.localDescription })
                );
              })
              .catch((e) => console.log(e));
          });
        });
      }
    });

    // ON ENDING , WE STOP SCREEN SHARING
    stream.getTracks().forEach((track) => {
      track.onended = () => {
        console.log("stopped");
        StopScreenShare();
      };
    });
  };


STOPPING SCREEN SHARING

 let StopScreenShare = () => {
    setScreen(false);
    try {
      //STOPPING THE STREAM (SCREEN SHARING)
      let tracks = localVideoRef.current.srcObject.getTracks();
      tracks.forEach((track) => track.stop());
    } catch (e) {
      console.log(e);
    }

    // ASSIGNING BACK THE CAMERA STREAM
    navigator.mediaDevices
      .getUserMedia({ video: true, audio: true })
      .then((camStream) => {
        window.localStream = camStream;
        localVideoRef.current.srcObject = camStream;

        Object.entries(connections).forEach(([id, conn]) => {
          if (id === socketIdRef.current) return;
          const senders = conn.getSenders();

          camStream.getTracks().forEach((track) => {
            const sender = senders.find((s) => s.track?.kind === track.kind);
            if (sender) {
              sender.replaceTrack(track);
            } else {
              conn.addTrack(track, camStream);
            }
          });

          conn
            .createOffer()
            .then((desc) => conn.setLocalDescription(desc))
            .then(() => {
              socketRef.current.emit(
                "signal",
                id,
                JSON.stringify({
                  sdp: conn.localDescription,
                })
              );
            });
        });
      })
      .catch((e) => console.log("Webcam error:", e));
  };







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