Building a React WebRTC Video Player with TURN Relay Support

import React, { useEffect, useRef } from 'react';

export function WebRTCPlayer({ turnConfig }: { turnConfig: RTCConfiguration }) {
  const videoRef = useRef<HTMLVideoElement>(null);

  useEffect(() => {
    const pc = new RTCPeerConnection(turnConfig);
    pc.ontrack = (event) => {
      if (videoRef.current) {
        videoRef.current.srcObject = event.streams[0];
      }
    };
    return () => pc.close();
  }, [turnConfig]);

  return <video ref={videoRef} autoPlay playsInline controls className="w-full rounded-xl bg-black" />;
}