RTC

Installation

1. $ npm i @ruby-s/use-rtc
2. Add import useRTC from "@ruby-s/use-rtc"

How to use

preinstalled-package

$ npm install socket.io-client

Parameters

Only one object parameter is required.

{
  socket,
  participants,
  setParticipants,
}

socket

• type: Socket -> It depends on socket.io-client.

participants

• type: Map<string, MediaStream>

setParticipants

• type: React.Dispatch<React.SetStateAction<Map<string, MediaStream>>>

Example

import { io } from "socket.io-client";

const socket = io("SERVER_URL");
const [participants, setParticipants] = useState<Map<string, MediaStream>>(new Map());

useRTC({ socket, participants, setParticipants });

Beware that if you create io inside a component, the socket object may be recreated every time it is rendered.

participants

participants is a Map. The key is a string type socketId, and the value is a MediaStream type.

Things to note

I have not been able to deploy Signaling Server because I have no financial income. You should implement a simple signaling server. The following are socket event name constants of Signaling Server. Please make sure to name it below!

server
| Event Name | EMIT or ON | description | | --- | --- | --- | | "send-hello" | ON | Get client connection | | "receive-hello" | EMIT | Informing other clients of a particular client's position | | "send-offer" | ON | Get an offer | | "receive-offer" | EMIT | Send an offer to a specific client | | "send-answer" | ON | Get an answer | | "receive-answer" | EMIT | Send an answer to a specific client | | "send-ice" | ON | Get an ice candidate | | "receive-ice" | EMIT | Send an ice candidate to a specific client | | "send-bye" | ON | Receive client exit event | | "receive-bye" | EMIT | Notifying other clients of a specific client's exit |

Example Code (Signaling socket server)

// .ts
import { Server } from "socket.io";

function SignalingSocketServer(io: Server) {
  io.on("connection", (socket) => {
    socket.on("send-hello", () => {
      const senderId = socket.id;
      socket.broadcast.emit("receive-hello", senderId); // broadcast
    });

    socket.on("send-offer", (offer, receiverId) => {
      const senderId = socket.id;
      socket.to(receiverId).emit("receive-offer", offer, senderId);
    });

    socket.on("send-answer", (answer, receiverId) => {
      const senderId = socket.id;
      socket.to(receiverId).emit("receive-answer", answer, senderId);
    });

    socket.on("send-ice", (ice, receiverId) => {
      const senderId = socket.id;
      socket.to(receiverId).emit("receive-ice", ice, senderId);
    });

    socket.on("send-bye", () => {
      const senderId = socket.id;
      socket.broadcast.emit("receive-bye", senderId);
    });
  });
}

export default SignalingSocketServer;

useSocket

Parameters

useSocket(path: string, namespace: string);

path: Base Path
namespace: socket's namespace