WebRTC in Next.js 15: Browser-to-Browser Calling with App Router

'use client';
import { useEffect, useRef } from 'react';

export default function CallPage({ params }: { params: { roomId: string } }) {
  const pcRef = useRef<RTCPeerConnection | null>(null);

  useEffect(() => {
    const pc = new RTCPeerConnection({
      iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'turn:turn.example.com:3478',
          username: 'user', credential: 'pass' },
      ],
    });
    pcRef.current = pc;

    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => stream.getTracks()
        .forEach(t => pc.addTrack(t, stream)));

    pc.onicecandidate = ({ candidate }) => {
      if (candidate) fetch(`/api/signal/${params.roomId}`, {
        method: 'POST',
        body: JSON.stringify({ type: 'ice-candidate', candidate }),
      });
    };

    return () => pc.close();
  }, [params.roomId]);
}