如何连接 Twillio 以获取访问令牌？

Question

我正在使用twillio制作这个视频聊天应用程序。 因此，每当它获得token时，它都会渲染Room组件。 不幸的是，我无法使用 nodemon 运行我的应用程序。 这就是我组织代码的方式！ 请帮助我找出它有什么问题或缺失！ 太感谢了！

客户：

应用程序.js：

import React from "react";
import VideoChat from "./VideoChat";

const App = () => {
  return (
    <div className="app">
      <header>
        <h1> Video Chat with Hooks </h1>{" "}
      </header>{" "}
      <main>
        <VideoChat />
      </main>{" "}
      <footer>
        <p>
          Made with by <a href="https://twitter.com/philnash"> philnash </a>{" "}
        </p>{" "}
      </footer>{" "}
    </div>
  );
};

export default App;

视频聊天.js：

import React, { useState, useCallback } from "react";
import Lobby from "./Lobby";
import Room from "./Room"
function VideoChat() {
  const [username, setUsername] = useState("");
  const [roomName, setRoomName] = useState("");
  const [token, setToken] = useState(null);

  const handleUsernameChange = useCallback((event) => {
    setUsername(event.target.value);
  }, []);

  const handleRoomNameChange = useCallback((event) => {
    setRoomName(event.target.value);
  }, []);

  const handleSubmit = useCallback(
    async (event) => {
      event.preventDefault();
      const data = await fetch("/video/token", {
        method: "POST",
        body: JSON.stringify({
          identity: username,
          room: roomName,
        }),
        headers: {
          "Content-Type": "application/json",
        },
      }).then((res) => res.json());
      setToken(data.token);
    },
    [username, roomName]
  );

  const handleLogout = useCallback((event) => {
    setToken(null);
  }, []);

  return (
    <div>
      {token ? (<Room roomName={roomName} token={token} handleLogout={handleLogout} />) 
      : (<Lobby
          username={username}
          roomName={roomName}
          handleUsernameChange={handleUsernameChange}
          handleRoomNameChange={handleRoomNameChange}
          handleSubmit={handleSubmit}
        />)
       }
    </div>
  );
}
export default VideoChat;

大厅.js：

import React from "react";

const Lobby = ({
  username,
  handleUsernameChange,
  roomName,
  handleRoomNameChange,
  handleSubmit
}) => {
  return (
    <form onSubmit={handleSubmit}>
      <h2> Enter a room </h2>{" "}
      <div>
        <label htmlFor="name"> Name: </label>{" "}
        <input
          type="text"
          id="field"
          value={username}
          onChange={handleUsernameChange}
          required
        />
      </div>{" "}
      <div>
        <label htmlFor="room"> Room name: </label>{" "}
        <input
          type="text"
          id="room"
          value={roomName}
          onChange={handleRoomNameChange}
          required
        />
      </div>{" "}
      <button type="submit"  > Submit </button>{" "}
    </form>
  );
};

export default Lobby;

房间.js：

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

const Room = ({ roomName, token, handleLogout }) => {
  const [room, setRoom] = useState(null);
  const [participants, setParticipants] = useState([]);

  const remoteParticipants = participants.map(participant=> {
    <p key={participant.sid}>{participant.identity}</p>
  })

  useEffect(() => {
    const participantConnected = participant => {
      setParticipants(prevParticipants => [...prevParticipants, participant]);
    };
    const participantDisconnected = participant => {
      setParticipants(prevParticipants =>
        prevParticipants.filter(p => p !== participant)
      );
    };
    Video.connect(token, {
      name: roomName
    }).then(room => {
      setRoom(room);
      room.on('participantConnected', participantConnected);
      room.on('participantDisconnected', participantDisconnected);
      room.participants.forEach(participantConnected);
    });
  });

  return (
    <div className="room">
      <h2>Room: {roomName}</h2>
      <button onClick={handleLogout}>Log out</button>
      <div className="local-participant">
        {room ? (<p key={room.localParticipant.sid}>{room.localParticipant.identity}</p>) : ''}
      </div>
      <h3>Remote Participants</h3>
      <p>{remoteParticipants}</p>
    </div>
  )
};

export default Room;

服务器

index.js：

const TWILIO_ACCOUNT_SID = //
const TWILIO_API_KEY = //
const TWILIO_API_SECRET = //
    // Used when generating any kind of tokens
    // To set up environmental variables, see http://twil.io/secure
const twilioAccountSid = process.env.TWILIO_ACCOUNT_SID;
const twilioApiKey = process.env.TWILIO_API_KEY;
const twilioApiSecret = process.env.TWILIO_API_SECRET;

const identity = 'user';

// Create Video Grant
const videoGrant = new VideoGrant({
    room: 'cool room',
});

// Create an access token which we will sign and return to the client,
// containing the grant we just created
const token = new AccessToken(
    twilioAccountSid,
    twilioApiKey,
    twilioApiSecret, {
        identity: identity
    }
);
token.addGrant(videoGrant);

// Serialize the token to a JWT string
console.log(token.toJwt());

package.json：

{
    "name": "server",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "server": "nodemon ./index.js"
    },
    "author": "tram",
    "license": "ISC",
    "dependencies": {
        "cors": "^2.8.5",
        "express": "^4.17.2",
        "nodemon": "^2.0.15",
        "twilio-video": "^2.18.3"
    }
}