ADDING ICONS

 WE ADD ICONS TO CONTROL THE AUDIO, VIDEO AND TO END THE CALL.

VIDEOCONFERENCE.JSX

mport { Badge, IconButton } from "@mui/material";
import ScreenShareTwoToneIcon from "@mui/icons-material/ScreenShareTwoTone";
import StopScreenShareTwoToneIcon from "@mui/icons-material/StopScreenShareTwoTone";
import SettingsVoiceSharpIcon from "@mui/icons-material/SettingsVoiceSharp";
import MicOffOutlinedIcon from "@mui/icons-material/MicOffOutlined";
import VideocamOffOutlinedIcon from "@mui/icons-material/VideocamOffOutlined";
import ForumOutlinedIcon from "@mui/icons-material/ForumOutlined";
import CallEndOutlinedIcon from "@mui/icons-material/CallEndOutlined";
import VideocamOutlinedIcon from "@mui/icons-material/VideocamOutlined";
import ForumIcon from "@mui/icons-material/Forum";


const [videoAvailable, setVideoAvailable] = useState(true);
  const [audioAvailable, setAudioAvailable] = useState(true);


const handleMic = () => {
    setAudio(!audio);
  };

  const handleVideo = () => {
    setVideo(!video);
  };
  let handleCallEnd = () => {
    try {
      let tracks = localVideoRef.current.srcObject.getTracks();
      tracks.forEach((track) => track.stop());
    } catch (e) {
      console.log(e);
    }
    (window.location.href = "/");
  };


<div className={styles.Icons}>
              <IconButton onClick={handleMic} style={{ color: "white" }}>
                {audio === true ? (
                  <SettingsVoiceSharpIcon />
                ) : (
                  <MicOffOutlinedIcon />
                )}
              </IconButton>
              <IconButton onClick={handleVideo} style={{ color: "white" }}>
                {video === true ? (
                  <VideocamOutlinedIcon />
                ) : (
                  <VideocamOffOutlinedIcon />
                )}
              </IconButton>
              <IconButton
                onClick={handleScreenShare}
                style={{ color: "white" }}
              >
                {screen === true ? (
                  <StopScreenShareTwoToneIcon />
                ) : (
                  <ScreenShareTwoToneIcon />
                )}
              </IconButton>
              <IconButton onClick={handleCallEnd} style={{ color: "red" }}>
                <CallEndOutlinedIcon />{" "}
              </IconButton>
              <Badge
                color="secondary"
                onClick={() => setShowChat(!showChat)}
                badgeContent={newMessages}
                max={999}
                sx={{
                  "&:hover": {
                    opacity: "0.5",
                    cursor: "pointer",
                  },
                }}
              >
                {" "}
                {showChat ? (
                  <ForumOutlinedIcon style={{ color: "white" }} />
                ) : (
                  <ForumIcon style={{ color: "white" }} />
                )}
              </Badge>
            </div>


.Icons {
  bottom: 0;
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 10;
  background-color: rgb(30, 29, 29);
}








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