安装带有强大过滤器的twilio视频应用react

npx create-react-app twilio-video-app
cd twilio-video-app

npm install twilio-video react-router-dom

mkdir src/components
touch src/components/VideoApp.js

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

const VideoApp = () => {
  const [room, setRoom] = useState(null);

  useEffect(() => {
    const fetchToken = async () => {
      // 获取Twilio令牌
      const response = await fetch('/api/token');
      const data = await response.json();

      // 连接到Twilio视频房间
      const videoRoom = await Video.connect(data.token, {
        name: 'my-room',
        audio: true,
        video: { width: 640 },
      });

      setRoom(videoRoom);
    };

    fetchToken();

    return () => {
      // 断开连接并离开房间
      if (room) {
        room.disconnect();
      }
    };
  }, []);

  return (
    <div>
      <h1>Twilio Video App</h1>
      <div id="video-container"></div>
    </div>
  );
};

export default VideoApp;

mkdir src/api
touch src/api/token.js

const express = require('express');
const { AccessToken } = require('twilio').jwt;

const app = express();

app.get('/api/token', (req, res) => {
  const accountSid = 'YOUR_TWILIO_ACCOUNT_SID';
  const apiKey = 'YOUR_TWILIO_API_KEY';
  const apiSecret = 'YOUR_TWILIO_API_SECRET';

  const token = new AccessToken(accountSid, apiKey, apiSecret);
  token.identity = 'user';

  const videoGrant = new AccessToken.VideoGrant();
  token.addGrant(videoGrant);

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

app.listen(3001, () => {
  console.log('Server running on port 3001');
});

"proxy": "http://localhost:3001"

import React from 'react';
import ReactDOM from 'react-dom';
import VideoApp from './components/VideoApp';

ReactDOM.render(
  <React.StrictMode>
    <VideoApp />
  </React.StrictMode>,
  document.getElementById('root')
);

npm start