ایجاد یک سیستم telemarketing با Twilio Video و React

const express = require("express");
const twilio = require("twilio");
require("dotenv").config();

const app = express();
const port = 3001;

const { TWILIO_ACCOUNT_SID, TWILIO_API_KEY, TWILIO_API_SECRET } = process.env;

app.use(express.json());

app.post("/token", (req, res) => {
    const { identity, room } = req.body;
    const AccessToken = twilio.jwt.AccessToken;
    const VideoGrant = AccessToken.VideoGrant;

    const token = new AccessToken(
        TWILIO_ACCOUNT_SID,
        TWILIO_API_KEY,
        TWILIO_API_SECRET,
        { identity }
    );

    token.addGrant(new VideoGrant({ room }));

    res.json({ token: token.toJwt() });
});

app.listen(port, () => {
    console.log(`Servidor rodando em http://localhost:${port}`);
});

npm install @twilio/video

import { useState, useEffect } from "react";
import Video from "twilio-video";

export const useVideoChat = (token, roomName) => {
    const [room, setRoom] = useState(null);
    const [participants, setParticipants] = useState([]);
    const [isMuted, setIsMuted] = useState(false);
    const [isCameraOn, setIsCameraOn] = useState(true);

    useEffect(() => {
        if (token) {
            Video.connect(token, { name: roomName }).then(room => {
                setRoom(room);
                setParticipants([...room.participants.values()]);

                room.on("participantConnected", participant => {
                    setParticipants(prev => [...prev, participant]);
                });

                room.on("participantDisconnected", participant => {
                    setParticipants(prev => prev.filter(p => p !== participant));
                });
            });
        }
    }, [token]);

    const toggleMute = () => {
        setIsMuted(!isMuted);
    };

    const toggleCamera = () => {
        setIsCameraOn(!isCameraOn);
    };

    const leaveRoom = () => {
        room?.disconnect();
        setRoom(null);
    };

    return { room, participants, isMuted, isCameraOn, toggleMute, toggleCamera, leaveRoom };
};

import React, { useRef, useEffect, useState } from "react";

const Participant = ({ participant }) => {
    const videoRef = useRef();

    useEffect(() => {
        participant.tracks.forEach(trackPub => {
            if (trackPub.track) {
                videoRef.current.appendChild(trackPub.track.attach());
            }
        });
    }, [participant]);

    return (
        <div>
            <h3>{participant.identity}</h3>
            <div ref={videoRef}></div>
        </div>
    );
};

export const VideoRoom = ({ participants, toggleMute, toggleCamera, leaveRoom }) => {
    const [showModal, setShowModal] = useState(false);
    const shareLink = "https://meusite.com/sala?token=xyz";

    return (
        <div>
            {participants.map(participant => (
                <Participant key={participant.sid} participant={participant} />
            ))}
            <button onClick={toggleMute}>Mutar</button>
            <button onClick={toggleCamera}>Ligar/Desligar Câmera</button>
            <button onClick={() => setShowModal(true)}>Compartilhar</button>
            <button onClick={leaveRoom}>Finalizar Chamada</button>

            {showModal && (
                <div className="modal">
                    <p>Compartilhe este link:</p>
                    <input type="text" value={shareLink} readOnly />
                    <button onClick={() => setShowModal(false)}>Fechar</button>
                </div>
            )}
        </div>
    );
};