pb/skyjo-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

removes experimental video and implements voice chat

Browse source
This commit is contained in:
pb-coding 2023-10-13 13:11:05 +02:00
parent 3586a1285c
commit a20873dc7d
1 changed files with 31 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
src/components/VoiceChat.tsx
View file

@ -1,4 +1,4 @@
import { FC, useEffect, useState, useRef } from "react"; import { FC, useEffect, useRef } from "react";
import { socket } from "../socket"; import { socket } from "../socket";
type VoiceChatProps = { type VoiceChatProps = {
@ -18,8 +18,8 @@ const VoiceChat: FC<VoiceChatProps> = ({ session }) => {
iceCandidatePoolSize: 10, iceCandidatePoolSize: 10,
}; };
const localVideoRef = useRef<HTMLVideoElement>(null); // const localAudioRef = useRef<HTMLAudioElement>(null);
const remoteVideoRef = useRef<HTMLVideoElement>(null); const remoteAudioRef = useRef<HTMLAudioElement>(null);
const localStreamRef = useRef<MediaStream | null>(null); const localStreamRef = useRef<MediaStream | null>(null);
const remoteStreamRef = useRef<MediaStream>(new MediaStream()); const remoteStreamRef = useRef<MediaStream>(new MediaStream());
@ -31,18 +31,18 @@ const VoiceChat: FC<VoiceChatProps> = ({ session }) => {
sessionRef.current = session; sessionRef.current = session;
}, [session]); }, [session]);
const [isWebcamSetup, setIsWebcamSetup] = useState(false); const setupAudio = async () => {
// Setup media sources
const setupWebcam = async () => {
localStreamRef.current = await navigator.mediaDevices.getUserMedia({ localStreamRef.current = await navigator.mediaDevices.getUserMedia({
video: true, video: false, // disabled video for now
audio: true, audio: true,
}); });
if (localVideoRef.current) { // only when using video the own video stream is displayed
localVideoRef.current.srcObject = localStreamRef.current; /*
if (localAudioRef.current) {
localAudioRef.current.srcObject = localStreamRef.current;
} }
*/
localStreamRef.current.getTracks().forEach((track) => { localStreamRef.current.getTracks().forEach((track) => {
if (!localStreamRef.current) return; if (!localStreamRef.current) return;
@ -50,7 +50,6 @@ const VoiceChat: FC<VoiceChatProps> = ({ session }) => {
}); });
}; };
// Create an offer
const createOffer = async () => { const createOffer = async () => {
const offerDescription = await pc.current.createOffer(); const offerDescription = await pc.current.createOffer();
await pc.current.setLocalDescription(offerDescription); await pc.current.setLocalDescription(offerDescription);
@ -58,7 +57,6 @@ const VoiceChat: FC<VoiceChatProps> = ({ session }) => {
socket.emit("create-offer", { offerDescription, sessionName: session }); socket.emit("create-offer", { offerDescription, sessionName: session });
}; };
// Answer the call
const answerCall = async (offer: RTCSessionDescriptionInit) => { const answerCall = async (offer: RTCSessionDescriptionInit) => {
console.log("Answer call triggered"); console.log("Answer call triggered");
@ -76,12 +74,15 @@ const VoiceChat: FC<VoiceChatProps> = ({ session }) => {
}; };
useEffect(() => { useEffect(() => {
if (localVideoRef.current && localStreamRef.current) { // only when using video the own video stream is displayed
localVideoRef.current.srcObject = localStreamRef.current; /*
if (localAudioRef.current && localStreamRef.current) {
localAudioRef.current.srcObject = localStreamRef.current;
} }
*/
if (remoteVideoRef.current) { if (remoteAudioRef.current) {
remoteVideoRef.current.srcObject = remoteStreamRef.current; remoteAudioRef.current.srcObject = remoteStreamRef.current;
} }
socket.on("offer-made", async (offer) => { socket.on("offer-made", async (offer) => {
@ -93,7 +94,6 @@ const VoiceChat: FC<VoiceChatProps> = ({ session }) => {
console.log("Answer received:", answer); console.log("Answer received:", answer);
await pc.current.setRemoteDescription(new RTCSessionDescription(answer)); await pc.current.setRemoteDescription(new RTCSessionDescription(answer));
console.log("set remote description", pc.current); console.log("set remote description", pc.current);
console.log("set");
}); });
socket.on("add-ice-candidate", (candidate) => { socket.on("add-ice-candidate", (candidate) => {
@ -117,59 +117,31 @@ const VoiceChat: FC<VoiceChatProps> = ({ session }) => {
remoteStreamRef.current.addTrack(track); remoteStreamRef.current.addTrack(track);
}); });
console.log("remote stream", remoteStreamRef.current); console.log("remote stream", remoteStreamRef.current);
if (remoteVideoRef.current) { if (remoteAudioRef.current) {
console.log("setting remote video ref"); console.log("setting remote video ref");
remoteVideoRef.current.srcObject = remoteStreamRef.current; remoteAudioRef.current.srcObject = remoteStreamRef.current;
} }
}; };
}, []); }, []);
const startWebcam = async () => { const enableAudio = async () => {
await setupWebcam(); if (!session || session === "") {
setIsWebcamSetup(true); console.log("You need to be in a session to start voice chat.");
}; return;
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.");
} }
await setupAudio();
console.log("Audio enabled");
await createOffer();
console.log("Offer created");
}; };
return ( return (
<div style={{ zIndex: 100 }}> <div style={{ zIndex: 100 }}>
<h2>Webcam</h2> {/*<audio ref={localAudioRef} autoPlay muted></audio>*/}
<div className="videos"> <audio ref={remoteAudioRef} autoPlay></audio>
<span>
<h3>Local Stream</h3>
<video ref={localVideoRef} autoPlay muted></video>
</span>
<span>
<h3>Remote Stream</h3>
<video ref={remoteVideoRef} autoPlay></video>
</span>
</div>
<button style={{ zIndex: 100 }} onClick={startWebcam}> <button style={{ zIndex: 100 }} onClick={enableAudio}>
Start Webcam Enable Voice Chat
</button>
<h2>2. Create a new Call</h2>
<button onClick={initiateCall}>Initiate Call</button>
<h2>3. Join a Call</h2>
<p>Answer the call from a different browser window or device</p>
<input id="callInput" />
<button id="answerButton" disabled>
Answer
</button>
<h2>4. Hangup</h2>
<button id="hangupButton" disabled>
Hangup
</button> </button>
</div> </div>
); );