بناء تطبيق فيديو ومكالمات صوتية في الوقت الحقيقي مع LiveKit و Next.js

npx create-next-app@latest livekit-video --typescript --tailwind --eslint --app --src-dir --use-npm
cd livekit-video

npm install livekit-client livekit-server-sdk @livekit/components-react @livekit/components-styles

LIVEKIT_URL=wss://your-project.livekit.cloud
LIVEKIT_API_KEY=your_api_key
LIVEKIT_API_SECRET=your_api_secret

docker run --rm -p 7880:7880 -p 7881:7881 -p 7882:7882/udp \
  -e LIVEKIT_KEYS="devkey: secret" \
  livekit/livekit-server

LIVEKIT_URL=ws://localhost:7880
LIVEKIT_API_KEY=devkey
LIVEKIT_API_SECRET=secret

import { AccessToken } from "livekit-server-sdk";
import { NextRequest, NextResponse } from "next/server";
 
export async function POST(request: NextRequest) {
  const { roomName, participantName } = await request.json();
 
  if (!roomName || !participantName) {
    return NextResponse.json(
      { error: "roomName and participantName are required" },
      { status: 400 }
    );
  }
 
  const apiKey = process.env.LIVEKIT_API_KEY;
  const apiSecret = process.env.LIVEKIT_API_SECRET;
 
  if (!apiKey || !apiSecret) {
    return NextResponse.json(
      { error: "Server misconfigured" },
      { status: 500 }
    );
  }
 
  const token = new AccessToken(apiKey, apiSecret, {
    identity: participantName,
    name: participantName,
  });
 
  token.addGrant({
    room: roomName,
    roomJoin: true,
    canPublish: true,
    canSubscribe: true,
    canPublishData: true,
  });
 
  const jwt = await token.toJwt();
 
  return NextResponse.json({ token: jwt });
}

"use client";
 
import { useState, FormEvent } from "react";
import { useRouter } from "next/navigation";
 
export default function JoinPage() {
  const [participantName, setParticipantName] = useState("");
  const [roomName, setRoomName] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const router = useRouter();
 
  async function handleJoin(e: FormEvent) {
    e.preventDefault();
    if (!participantName.trim() || !roomName.trim()) return;
 
    setIsLoading(true);
 
    const params = new URLSearchParams({
      room: roomName.trim(),
      name: participantName.trim(),
    });
 
    router.push(`/room?${params.toString()}`);
  }
 
  return (
    <main className="min-h-screen flex items-center justify-center bg-gray-950">
      <div className="w-full max-w-md p-8 bg-gray-900 rounded-2xl shadow-2xl">
        <h1 className="text-3xl font-bold text-white text-center mb-2">
          LiveKit Video
        </h1>
        <p className="text-gray-400 text-center mb-8">
          انضم إلى غرفة مكالمة فيديو
        </p>
 
        <form onSubmit={handleJoin} className="space-y-5">
          <div>
            <label
              htmlFor="name"
              className="block text-sm font-medium text-gray-300 mb-1"
            >
              اسمك
            </label>
            <input
              id="name"
              type="text"
              value={participantName}
              onChange={(e) => setParticipantName(e.target.value)}
              placeholder="أدخل اسمك"
              className="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>
 
          <div>
            <label
              htmlFor="room"
              className="block text-sm font-medium text-gray-300 mb-1"
            >
              اسم الغرفة
            </label>
            <input
              id="room"
              type="text"
              value={roomName}
              onChange={(e) => setRoomName(e.target.value)}
              placeholder="أدخل اسم الغرفة"
              className="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>
 
          <button
            type="submit"
            disabled={isLoading}
            className="w-full py-3 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-800 text-white font-semibold rounded-lg transition-colors"
          >
            {isLoading ? "جارٍ الانضمام..." : "انضم للغرفة"}
          </button>
        </form>
      </div>
    </main>
  );
}

"use client";
 
import { useEffect, useState } from "react";
import {
  LiveKitRoom,
  VideoConference,
  RoomAudioRenderer,
  ControlBar,
  GridLayout,
  ParticipantTile,
  useTracks,
} from "@livekit/components-react";
import "@livekit/components-styles";
import { Track } from "livekit-client";
 
interface VideoRoomProps {
  roomName: string;
  participantName: string;
  onLeave: () => void;
}
 
export function VideoRoom({
  roomName,
  participantName,
  onLeave,
}: VideoRoomProps) {
  const [token, setToken] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    async function fetchToken() {
      try {
        const response = await fetch("/api/token", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ roomName, participantName }),
        });
 
        if (!response.ok) {
          throw new Error("Failed to get access token");
        }
 
        const data = await response.json();
        setToken(data.token);
      } catch (err) {
        setError(err instanceof Error ? err.message : "Connection error");
      }
    }
 
    fetchToken();
  }, [roomName, participantName]);
 
  if (error) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-950">
        <div className="text-center">
          <p className="text-red-400 text-lg mb-4">{error}</p>
          <button
            onClick={onLeave}
            className="px-6 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600"
          >
            العودة
          </button>
        </div>
      </div>
    );
  }
 
  if (!token) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-950">
        <div className="text-white text-lg">جارٍ الاتصال بالغرفة...</div>
      </div>
    );
  }
 
  return (
    <LiveKitRoom
      token={token}
      serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL}
      connect={true}
      onDisconnected={onLeave}
      data-lk-theme="default"
      style={{ height: "100vh" }}
    >
      <VideoConference />
      <RoomAudioRenderer />
    </LiveKitRoom>
  );
}

"use client";
 
import { useSearchParams, useRouter } from "next/navigation";
import { Suspense } from "react";
import { VideoRoom } from "@/components/VideoRoom";
 
function RoomContent() {
  const searchParams = useSearchParams();
  const router = useRouter();
 
  const roomName = searchParams.get("room");
  const participantName = searchParams.get("name");
 
  if (!roomName || !participantName) {
    router.push("/");
    return null;
  }
 
  return (
    <VideoRoom
      roomName={roomName}
      participantName={participantName}
      onLeave={() => router.push("/")}
    />
  );
}
 
export default function RoomPage() {
  return (
    <Suspense
      fallback={
        <div className="min-h-screen flex items-center justify-center bg-gray-950">
          <div className="text-white text-lg">جارٍ التحميل...</div>
        </div>
      }
    >
      <RoomContent />
    </Suspense>
  );
}

NEXT_PUBLIC_LIVEKIT_URL=wss://your-project.livekit.cloud
LIVEKIT_URL=wss://your-project.livekit.cloud
LIVEKIT_API_KEY=your_api_key
LIVEKIT_API_SECRET=your_api_secret

"use client";
 
import { useEffect, useState, useCallback } from "react";
import {
  LiveKitRoom,
  RoomAudioRenderer,
  GridLayout,
  ParticipantTile,
  useTracks,
  useParticipants,
  useLocalParticipant,
  TrackToggle,
  DisconnectButton,
} from "@livekit/components-react";
import "@livekit/components-styles";
import { Track, RoomEvent } from "livekit-client";
 
interface CustomVideoRoomProps {
  roomName: string;
  participantName: string;
  onLeave: () => void;
}
 
function StageArea() {
  const tracks = useTracks(
    [
      { source: Track.Source.Camera, withPlaceholder: true },
      { source: Track.Source.ScreenShare, withPlaceholder: false },
    ],
    { onlySubscribed: false }
  );
 
  return (
    <GridLayout
      tracks={tracks}
      style={{ height: "calc(100vh - 80px)" }}
    >
      <ParticipantTile />
    </GridLayout>
  );
}
 
function CustomControlBar() {
  const participants = useParticipants();
 
  return (
    <div className="h-20 bg-gray-900 border-t border-gray-800 flex items-center justify-between px-6">
      <div className="text-gray-400 text-sm">
        {participants.length} مشارك{participants.length > 1 ? "ين" : ""}
      </div>
 
      <div className="flex items-center gap-3">
        <TrackToggle
          source={Track.Source.Microphone}
          className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-full transition-colors"
        />
        <TrackToggle
          source={Track.Source.Camera}
          className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-full transition-colors"
        />
        <TrackToggle
          source={Track.Source.ScreenShare}
          className="px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-full transition-colors"
        />
        <DisconnectButton className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-full transition-colors">
          مغادرة
        </DisconnectButton>
      </div>
 
      <div className="w-24" />
    </div>
  );
}
 
export function CustomVideoRoom({
  roomName,
  participantName,
  onLeave,
}: CustomVideoRoomProps) {
  const [token, setToken] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    async function fetchToken() {
      try {
        const response = await fetch("/api/token", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ roomName, participantName }),
        });
 
        if (!response.ok) throw new Error("Failed to get token");
 
        const data = await response.json();
        setToken(data.token);
      } catch (err) {
        setError(err instanceof Error ? err.message : "Error");
      }
    }
 
    fetchToken();
  }, [roomName, participantName]);
 
  if (error) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-950">
        <div className="text-center">
          <p className="text-red-400 text-lg mb-4">{error}</p>
          <button
            onClick={onLeave}
            className="px-6 py-2 bg-gray-700 text-white rounded-lg"
          >
            العودة
          </button>
        </div>
      </div>
    );
  }
 
  if (!token) {
    return (
      <div className="min-h-screen flex items-center justify-center bg-gray-950">
        <div className="text-white">جارٍ الاتصال...</div>
      </div>
    );
  }
 
  return (
    <LiveKitRoom
      token={token}
      serverUrl={process.env.NEXT_PUBLIC_LIVEKIT_URL}
      connect={true}
      onDisconnected={onLeave}
      data-lk-theme="default"
      style={{ height: "100vh" }}
    >
      <div className="flex flex-col h-screen bg-gray-950">
        <StageArea />
        <CustomControlBar />
      </div>
      <RoomAudioRenderer />
    </LiveKitRoom>
  );
}

import { useEffect } from "react";
import { useRoomContext } from "@livekit/components-react";
import { RoomEvent, ConnectionState } from "livekit-client";
 
export function useRoomEvents() {
  const room = useRoomContext();
 
  useEffect(() => {
    function handleParticipantConnected(participant: any) {
      console.log(`${participant.identity} joined the room`);
    }
 
    function handleParticipantDisconnected(participant: any) {
      console.log(`${participant.identity} left the room`);
    }
 
    function handleConnectionStateChanged(state: ConnectionState) {
      console.log(`Connection state: ${state}`);
    }
 
    room.on(RoomEvent.ParticipantConnected, handleParticipantConnected);
    room.on(RoomEvent.ParticipantDisconnected, handleParticipantDisconnected);
    room.on(
      RoomEvent.ConnectionStateChanged,
      handleConnectionStateChanged
    );
 
    return () => {
      room.off(RoomEvent.ParticipantConnected, handleParticipantConnected);
      room.off(
        RoomEvent.ParticipantDisconnected,
        handleParticipantDisconnected
      );
      room.off(
        RoomEvent.ConnectionStateChanged,
        handleConnectionStateChanged
      );
    };
  }, [room]);
}

function StageArea() {
  useRoomEvents(); // تتبع الأحداث
 
  const tracks = useTracks([
    { source: Track.Source.Camera, withPlaceholder: true },
    { source: Track.Source.ScreenShare, withPlaceholder: false },
  ]);
 
  return (
    <GridLayout tracks={tracks}>
      <ParticipantTile />
    </GridLayout>
  );
}

"use client";
 
import { useState, useEffect, useRef, FormEvent } from "react";
import { useRoomContext } from "@livekit/components-react";
import { DataPacket_Kind, RoomEvent } from "livekit-client";
 
interface ChatMessage {
  sender: string;
  text: string;
  timestamp: number;
}
 
export function Chat() {
  const room = useRoomContext();
  const [messages, setMessages] = useState<ChatMessage[]>([]);
  const [input, setInput] = useState("");
  const scrollRef = useRef<HTMLDivElement>(null);
 
  useEffect(() => {
    function handleDataReceived(
      payload: Uint8Array,
      participant: any
    ) {
      const text = new TextDecoder().decode(payload);
      const message: ChatMessage = {
        sender: participant?.identity || "Unknown",
        text,
        timestamp: Date.now(),
      };
      setMessages((prev) => [...prev, message]);
    }
 
    room.on(RoomEvent.DataReceived, handleDataReceived);
 
    return () => {
      room.off(RoomEvent.DataReceived, handleDataReceived);
    };
  }, [room]);
 
  useEffect(() => {
    scrollRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages]);
 
  async function sendMessage(e: FormEvent) {
    e.preventDefault();
    if (!input.trim()) return;
 
    const data = new TextEncoder().encode(input.trim());
    await room.localParticipant.publishData(data, {
      reliable: true,
    });
 
    setMessages((prev) => [
      ...prev,
      {
        sender: room.localParticipant.identity,
        text: input.trim(),
        timestamp: Date.now(),
      },
    ]);
 
    setInput("");
  }
 
  return (
    <div className="w-80 bg-gray-900 border-l border-gray-800 flex flex-col">
      <div className="p-4 border-b border-gray-800">
        <h3 className="text-white font-semibold">الدردشة</h3>
      </div>
 
      <div className="flex-1 overflow-y-auto p-4 space-y-3">
        {messages.map((msg, i) => (
          <div key={i} className="text-sm">
            <span className="font-medium text-blue-400">
              {msg.sender}:
            </span>{" "}
            <span className="text-gray-300">{msg.text}</span>
          </div>
        ))}
        <div ref={scrollRef} />
      </div>
 
      <form
        onSubmit={sendMessage}
        className="p-4 border-t border-gray-800"
      >
        <div className="flex gap-2">
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
            placeholder="اكتب رسالة..."
            className="flex-1 px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white text-sm placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
          />
          <button
            type="submit"
            className="px-4 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700"
          >
            إرسال
          </button>
        </div>
      </form>
    </div>
  );
}

<LiveKitRoom token={token} serverUrl={url} connect={true}>
  <div className="flex h-screen bg-gray-950">
    <div className="flex-1 flex flex-col">
      <StageArea />
      <CustomControlBar />
    </div>
    <Chat />
  </div>
  <RoomAudioRenderer />
</LiveKitRoom>

"use client";
 
import { useState, useEffect, useRef } from "react";
 
interface PreJoinProps {
  onJoin: (settings: {
    videoEnabled: boolean;
    audioEnabled: boolean;
  }) => void;
  participantName: string;
}
 
export function PreJoin({ onJoin, participantName }: PreJoinProps) {
  const [videoEnabled, setVideoEnabled] = useState(true);
  const [audioEnabled, setAudioEnabled] = useState(true);
  const [stream, setStream] = useState<MediaStream | null>(null);
  const videoRef = useRef<HTMLVideoElement>(null);
 
  useEffect(() => {
    async function getMedia() {
      try {
        const mediaStream =
          await navigator.mediaDevices.getUserMedia({
            video: videoEnabled,
            audio: audioEnabled,
          });
        setStream(mediaStream);
 
        if (videoRef.current) {
          videoRef.current.srcObject = mediaStream;
        }
      } catch (err) {
        console.error("Failed to access media devices:", err);
      }
    }
 
    getMedia();
 
    return () => {
      stream?.getTracks().forEach((track) => track.stop());
    };
  }, [videoEnabled, audioEnabled]);
 
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-950">
      <div className="w-full max-w-lg p-8 bg-gray-900 rounded-2xl">
        <h2 className="text-xl font-bold text-white text-center mb-6">
          الاستعداد للانضمام
        </h2>
 
        <div className="aspect-video bg-gray-800 rounded-xl overflow-hidden mb-6 relative">
          {videoEnabled ? (
            <video
              ref={videoRef}
              autoPlay
              muted
              playsInline
              className="w-full h-full object-cover"
            />
          ) : (
            <div className="w-full h-full flex items-center justify-center">
              <div className="w-20 h-20 bg-gray-700 rounded-full flex items-center justify-center">
                <span className="text-2xl text-white">
                  {participantName[0]?.toUpperCase()}
                </span>
              </div>
            </div>
          )}
        </div>
 
        <div className="flex justify-center gap-4 mb-6">
          <button
            onClick={() => setAudioEnabled(!audioEnabled)}
            className={`px-4 py-2 rounded-full transition-colors ${
              audioEnabled
                ? "bg-gray-700 text-white"
                : "bg-red-600 text-white"
            }`}
          >
            {audioEnabled ? "🎤 الميكروفون مفعّل" : "🎤 الميكروفون معطّل"}
          </button>
          <button
            onClick={() => setVideoEnabled(!videoEnabled)}
            className={`px-4 py-2 rounded-full transition-colors ${
              videoEnabled
                ? "bg-gray-700 text-white"
                : "bg-red-600 text-white"
            }`}
          >
            {videoEnabled ? "📷 الكاميرا مفعّلة" : "📷 الكاميرا معطّلة"}
          </button>
        </div>
 
        <button
          onClick={() => {
            stream?.getTracks().forEach((track) => track.stop());
            onJoin({ videoEnabled, audioEnabled });
          }}
          className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-colors"
        >
          انضم الآن
        </button>
      </div>
    </div>
  );
}

npm run dev

git init
git add .
git commit -m "feat: livekit video app"
git remote add origin https://github.com/your-username/livekit-video.git
git push -u origin main

FROM node:20-alpine AS base
 
FROM base AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci
 
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build
 
FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public
EXPOSE 3000
CMD ["node", "server.js"]

docker build -t livekit-video .
docker run -p 3000:3000 --env-file .env.local livekit-video

import { EgressClient, EncodedFileOutput } from "livekit-server-sdk";
 
const egressClient = new EgressClient(
  process.env.LIVEKIT_URL!,
  process.env.LIVEKIT_API_KEY!,
  process.env.LIVEKIT_API_SECRET!
);
 
// بدء تسجيل غرفة
const output = new EncodedFileOutput({
  filepath: "recordings/room-{room_name}-{time}.mp4",
  // إعداد S3 أو GCS للتخزين
});
 
await egressClient.startRoomCompositeEgress(roomName, { file: output });

# agents/voice_agent.py (Python SDK)
from livekit.agents import AutoSubscribe, JobContext, WorkerOptions, cli
from livekit.agents.voice_assistant import VoiceAssistant
from livekit.plugins import openai, silero
 
async def entrypoint(ctx: JobContext):
    await ctx.connect(auto_subscribe=AutoSubscribe.AUDIO_ONLY)
 
    assistant = VoiceAssistant(
        vad=silero.VAD.load(),
        stt=openai.STT(),
        llm=openai.LLM(),
        tts=openai.TTS(),
    )
 
    assistant.start(ctx.room)
    await assistant.say("مرحبًا! كيف يمكنني مساعدتك؟")