# Building a Google Meet Clone with Strapi 5 and Next.js - Part 3

Welcome to the final part of our Google Meet clone tutorial series! In this part, we'll implement video conferencing, screen sharing, and real-time chat functionality using WebRTC and Socket.io.

For reference purposes, here's the outline of this blog series:

- [Part 1: Setting Up the Backend and Frontend with Strapi 5 and Next.js.](https://strapi.io/blog/build-a-google-meet-clone-with-strapi5-and-nextjs-part-1).
- **Part 2: Real-Time Features, Video Integration, and Screen Sharing.**
## Prerequisites

Before starting, ensure you have:
- Completed Part 1 this tutorial series.
- Basic understanding of [ **Web Real-Time Communication (WebRTC)**](https://strapi.io/blog/build-a-google-meet-clone-with-strapi5-and-nextjs-part-1) concepts.
- You have the Strapi backend created in [Part 1](https://strapi.io/blog/build-a-google-meet-clone-with-strapi5-and-nextjs-part-1) running on your computer.

## Installing Dependencies
To continue from where we left off in Part 1, let's add the required WebRTC and Socket.io packages by running the command below in your frontend project folder:

npm install socket.io-client @types/webrtc simple-peer @types/simple-peer

Here is what we installed inside our frontend project:
* [socket.io-client](https://www.npmjs.com/package/socket.io-client): Realtime application framework client
* [@types/webrtc](https://www.npmjs.com/package/@types/webrtc): TypeScript definitions for webrtc.
* [simple-peer](https://www.npmjs.com/package/simple-peer): The mobile web app connects groups of up to four people in a peer-to-peer WebRTC audio and video call so that they can mutually prove unique personhood.
* [@types/simple-peer](https://www.npmjs.com/package/@types/simple-peer): TypeScript definitions for simple-peer.

For the Strapi backend, install the Socket.io package:

cd ../google-meet-clone-backend
npm install socket.io

## Setting Up WebSocket Server
First, create a `socket.ts` file in the `config` folder and add the code below:

export default ({ env }) => ({
  enabled: true,
  config: {
    port: env.int("SOCKET_PORT", 1337),
    cors: {
      origin: env("SOCKET_CORS_ORIGIN", "*"),
      methods: ["GET", "POST"],
    },
  },
});

Then, create a new folder named `socket` in the `api` directory for the socket API. In the `api/socket` directory, create a new folder named `services` and a `socket.ts` file in the `services` folder.

### Create Event Listeners for Real-time Peer-to-Peer Connection in Strapi
Add the code snippets below in the `api/socket/services/socket.ts` file to set and initialize a socket connection, and create all the event listeners we need to communicate with our Next.js client for real-time Peer to Peer connection:

import { Core } from "@strapi/strapi";

interface MeetingParticipant {
  socketId: string;
  username: string;
}

interface Meeting {
  participants: Map<string, MeetingParticipant>;
  lastActivity: number;
}

export default ({ strapi }: { strapi: Core.Strapi }) => {
  // Store active meetings and their participants
  const activeMeetings = new Map<string, Meeting>();

  // Cleanup inactive meetings periodically
  const cleanupInterval = setInterval(
    () => {
      const now = Date.now();
      activeMeetings.forEach((meeting, meetingId) => {
        if (now - meeting.lastActivity > 1000 * 60 * 60) {
          // 1 hour timeout
          activeMeetings.delete(meetingId);
        }
      });
    },
    1000 * 60 * 15
  );

  return {
    initialize() {
      strapi.eventHub.on("socket.ready", async () => {
        const io = (strapi as any).io;
        if (!io) {
          strapi.log.error("Socket.IO is not initialized");
          return;
        }

        io.on("connection", (socket: any) => {
          const { meetingId, userId } = socket.handshake.query;
          strapi.log.info(
            `Client connected - Socket: ${socket.id}, User: ${userId}, Meeting: ${meetingId}`
          );

          // Initialize meeting if it doesn't exist
          if (!activeMeetings.has(meetingId)) {
            activeMeetings.set(meetingId, {
              participants: new Map(),
              lastActivity: Date.now(),
            });
          }

          socket.on("join-meeting", async ({ meetingId, userId }) => {
            try {
              // Get user data with username
              const user = await strapi
                .query("plugin::users-permissions.user")
                .findOne({
                  where: { id: userId },
                  select: ["id", "username"],
                });

              strapi.log.info(`User ${userId} joining meeting ${meetingId}`);

              const meeting = activeMeetings.get(meetingId);
              if (!meeting) return;

              // Add participant to meeting with both ID and username
              meeting.participants.set(userId.toString(), {
                socketId: socket.id,
                username: user.username,
              });
              meeting.lastActivity = Date.now();

              // Join socket room
              socket.join(meetingId);

              // Get current participants with their usernames
              const currentParticipants = Array.from(
                meeting.participants.entries()
              )
                .filter(([id]) => id !== userId.toString())
                .map(([id, data]) => ({
                  userId: id,
                  username: data.username,
                }));

              // Send current participants to the joining user
              socket.emit("participants-list", currentParticipants);

              // Notify others about the new participant
              socket.to(meetingId).emit("user-joined", {
                userId: userId.toString(),
                username: user.username,
              });

              strapi.log.info(
                `Current participants in meeting ${meetingId}:`,
                Array.from(meeting.participants.entries()).map(
                  ([id, data]) => ({
                    id,
                    username: data.username,
                  })
                )
              );
            } catch (error) {
              strapi.log.error("Error in join-meeting:", error);
            }
          });

          socket.on("chat-message", ({ message, meetingId }) => {
            socket.to(meetingId).emit("chat-message", message);
          });

          const meeting = activeMeetings.get(meetingId);
          if (!meeting) return;
            
          socket.on("signal", ({ to, from, signal }) => {
            console.log(
              `Forwarding ${signal.type} signal from ${from} to ${to}`
            );
            const targetSocket = meeting.participants.get(
              to.toString()
            )?.socketId;
            if (targetSocket) {
              io.to(targetSocket).emit("signal", {
                signal,
                userId: from.toString(),
              });
            } else {
              console.log(`No socket found for user ${to}`);
            }
          });
          const handleDisconnect = () => {
            const meeting = activeMeetings.get(meetingId);
            if (!meeting) return;

            // Find and remove the disconnected user
            const disconnectedUserId = Array.from(
              meeting.participants.entries()
            ).find(([_, socketId]) => socketId === socket.id)?.[0];

            if (disconnectedUserId) {
              meeting.participants.delete(disconnectedUserId);
              meeting.lastActivity = Date.now();

              // Notify others about the user leaving
              socket.to(meetingId).emit("user-left", {
                userId: disconnectedUserId,
              });

              strapi.log.info(
                `User ${disconnectedUserId} left meeting ${meetingId}`
              );
              strapi.log.info(
                `Remaining participants:`,
                Array.from(meeting.participants.keys())
              );

              // Clean up empty meetings
              if (meeting.participants.size === 0) {
                activeMeetings.delete(meetingId);
                strapi.log.info(
                  `Meeting ${meetingId} closed - no participants remaining`
                );
              }
            }
          };

          socket.on("disconnect", handleDisconnect);
          socket.on("leave-meeting", handleDisconnect);
        });

        strapi.log.info("Conference socket service initialized successfully");
      });
    },

    destroy() {
      clearInterval(cleanupInterval);
    },
  };
};

### Initialize Socket.io Server with Strapi
Then update your `src/index.ts` file to initialize the Socket.IO server, set up event listeners for user updates and creations, and integrate the socket service with Strapi:

import { Core } from "@strapi/strapi";
import { Server as SocketServer } from "socket.io";

interface SocketConfig {
  cors: {
    origin: string | string[];
    methods: string[];
  };
}

export default {
  register({ strapi }: { strapi: Core.Strapi }) {
    const socketConfig = strapi.config.get("socket.config") as SocketConfig;

    if (!socketConfig) {
      strapi.log.error("Invalid Socket.IO configuration");
      return;
    }

    strapi.server.httpServer.on("listening", () => {
      const io = new SocketServer(strapi.server.httpServer, {
        cors: socketConfig.cors,
      });

      (strapi as any).io = io;
      strapi.eventHub.emit("socket.ready");
    });
  },

  bootstrap({ strapi }: { strapi: Core.Strapi }) {
    const socketService = strapi.service("api::socket.socket") as {
      initialize: () => void;
    };
    if (socketService && typeof socketService.initialize === "function") {
      socketService.initialize();
    } else {
      strapi.log.error("Socket service or initialize method not found");
    }
  },
};

## Implementing Video Meeting Page
With our socket connection and events created, let's create a real-time video meeting page to handle video conference rooms to allow users to have video meetings.

### Create Page for Video Conference Room
Create a new page for the video conference room in `src/app/meetings/[id]/page.tsx` file and add the code snippets below:

'use client'

import { useEffect, useRef, useState } from "react"
import { useParams } from "next/navigation"
import SimplePeer from "simple-peer"
import { io, Socket } from "socket.io-client"
import { getCookie } from "cookies-next"
import { User } from "@/types"

interface ExtendedSimplePeer extends SimplePeer.Instance {
  _pc: RTCPeerConnection
}

interface Peer {
  peer: SimplePeer.Instance
  userId: string
  stream?: MediaStream
}

export default function ConferenceRoom() {
  const params = useParams()
  const [peers, setPeers] = useState<Peer[]>([])
  const [stream, setStream] = useState<MediaStream | null>(null)
  const socketRef = useRef<Socket>()
  const userVideo = useRef<HTMLVideoElement>(null)
  const peersRef = useRef<Peer[]>([])
  const [user, setUser] = useState<User | null>(null)
  const [isConnected, setIsConnected] = useState(false)
  const [screenStream, setScreenStream] = useState<MediaStream | null>(null)
  const [isScreenSharing, setIsScreenSharing] = useState(false)

  useEffect(() => {
    try {
      const cookieValue = getCookie("auth-storage")
      if (cookieValue) {
        const parsedAuthState = JSON.parse(String(cookieValue))
        setUser(parsedAuthState.state.user)
      }
    } catch (error) {
      console.error("Error parsing auth cookie:", error)
    }
  }, [])

  useEffect(() => {
    if (!user?.id || !params.id) return

    const cleanupPeers = () => {
      peersRef.current.forEach((peer) => {
        if (peer.peer) {
          peer.peer.destroy()
        }
      })
      peersRef.current = []
      setPeers([])
    }

    cleanupPeers()

    socketRef.current = io(process.env.NEXT_PUBLIC_STRAPI_URL || "", {
      query: { meetingId: params.id, userId: user.id },
      transports: ["websocket"],
      reconnection: true,
      reconnectionAttempts: 5,
    })

    socketRef.current.on("connect", () => {
      setIsConnected(true)
      console.log("Socket connected:", socketRef.current?.id)
    })

    socketRef.current.on("disconnect", () => {
      setIsConnected(false)
      console.log("Socket disconnected")
    })

    navigator.mediaDevices
      .getUserMedia({ video: true, audio: true })
      .then((stream) => {
        setStream(stream)
        if (userVideo.current) {
          userVideo.current.srcObject = stream
        }

        socketRef.current?.emit("join-meeting", {
          userId: user.id,
          meetingId: params.id,
        })

        socketRef.current?.on("signal", ({ userId, signal }) => {
          console.log("Received signal from:", userId, "Signal type:", signal.type)
          let peer = peersRef.current.find((p) => p.userId === userId)

          if (!peer && stream) {
            console.log("Creating new peer for signal from:", userId)
            const newPeer = createPeer(userId, stream, false)
            peer = { peer: newPeer, userId }
            peersRef.current.push(peer)
            setPeers([...peersRef.current])
          }

          if (peer) {
            try {
              peer.peer.signal(signal)
            } catch (err) {
              console.error("Error processing signal:", err)
            }
          }
        })

        socketRef.current?.on("participants-list", (participants) => {
          console.log("Received participants list:", participants)

          cleanupPeers()
          setPeers([...peersRef.current])
        })

        socketRef.current?.on("user-joined", ({ userId, username }) => {
          console.log("New user joined:", userId)
          if (userId !== user?.id.toString()) {

            if (stream && !peersRef.current.find((p) => p.userId === userId)) {
              console.log("Creating non-initiator peer for new user:", userId)
              const peer = createPeer(userId, stream, false)
              peersRef.current.push({ peer, userId })
              setPeers([...peersRef.current])
            }
          }
        })

        socketRef.current?.on("user-left", ({ userId }) => {
          console.log("User left:", userId)
          const peerIndex = peersRef.current.findIndex((p) => p.userId === userId)
          if (peerIndex !== -1) {
            peersRef.current[peerIndex].peer.destroy()
            peersRef.current.splice(peerIndex, 1)
            setPeers([...peersRef.current])
          }
        })
      })
      .catch((error) => {
        console.error("Error accessing media devices:", error)
      })

    return () => {

      if (socketRef.current) {
        socketRef.current.emit("leave-meeting", {
          userId: user?.id,
          meetingId: params.id,
        })

        socketRef.current.off("participants-list")
        socketRef.current.off("user-joined")
        socketRef.current.off("user-left")
        socketRef.current.off("signal")
        socketRef.current.disconnect()
      }

      if (stream) {
        stream.getTracks().forEach((track) => track.stop())
      }

      cleanupPeers()
    }
  }, [user?.id, params.id])

  useEffect(() => {
    if (!socketRef.current) return

    socketRef.current.on("media-state-change", ({ userId, type, enabled }) => {
    })

    return () => {
      socketRef.current?.off("media-state-change")
    }
  }, [socketRef.current])

  function createPeer(userId: string, stream: MediaStream, initiator: boolean): SimplePeer.Instance {
    console.log(`Creating peer connection - initiator: ${initiator}, userId: ${userId}`)

    const peer = new SimplePeer({
      initiator,
      trickle: false,
      stream,
      config: {
        iceServers: [
          { urls: "stun:stun.l.google.com:19302" },
          { urls: "stun:global.stun.twilio.com:3478" },
        ],
      },
    })

    peer.on("signal", (signal) => {
      console.log(`Sending signal to ${userId}, type: ${signal.type}`)
      socketRef.current?.emit("signal", {
        signal,
        to: userId,
        from: user?.id,
      })
    })

    peer.on("connect", () => {
      console.log(`Peer connection established with ${userId}`)
    })

    peer.on("stream", (incomingStream) => {
      console.log(`Received stream from ${userId}, tracks:`, incomingStream.getTracks())
      const peerIndex = peersRef.current.findIndex((p) => p.userId === userId)
      if (peerIndex !== -1) {
        peersRef.current[peerIndex].stream = incomingStream
        setPeers([...peersRef.current])
      }
    })

    peer.on("error", (err) => {
      console.error(`Peer error with ${userId}:`, err)
      const peerIndex = peersRef.current.findIndex((p) => p.userId === userId)
      if (peerIndex !== -1) {
        peersRef.current[peerIndex].peer.destroy()
        peersRef.current.splice(peerIndex, 1)
        setPeers([...peersRef.current])
      }
    })

    peer.on("close", () => {
      console.log(`Peer connection closed with ${userId}`)
    })

    return peer
  }

  return (
    <div className="flex flex-col gap-4 p-4">
      <div className="text-sm text-gray-500">
        {isConnected ? "Connected to server" : "Disconnected from server"}
      </div>
      {/* <ParticipantList /> */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div className="relative">
          <video
            ref={userVideo}
            autoPlay
            muted
            playsInline
            className="w-full rounded-lg bg-gray-900"
          />
          <div className="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded">
            You
          </div>
        </div>
        {peers.map(({ peer, userId, stream }) => (
          <PeerVideo key={userId} peer={peer} userId={userId} stream={stream} />
        ))}
      </div>
    </div>
  )
}

function PeerVideo({ peer, userId, stream }: { peer: SimplePeer.Instance; userId: string; stream?: MediaStream }) {
  const ref = useRef<HTMLVideoElement>(null)

  useEffect(() => {
    if (stream && ref.current) {
      ref.current.srcObject = stream
    }

    const handleStream = (incomingStream: MediaStream) => {
      if (ref.current) {
        ref.current.srcObject = incomingStream
      }
    }

    peer.on("stream", handleStream)

    return () => {
      if (ref.current) {
        ref.current.srcObject = null
      }
      peer.off("stream", handleStream)
    }
  }, [peer, stream])

  return (
    <div className="relative">
      <video ref={ref} autoPlay playsInline className="w-full rounded-lg bg-gray-900" />
      <div className="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded">
      </div>
    </div>
  )
}

Here is what the code above does:
* The above code handles the **WebRTC** and Socket.IO peer-to-peer video chat. It uses **SimplePeer** to handle WebRTC connections, maintaining a peers state array, and `peersRef` to track all connected users.
* The component initializes by getting the user's video and audio stream using `getUserMedia`, then sets up socket connections with events like `join-meeting`, `signal`, `user-joined`, and `user-left` to handle real-time communication.
* The `createPeer` function is the backbone, creating new peer connections with ice servers for NAT traversal while handling various peer events like `signal`, `connect`, `stream`, and `error`.
* The video streams are displayed using the `userVideo` ref for the local user and a separate `PeerVideo` component for remote participants, which manages individual video elements and their streams. It uses `socket.current` for maintaining the WebSocket connection and handles cleanup using `useEffect's` return function, ensuring all peer connections are properly destroyed and media streams are stopped when the component unmounts.


## Implementing Screen Sharing
To allow users to share their screen while on the call, let's add screen-sharing functionality to the conference room:

//...
import { ScreenShare, StopScreenShare } from 'lucide-react';

interface ExtendedSimplePeer extends SimplePeer.Instance {
  _pc: RTCPeerConnection;
}

//...
export default function ConferenceRoom() {
  //...
  const [screenStream, setScreenStream] = useState<MediaStream | null>(null);
  const [isScreenSharing, setIsScreenSharing] = useState(false); 
    
    
    
  const toggleScreenShare = async () => {
    if (!isScreenSharing) {
      try {
        const screen = await navigator.mediaDevices.getDisplayMedia({
          video: true,
          audio: false,
        });

        // Handle when the user clicks the "Stop sharing" button in the browser
        screen.getVideoTracks()[0].addEventListener("ended", () => {
          stopScreenSharing();
        });

        setScreenStream(screen);
        setIsScreenSharing(true);

        // Replace video track for all peers
        peersRef.current.forEach(({ peer }) => {
          const videoTrack = screen.getVideoTracks()[0];
          const extendedPeer = peer as ExtendedSimplePeer;
          const sender = extendedPeer._pc
            .getSenders()
            .find((s) => s.track?.kind === "video");

          if (sender) {
            sender.replaceTrack(videoTrack);
          }
        });

        // Replace local video
        if (userVideo.current) {
          userVideo.current.srcObject = screen;
        }
      } catch (error) {
        console.error("Error sharing screen:", error);
      }
    } else {
      stopScreenSharing();
    }
  };

  const stopScreenSharing = () => {
    if (screenStream) {
      screenStream.getTracks().forEach((track) => track.stop());
      setScreenStream(null);
      setIsScreenSharing(false);

      // Revert to camera video for all peers
      if (stream) {
        peersRef.current.forEach(({ peer }) => {
          const videoTrack = stream.getVideoTracks()[0];
          const extendedPeer = peer as ExtendedSimplePeer;
          const sender = extendedPeer._pc
            .getSenders()
            .find((s) => s.track?.kind === "video");

          if (sender) {
            sender.replaceTrack(videoTrack);
          }
        });

        // Revert local video
        if (userVideo.current) {
          userVideo.current.srcObject = stream;
        }
      }
    }
  };
    
  //...
    
  return (
    <div className="flex flex-col gap-4 p-4">
      <div className="text-sm text-gray-500">
        {isConnected ? "Connected to server" : "Disconnected from server"}
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div className="relative">
          <video
            ref={userVideo}
            autoPlay
            muted
            playsInline
            className="w-full rounded-lg bg-gray-900"
          />
          <div className="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded">
            You
          </div>
        </div>
        {peers.map(({ peer, userId, stream }) => (
            <PeerVideo key={userId} peer={peer} userId={userId} stream={stream} />
        ))}
      </div>
      {/* added this button to handle the start screen and stop sharing. */}

      <button
        onClick={toggleScreenShare}
        className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        style={{ width: "15rem" }}
      >
        {isScreenSharing ? (
          <>
            <StopCircleIcon className="w-5 h-5" />
            Stop Sharing
          </>
        ) : (
          <>
            <ScreenShare className="w-5 h-5" />
            Share Screen
          </>
        )}
      </button>
      //
    </div>
  );
}

In the above code:
* We added `toggleScreenShare` and `stopScreenSharing` functions, where `toggleScreenShare` uses `navigator.mediaDevices.getDisplayMedia` to capture the user's screen as a `MediaStream`, storing it in `screenStream` state and tracking its status with `isScreenSharing`.
* When screen sharing is activated, it replaces the video tracks for all peer connections using RTCPeerConnection's `getSenders().replaceTrack` method, changing what each participant sees from camera to screen content.
* The `stopScreenSharing` function handles the cleanup by stopping all screen-sharing tracks and reverting everyone to camera video.
*

## Adding Real-Time Chat

Next, let's add a chat functionality to allow users to chat in real time while on the call.

### Create Chat Component
Create a chat component in `src/components/meeting/chat.tsx`:

"use client";

import { useState, useEffect, useRef } from "react";
import { useAuthStore } from "@/store/auth-store";
import { Socket } from "socket.io-client";
import { User } from "@/types";

interface ChatProps {
  socketRef: React.MutableRefObject<Socket | undefined>; // Changed from RefObject to MutableRefObject
  user: User;
  meetingId: string;
}

interface Message {
  userId: string;
  username: string;
  text: string;
  timestamp: number;
}

function Chat({ socketRef, user, meetingId }: ChatProps) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [newMessage, setNewMessage] = useState("");
  const [isExpanded, setIsExpanded] = useState(true);
  const chatRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const socket = socketRef.current;
    if (!socket) return;

    const handleChatMessage = (message: Message) => {
      setMessages((prev) => [...prev, message]);
    };

    socket.on("chat-message", handleChatMessage);

    return () => {
      socket?.off("chat-message", handleChatMessage);
    };
  }, [socketRef.current]);

  useEffect(() => {
    if (chatRef.current) {
      chatRef.current.scrollTop = chatRef.current.scrollHeight;
    }
  }, [messages]);

  const sendMessage = (e: React.FormEvent) => {
    e.preventDefault();
    const socket = socketRef.current;
    if (!socket || !newMessage.trim()) return;

    const message: Message = {
      userId: user.id.toString(),
      username: user.username,
      text: newMessage,
      timestamp: Date.now(),
    };

    socket.emit("chat-message", {
      message,
      meetingId,
    });

    setMessages((prev) => [...prev, message]);
    setNewMessage("");
  };

  return (
    <div className="fixed right-4 bottom-4 w-80 bg-white rounded-lg shadow-lg flex flex-col border">
      <div
        className="p-3 border-b flex justify-between items-center cursor-pointer"
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <h3 className="font-medium text-gray-600">Chat</h3>
        <button className="text-gray-500 hover:text-gray-700">
          {isExpanded ? "▼" : "▲"}
        </button>
      </div>

      {isExpanded && (
        <>
          <div
            ref={chatRef}
            className="flex-1 overflow-y-auto p-4 space-y-4 max-h-96"
          >
            {messages.map((message, index) => (
              <div
                key={index}
                className={`flex ${
                  message.userId === user.id.toString()
                    ? "justify-end"
                    : "justify-start"
                }`}
              >
                <div
                  className={`max-w-xs px-4 py-2 rounded-lg ${
                    message.userId === user.id.toString()
                      ? "bg-blue-600 text-white"
                      : "bg-gray-400"
                  }`}
                >
                  {message.userId !== user.id.toString() && (
                    <p className="text-xs font-medium mb-1">
                      {message.username}
                    </p>
                  )}
                  <p className="break-words">{message.text}</p>
                  <span className="text-xs opacity-75 block mt-1">
                    {new Date(message.timestamp).toLocaleTimeString()}
                  </span>
                </div>
              </div>
            ))}
          </div>

          <form onSubmit={sendMessage} className="p-4 border-t">
            <div className="flex gap-2">
              <input
                type="text"
                value={newMessage}
                onChange={(e) => setNewMessage(e.target.value)}
                className="flex-1 px-3 py-2 border rounded-lg text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
                placeholder="Type a message..."
              />
              <button
                type="submit"
                className="px-4 py-2 bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors"
                disabled={!newMessage.trim()}
              >
                Send
              </button>
            </div>
          </form>
        </>
      )}
    </div>
  );
}


export default Chat;

### Broadcast Chat to All Connected Clients with Strapi
Now update your Strapi socket service in your `api/socket/services/socket.ts` file to broadcast the chat to all connected clients in the meeting.

//...
socket.on("chat-message", ({ message, meetingId }) => {
   socket.to(meetingId).emit("chat-message", message);
});
//...

### Render Chat Component
Then update your `app/meetings/[id]/page.tsx` file to render the **Chat** component in your return statement:

//...
import Chat from "@/components/meeting/chat";

//...

export default function ConferenceRoom() {
    
  //...
  return (
    <div className="flex flex-col gap-4 p-4">
      <div className="text-sm text-gray-500">
        {isConnected ? "Connected to server" : "Disconnected from server"}
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div className="relative">
          <video
            ref={userVideo}
            autoPlay
            muted
            playsInline
            className="w-full rounded-lg bg-gray-900"
          />
          <div className="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded">
            You
          </div>
        </div>
        {peers.map(({ peer, userId, stream }) => (
          <PeerVideo key={userId} peer={peer} userId={userId} stream={stream} />
        ))}
      </div>
      <button
        onClick={toggleScreenShare}
        className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
        style={{ width: "15rem" }}
      >
        {isScreenSharing ? (
          <>
            <StopCircleIcon className="w-5 h-5" />
            Stop Sharing
          </>
        ) : (
          <>
            <ScreenShare className="w-5 h-5" />
            Share Screen
          </>
        )}
      </button>
      <Chat
        socketRef={socketRef}
        user={user as User}
        meetingId={params.id as string}
      />{" "}
    </div>
  );
}


## Setting up Meeting Controls
Now let's take things a little bit further and make our app look more like Google Meet.

Let's have a central control for video conferencing and add features like muting and unmuting the mic, turning the video off and on, screen sharing, and leaving the meeting.

### Create The Controls Component
Create a controls component in `src/components/meeting/controls.tsx`:

import { useRouter } from 'next/navigation';
import {
  Mic,
  MicOff,
  Video,
  VideoOff,
  ScreenShare,
  StopCircleIcon,
  Phone,
} from 'lucide-react';
import { Socket } from 'socket.io-client';
import { useState } from 'react';

interface ControlsProps {
  stream: MediaStream | null;
  screenStream: MediaStream | null;
  isScreenSharing: boolean;
  socketRef: React.MutableRefObject<Socket | undefined>;
  peersRef: React.MutableRefObject<any[]>;
  meetingId: string;
  userId: string;
  onScreenShare: () => Promise<void>;
}

export default function Controls({
  stream,
  screenStream,
  isScreenSharing,
  socketRef,
  peersRef,
  meetingId,
  userId,
  onScreenShare,
}: ControlsProps) {
  const router = useRouter();
  const [isAudioEnabled, setIsAudioEnabled] = useState(true);
  const [isVideoEnabled, setIsVideoEnabled] = useState(true);

  const toggleAudio = () => {
    if (stream) {
      stream.getAudioTracks().forEach((track) => {
        track.enabled = !isAudioEnabled;
      });
      setIsAudioEnabled(!isAudioEnabled);

      // Notify peers about audio state change
      socketRef.current?.emit('media-state-change', {
        meetingId,
        userId,
        type: 'audio',
        enabled: !isAudioEnabled,
      });
    }
  };

  const toggleVideo = () => {
    if (stream) {
      stream.getVideoTracks().forEach((track) => {
        track.enabled = !isVideoEnabled;
      });
      setIsVideoEnabled(!isVideoEnabled);

      // Notify peers about video state change
      socketRef.current?.emit('media-state-change', {
        meetingId,
        userId,
        type: 'video',
        enabled: !isVideoEnabled,
      });
    }
  };

  const handleLeave = () => {
    // Stop all tracks
    if (stream) {
      stream.getTracks().forEach(track => track.stop());
    }
    if (screenStream) {
      screenStream.getTracks().forEach(track => track.stop());
    }

    // Clean up peer connections
    peersRef.current.forEach(peer => {
      if (peer.peer) {
        peer.peer.destroy();
      }
    });

    // Notify server
    socketRef.current?.emit('leave-meeting', {
      meetingId,
      userId,
    });

    // Disconnect socket
    socketRef.current?.disconnect();
    router.push('/meetings');
  };

  return (
    <div className="fixed bottom-0 left-0 right-0 bg-white border-t p-4 shadow-lg">
      <div className="max-w-4xl mx-auto flex justify-center gap-4">
        <button
          onClick={toggleAudio}
          className={`p-3 rounded-full transition-colors ${
            isAudioEnabled 
              ? 'bg-gray-600 hover:bg-gray-500' 
              : 'bg-red-500 hover:bg-red-600 text-white'
          }`}
          title={isAudioEnabled ? 'Mute' : 'Unmute'}
        >
          {isAudioEnabled ? <Mic size={24} /> : <MicOff size={24} />}
        </button>

        <button
          onClick={toggleVideo}
          className={`p-3 rounded-full transition-colors ${
            isVideoEnabled 
              ? 'bg-gray-600 hover:bg-gray-500' 
              : 'bg-red-500 hover:bg-red-600 text-white'
          }`}
          title={isVideoEnabled ? 'Stop Video' : 'Start Video'}
        >
          {isVideoEnabled ? <Video size={24} /> : <VideoOff size={24} />}
        </button>

        <button
          onClick={onScreenShare}
          className={`p-3 rounded-full transition-colors ${
            isScreenSharing 
              ? 'bg-blue-500 hover:bg-blue-600 text-white' 
              : 'bg-gray-600 hover:bg-gray-600'
          }`}
          title={isScreenSharing ? 'Stop Sharing' : 'Share Screen'}
        >
          {isScreenSharing ? (
            <StopCircleIcon size={24} />
          ) : (
            <ScreenShare size={24} />
          )}
        </button>

        <button
          onClick={handleLeave}
          className="p-3 rounded-full bg-red-500 hover:bg-red-600 text-white transition-colors"
          title="Leave Meeting"
        >
          <Phone size={24} className="rotate-[135deg]" />
        </button>
      </div>
    </div>
  );
}

### Render the Controls Component
Now update your `app/meetings/[id]/page.tsx` file to render the **Control** component in your return statement:

//...
import Controls from "@/components/meeting/controls";

//...

export default function ConferenceRoom() {
    
  //...
  return (
    <div className="flex flex-col gap-4 p-4">
      <div className="text-sm text-gray-500">
        {isConnected ? "Connected to server" : "Disconnected from server"}
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div className="relative">
          <video
            ref={userVideo}
            autoPlay
            muted
            playsInline
            className="w-full rounded-lg bg-gray-900"
          />
          <Controls
            stream={stream}
            screenStream={screenStream}
            isScreenSharing={isScreenSharing}
            socketRef={socketRef}
            peersRef={peersRef}
            meetingId={params.id as string}
            userId={user?.id.toString() || ""}
            onScreenShare={toggleScreenShare}
          />

          <div className="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded">
            You
          </div>
        </div>
        {peers.map(({ peer, userId, stream }) => (
          <PeerVideo key={userId} peer={peer} userId={userId} stream={stream} />
        ))}
      </div>
      <Chat
        socketRef={socketRef}
        user={user as User}
        meetingId={params.id as string}
      />{" "}
    </div>
  );
  
  //...
}


## Adding Meeting Status Management
To manage the state of users in a meeting, like knowing when a user leaves when a user joins the meeting, and seeing the list of all participants that joined the call, let's create a new store to handle the meeting state.

Create a meeting store in `src/store/meeting-store.ts`:

import { create } from "zustand";

interface Participant {
  id: string;
  username: string;
  isAudioEnabled: boolean;
  isVideoEnabled: boolean;
  isScreenSharing: boolean;
  isHost?: boolean;
}

interface MeetingState {
  participants: Record<string, Participant>;
  addParticipant: (participant: Participant) => void;
  removeParticipant: (id: string) => void;
  updateParticipant: (id: string, updates: Partial<Participant>) => void;
  updateMediaState: (id: string, type: 'audio' | 'video' | 'screen', enabled: boolean) => void;
  clearParticipants: () => void;
}

export const useMeetingStore = create<MeetingState>((set) => ({
  participants: {},
  
  addParticipant: (participant) =>
    set((state) => ({
      participants: {
        ...state.participants,
        [participant.id]: {
          ...participant,
          isAudioEnabled: true,
          isVideoEnabled: true,
          isScreenSharing: false,
          ...state.participants[participant.id],
        },
      },
    })),
    
  removeParticipant: (id) =>
    set((state) => {
      const { [id]: removed, ...rest } = state.participants;
      return { participants: rest };
    }),
    
  updateParticipant: (id, updates) =>
    set((state) => ({
      participants: {
        ...state.participants,
        [id]: {
          ...state.participants[id],
          ...updates,
        },
      },
    })),
    
  updateMediaState: (id, type, enabled) =>
    set((state) => ({
      participants: {
        ...state.participants,
        [id]: {
          ...state.participants[id],
          [type === 'audio' ? 'isAudioEnabled' : 
           type === 'video' ? 'isVideoEnabled' : 'isScreenSharing']: enabled,
        },
      },
    })),
    
  clearParticipants: () =>
    set({ participants: {} }),
}));

Here is what the code above does:
* Manages the state of participants in our video conference, using a `Participant` interface to track each user's ID, username, and media states (audio, video, and screen sharing).
* Added the `addParticipant` which handles new joiners with default media states enabled.
* The `removeParticipant` cleanly removes users using object destructuring.
* The `updateParticipant` allows for partial updates to any participant's data.
* The `updateMediaState` specifically manages toggling of audio/video/screen states.
* The `clearParticipants` wipes the entire participants record clean.

## Implementing Participant List
Now let's use the `meeting-store` to display a list of participants in a meeting. Create a participant list component in `src/components/meeting/participant-list.tsx`:

'use client';

import { useState } from 'react';
import { Mic, MicOff, Video, VideoOff, ScreenShare, Users, ChevronDown, ChevronUp } from 'lucide-react';
import { useMeetingStore } from '@/store/meeting-store';

export default function ParticipantList() {
  const [isExpanded, setIsExpanded] = useState(true);
  const participants = useMeetingStore((state) => state.participants);
  const participantCount = Object.keys(participants).length;
  return (
    <div className="fixed left-4 bottom-5 w-80 bg-white rounded-lg shadow-lg border z-50">
      <div 
        className="p-3 border-b flex justify-between items-center cursor-pointer"
        onClick={() => setIsExpanded(!isExpanded)}
      >
        <div className="flex items-center gap-2">
          <Users className='text-gray-600' size={20} />
          <h2 className="font-medium text-gray-600">Participants ({participantCount})</h2>
        </div>
        <button className="text-gray-500 hover:text-gray-700">
          {isExpanded ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
        </button>
      </div>

      {isExpanded && (
        <div className="max-h-96 overflow-y-auto p-4 space-y-2">
          {Object.values(participants).map((participant) => (
            <div
              key={participant.id}
              className="flex items-center justify-between p-2 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors"
            >
              <div className="flex items-center gap-2">
                <span className="font-medium text-gray-600">{participant.username}</span>
                {participant.isHost && (
                  <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded">
                    Host
                  </span>
                )}
              </div>
              <div className="flex gap-2">
                {participant.isAudioEnabled ? (
                  <Mic size={16} className="text-green-500" />
                ) : (
                  <MicOff size={16} className="text-red-500" />
                )}
                {participant.isVideoEnabled ? (
                  <Video size={16} className="text-green-500" />
                ) : (
                  <VideoOff size={16} className="text-red-500" />
                )}
                {participant.isScreenSharing && (
                  <ScreenShare size={16} className="text-blue-500" />
                )}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

Then update your app/meetings/[id]/page.tsx file to render the `ParticipantList` component:


## Final Integration and Testing
We have completed our Google Meet Clone application using Next.js and Strapi. To test the application, follow the steps below:
1. Start your Strapi backend:

cd google-meet-backend
npm run develop

2. Start your Next.js frontend:

cd google-meet-frontend
npm run dev

## Github Source Code
The complete source code for this tutorial is available on [GitHub](https://github.com/icode247/google-meet-clone). Please note that the Strapi backend code resides on the `main` branch and the complete code is on the `part_2` of the repo.

## Series Wrap Up and Conclusion

In this "Building a Google Meet Clone with Strapi 5 and Next.js" blog series, built a complete Google Meet clone with the following functionalities:

- Real-time video conferencing using WebRTC
- Screen sharing capabilities
- Chat functionality
- Participant management