Local Stream
Remote Stream
import { useState, useRef, useEffect } from ‘react’
import { Button } from “/components/ui/button”
import { Card, CardContent, CardHeader, CardTitle } from “/components/ui/card”
import { Play, Home, Trash } from “lucide-react”
export default function VideoCall() {
const [localStream, setLocalStream] = useState(null)
const [remoteStream, setRemoteStream] = useState(null)
const [peerConnection, setPeerConnection] = useState(null)
const localVideoRef = useRef(null)
const remoteVideoRef = useRef(null)
useEffect(() => {
if (localStream && localVideoRef.current) {
localVideoRef.current.srcObject = localStream
}
if (remoteStream && remoteVideoRef.current) {
remoteVideoRef.current.srcObject = remoteStream
}
}, [localStream, remoteStream])
const startCall = async () => {
const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
setLocalStream(stream)
const pc = new RTCPeerConnection({
iceServers: [{ urls: ‘stun:stun.l.google.com:19302’ }]
})
pc.onicecandidate = event => {
if (event.candidate) {
// Send the candidate to the remote peer
}
}
pc.ontrack = event => {
setRemoteStream(event.streams[0])
}
stream.getTracks().forEach(track => pc.addTrack(track, stream))
setPeerConnection(pc)
}
const joinCall = async () => {
if (!peerConnection) return
const offer = await peerConnection.createOffer()
await peerConnection.setLocalDescription(offer)
// Send the offer to the remote peer and wait for an answer
// const answer = await receiveAnswerFromRemotePeer()
// await peerConnection.setRemoteDescription(answer)
}
const leaveCall = () => {
if (localStream) {
localStream.getTracks().forEach(track => track.stop())
setLocalStream(null)
}
if (remoteStream) {
remoteStream.getTracks().forEach(track => track.stop())
setRemoteStream(null)
}
if (peerConnection) {
peerConnection.close()
setPeerConnection(null)
}
}
return (
Video Call
)
}