反应 twilio 视频：参与者加入时第一个加入者屏幕变黑

Question

我制作了一个 twillio 视频应用程序。我可以在笔记本电脑网站上显示本地视频，但是当我从另一个 chrome 标签或手机 chrome 浏览器加入时，笔记本电脑上的视频变黑，只显示一个视频，而两个视频都应该正确显示.我正在学习本教程

https://www.twilio.com/blog/build-a-custom-video-chat-app-with-react-and-twilio-programmable-video

这是我的代码

App.js

            import './App.scss';
            import React, {Component} from 'react';
            import Room from './Components/Room';
            const { connect } = require('twilio-video');
            const Token = {"identity":"Jose Corkery","token":"...sioAMt4..."}

class App extends Component {
    constructor(props) {
      super(props)
  
      this.state = {
        identity: '',
        room: null
      }
      this.inputRef = React.createRef();
      this.joinRoom = this.joinRoom.bind(this);
      this.returnToLobby = this.returnToLobby.bind(this);
      this.updateIdentity = this.updateIdentity.bind(this);
      this.removePlaceholderText = this.removePlaceholderText.bind(this)

    }


    async joinRoom() {
        try {
        //  const response = Token
         // const data = await response.json();
          const room = await connect(Token.token, {
            name: 'cool-room',
            audio: true,
            video: true
          });
          // alert(room)
          this.setState({ room: room });
        } catch(err) {
          alert(err);
        }
      }

      updateIdentity(event) {
        this.setState({
          identity: event.target.value
        });
      }


      returnToLobby() {
        this.setState({ room: null });
      }

      removePlaceholderText() {
        this.inputRef.current.placeholder = '';
      }

      render() {
        const disabled = this.state.identity === '' ? true : false;

        return (
          <div className="app">
            { 
              this.state.room === null
              ? <div className="lobby">
                   <input 
                     ref={this.inputRef} 
                     onClick={this.removePlaceholderText} 
                     placeholder="What's your name?"
                     onChange={this.updateIdentity} 

                     />
                  <button disabled = {disabled} onClick={this.joinRoom}>Join Room</button>
                </div>
              :  <Room returnToLobby={this.returnToLobby} room={this.state.room} /> 
            }
          </div>
        );
      }


  }

export default App;

       

Room.jsx

      import React, { Component } from 'react';
      import Participant from './Participant';
      const { connect } = require('twilio-video');

class Room extends Component {

    componentDidMount() {
        this.props.room.on('participantConnected', participant => this.addParticipant(participant));
        this.props.room.on('participantDisconnected', participant => this.removeParticipant(participant));
        window.addEventListener("beforeunload", this.leaveRoom);
    }

    componentWillUnmount() {
        this.leaveRoom();
    }

    addParticipant(participant) {
        console.log(`${participant.identity} has joined the room.`);

        alert(`+ Participant : ${participant.identity}`)

        this.setState({
            remoteParticipants: [...this.state.remoteParticipants, participant]
        })
    }

    removeParticipant(participant) {
         alert(`Leaving : ${participant.identity}`)
        console.log(`${participant.identity} has left the room`);

        this.setState({
            remoteParticipants: this.state.remoteParticipants.filter(p => p.identity !== participant.identity)
        });
    }

    leaveRoom() {
        this.props.room.disconnect();
        this.props.returnToLobby();
    }




    constructor(props) {
        super(props)
        this.state = {
            remoteParticipants: Array.from(this.props.room.participants.values())
        }

        this.leaveRoom = this.leaveRoom.bind(this);

    }


    render() {
        return (
            <div className="room">
                <div className="participants">
                    <Participant
                        key={this.props.room.localParticipant.identity}
                        localParticipant="true"
                        participant={this.props.room.localParticipant} />
                    {
                        this.state.remoteParticipants.map(participant =>
                            <Participant key={participant.identity} participant={participant} />
                        )
                    }
                </div>
                <button id="leaveRoom" onClick={this.leaveRoom}>Leave Room</button>
            </div>
        );
    }


}

export default Room

参与者.jsx

import React, { Component } from 'react';
import Track from './Track';

const { connect } = require('twilio-video');

class Participant extends Component {

    componentDidMount() {
        if (!this.props.localParticipant) {
          this.props.participant.on('trackSubscribed', track => this.addTrack(track));
        }
      }

    constructor(props) {
        super(props);
      
        const existingPublications = Array.from(this.props.participant.tracks.values());
        const existingTracks = existingPublications.map(publication => publication.track);
        const nonNullTracks = existingTracks.filter(track => track !== null)
      
        this.state = {
          tracks: nonNullTracks
        }
      }

      addTrack(track) {
        this.setState({
          tracks: [...this.state.tracks, track]
        });
      }

      render() {
        return ( 
          <div className="participant" id={this.props.participant.identity}>
            <div className="identity">{this.props.participant.identity}</div>
            { 
              this.state.tracks.map(track => 
                <Track key={track} filter={this.state.filter} track={track}/>)
            }
          </div>
        );
      }


}

export default Participant

Track.jsx

import React, { Component } from 'react';

class Track extends Component {

    componentDidMount() {
        if (this.props.track !== null) {
          const child = this.props.track.attach();
          this.ref.current.classList.add(this.props.track.kind);
          this.ref.current.appendChild(child)
        }
      }

    constructor(props) {
        super(props)
        this.ref = React.createRef();
      }


      render() {
        return (
          <div className="track" ref={this.ref}>
          </div> 
        )
      }


}

export default Track

演示：https://android-anime.web.app

我只有两个视频事件 onJoin 和 onLeave 我需要额外的事件吗？ 解决办法是什么？如果您的解决方案有效，我将奖励您最佳答案。谢谢！！