CREATING VIDEO CONFERENCE PAGE (ACTIVATING STUN SERVER) USING NAVIGATOR
STUN SERVER
A STUN server (Session Traversal Utilities for NAT) is a server used in real-time communication systems like WebRTC to help devices behind NAT (Network Address Translation) or firewalls discover their public IP address and port. It plays a crucial role in peer-to-peer (P2P) connections, like video calls, voice chats, or multiplayer games.
THEY ARE USED TO DISCOVER THE PUBLIC IP ADDRESS OF OUR DEVICES.
THERE ARE MANY NUMBER OF STUN SERVERS. REFER STUN SERVERS.
const server_Url = "http//:localhost:8080";
let connections = {};
const peerConfigConnections = {
iceServers: [{ urls: "stun.doublerobotics.com:3478" }],
};
WE CREATE THE REQUIRED ELEMENTS FOR THE PAGE AND A VIDEO MEETING.
const socketRef = useRef();
let socketIdRef = useRef();
let localVideoRef = useRef();
let [videoAvailable, setVideoAvailable] = useState(true);
let [audioAvailable, setAudioAvailable] = useState(true);
let [video, setVideo] = useState();
let [audio, setAudio] = useState();
let [screen, setScreen] = useState();
let [messages, setMessages] = useState([]);
let [message, setMessage] = useState("");
let [screenAvailable, setScreenAvailable] = useState();
let [newMessages, setNewMessages] = useState(0);
let [askForUsername, setAskForUsername] = useState(true);
let [username, setUsername] = useState("");
let [videos, setVideos] = useState([]);
const videoRef = useRef([]);
WE WILL BEGIN WITH SETTING THE PERMISSIONS AND ONCE PERMISSION IS GIVEN VIDEO AND AUDIO ARE USED .
TO ENABLE AND USE REQUIRED FEATURES LIKE MEDIA , VOICE WE USE NAVIGATOR.
READING MATERIAL NAVIGATOR.
NAVIGATOR REPRESENTS THE STATE AND IDENTITY OF USER. IT HAS MANY PROPERTIES THAT CAN BE USED TO DERIVE CERTAIN RESULTS.
TO GET PERMISSION
const getPermissions = async () => {
try {
const videoPermission = await navigator.mediaDevices.getUserMedia({
video: true,
});
if (videoPermission) {
setVideoAvailable(true);
} else {
setVideoAvailable(false);
}
const audioPermission = await navigator.mediaDevices.getUserMedia({
audio: true,
});
if (audioPermission) {
setAudioAvailable(true);
} else {
setAudioAvailable(false);
}
FOR SCREEN SHARING
if (navigator.mediaDevices.getDisplayMedia) {
setScreenAvailable(true);
} else {
setScreenAvailable(false);
}
WHEN THE AUDIO OR VIDEO ARE AVAILABLE WE STREAM THEM
if (videoAvailable || audioAvailable) {
const userMediaStream = await navigator.mediaDevices.getUserMedia({
video: videoAvailable,
audio: audioAvailable,
});
if (userMediaStream) {
window.localStream = userMediaStream;
if (localVideoRef.current) {
localVideoRef.current.srcObject = userMediaStream;
}
}
}
VIDEOCONFERENCE.JSX
import React, { useEffect, useRef, useState } from "react";
import Button from "@mui/material/Button";
import TextField from "@mui/material/TextField";
import "../styles/VC.css";
const server_Url = "http//:localhost:8080";
let connections = {};
const peerConfigConnections = {
iceServers: [{ urls: "stun.doublerobotics.com:3478" }],
};
export default function VideoConference() {
const socketRef = useRef();
let socketIdRef = useRef();
let localVideoRef = useRef();
let [videoAvailable, setVideoAvailable] = useState(true);
let [audioAvailable, setAudioAvailable] = useState(true);
let [video, setVideo] = useState();
let [audio, setAudio] = useState();
let [screen, setScreen] = useState();
let [messages, setMessages] = useState([]);
let [message, setMessage] = useState("");
let [screenAvailable, setScreenAvailable] = useState();
let [newMessages, setNewMessages] = useState(0);
let [askForUsername, setAskForUsername] = useState(true);
let [username, setUsername] = useState("");
let [videos, setVideos] = useState([]);
const videoRef = useRef([]);
useEffect(() => {
getPermissions();
}, []);
let getUserMediaSuccess=(stream)=>{
}
let getUserMedia = () => {
if ((video && videoAvailable) || (audio && audioAvailable)) {
navigator.mediaDevices
.getUserMedia({ video: video, audio: audio })
.then(getUserMediaSuccess)
.then((stream)=>{})
.catch((e) => {
console.log(e);
});
}
else{
try{
let tracks=localVideoRef.current.srcObject.getTracks();
tracks.forEach(track =>track.stop())
}
catch(e){}
}
};
useEffect(() => {
if (video !== undefined || audio !== undefined) {
getUserMedia();
}
}, [audio, video]);
let getMedia = () => {
setVideo(videoAvailable);
setAudio(audioAvailable);
connectToSocketServer();
};
let connect = () => {
setAskForUsername(false);
};
const getPermissions = async () => {
try {
const videoPermission = await navigator.mediaDevices.getUserMedia({
video: true,
});
if (videoPermission) {
setVideoAvailable(true);
} else {
setVideoAvailable(false);
}
const audioPermission = await navigator.mediaDevices.getUserMedia({
audio: true,
});
if (audioPermission) {
setAudioAvailable(true);
} else {
setAudioAvailable(false);
}
if (navigator.mediaDevices.getDisplayMedia) {
setScreenAvailable(true);
} else {
setScreenAvailable(false);
}
if (videoAvailable || audioAvailable) {
const userMediaStream = await navigator.mediaDevices.getUserMedia({
video: videoAvailable,
audio: audioAvailable,
});
if (userMediaStream) {
window.localStream = userMediaStream;
if (localVideoRef.current) {
localVideoRef.current.srcObject = userMediaStream;
}
}
}
} catch (e) {
console.log(e);
}
};
return (
<>
{askForUsername === true ? (
<div>
<h2>Enter into lobby</h2>
<TextField
className="inputsRequired"
id="outlined-basic"
label="Username"
value={username}
variant="outlined"
onChange={(e) => setUsername(e.target.value)}
/>
<Button variant="contained" onClick={connect}>Connect</Button>
<div>
<video ref={localVideoRef} autoPlay muted></video>
</div>
</div>
) : (
<div></div>
)}
</>
);
}
VC.CSS
.MuiInputBase-root input{
color: white;
}
.inputsRequired .MuiFormLabel-root {
color: gray; FOR THE TEXT FIELD
padding: 1rem;
}
.inputsRequired .MuiOutlinedInput-notchedOutline {
border-color: white;
}
.inputsRequired .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
border-color: gray;
}
.inputsRequired .MuiInputBase-root {
margin: 1rem;
}
Comments
Post a Comment