diff --git a/src/components/VoiceChat.tsx b/src/components/VoiceChat.tsx index a1833cf..830f48d 100644 --- a/src/components/VoiceChat.tsx +++ b/src/components/VoiceChat.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect, useState, useRef } from "react"; +import { FC, useEffect, useRef } from "react"; import { socket } from "../socket"; type VoiceChatProps = { @@ -18,8 +18,8 @@ const VoiceChat: FC = ({ session }) => { iceCandidatePoolSize: 10, }; - const localVideoRef = useRef(null); - const remoteVideoRef = useRef(null); + // const localAudioRef = useRef(null); + const remoteAudioRef = useRef(null); const localStreamRef = useRef(null); const remoteStreamRef = useRef(new MediaStream()); @@ -31,18 +31,18 @@ const VoiceChat: FC = ({ session }) => { sessionRef.current = session; }, [session]); - const [isWebcamSetup, setIsWebcamSetup] = useState(false); - - // Setup media sources - const setupWebcam = async () => { + const setupAudio = async () => { localStreamRef.current = await navigator.mediaDevices.getUserMedia({ - video: true, + video: false, // disabled video for now audio: true, }); - if (localVideoRef.current) { - localVideoRef.current.srcObject = localStreamRef.current; + // only when using video the own video stream is displayed + /* + if (localAudioRef.current) { + localAudioRef.current.srcObject = localStreamRef.current; } + */ localStreamRef.current.getTracks().forEach((track) => { if (!localStreamRef.current) return; @@ -50,7 +50,6 @@ const VoiceChat: FC = ({ session }) => { }); }; - // Create an offer const createOffer = async () => { const offerDescription = await pc.current.createOffer(); await pc.current.setLocalDescription(offerDescription); @@ -58,7 +57,6 @@ const VoiceChat: FC = ({ session }) => { socket.emit("create-offer", { offerDescription, sessionName: session }); }; - // Answer the call const answerCall = async (offer: RTCSessionDescriptionInit) => { console.log("Answer call triggered"); @@ -76,12 +74,15 @@ const VoiceChat: FC = ({ session }) => { }; useEffect(() => { - if (localVideoRef.current && localStreamRef.current) { - localVideoRef.current.srcObject = localStreamRef.current; + // only when using video the own video stream is displayed + /* + if (localAudioRef.current && localStreamRef.current) { + localAudioRef.current.srcObject = localStreamRef.current; } + */ - if (remoteVideoRef.current) { - remoteVideoRef.current.srcObject = remoteStreamRef.current; + if (remoteAudioRef.current) { + remoteAudioRef.current.srcObject = remoteStreamRef.current; } socket.on("offer-made", async (offer) => { @@ -93,7 +94,6 @@ const VoiceChat: FC = ({ session }) => { console.log("Answer received:", answer); await pc.current.setRemoteDescription(new RTCSessionDescription(answer)); console.log("set remote description", pc.current); - console.log("set"); }); socket.on("add-ice-candidate", (candidate) => { @@ -117,59 +117,31 @@ const VoiceChat: FC = ({ session }) => { remoteStreamRef.current.addTrack(track); }); console.log("remote stream", remoteStreamRef.current); - if (remoteVideoRef.current) { + if (remoteAudioRef.current) { console.log("setting remote video ref"); - remoteVideoRef.current.srcObject = remoteStreamRef.current; + remoteAudioRef.current.srcObject = remoteStreamRef.current; } }; }, []); - const startWebcam = async () => { - await setupWebcam(); - setIsWebcamSetup(true); - }; - - const initiateCall = async () => { - if (isWebcamSetup) { - // Only allow calls if the webcam is set up - await createOffer(); - } else { - console.log("Please set up your webcam first."); + const enableAudio = async () => { + if (!session || session === "") { + console.log("You need to be in a session to start voice chat."); + return; } + await setupAudio(); + console.log("Audio enabled"); + await createOffer(); + console.log("Offer created"); }; return (
-

Webcam

-
- -

Local Stream

- -
- -

Remote Stream

- -
-
+ {/**/} + - -

2. Create a new Call

- - -

3. Join a Call

-

Answer the call from a different browser window or device

- - - - -

4. Hangup

- -
);