Reactjs react twilio视频：参与者加入时第一个加入者屏幕为黑色

我制作了一个twillio视频应用程序。我可以在笔记本电脑网站上显示本地视频，但当我从另一个chrome选项卡或手机chrome浏览器加入时，笔记本电脑上的视频变为黑色，只有一个视频显示，而这两个视频都应该正确显示。我遵循本教程

这是我的密码

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;

       

import'/App.scss'；
从“React”导入React，{Component}；
从“./组件/房间”导入房间；
const{connect}=require（'twilio-video'）；
常量标记={“标识”：“Jose Corkery”，“标记”：“…sioAMt4…”
类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
标识：“”，
房间：空
}
this.inputRef=React.createRef（）；
this.joinRoom=this.joinRoom.bind（this）；
this.returnToLobby=this.returnToLobby.bind（this）；
this.updateIdentity=this.updateIdentity.bind（this）；
this.removepholderText=this.removepholderText.bind（this）
}
异步joinRoom（）{
试一试{
//常量响应=令牌
//const data=wait response.json（）；
const room=等待连接（Token.Token{
名称：'凉爽的房间'，
音频：是的，
视频：真的
});
//警报（房间）
this.setState（{room:room}）；
}捕捉（错误）{
警惕（err）；
}
}
更新实体（事件）{
这是我的国家({
标识：event.target.value
});
}
returnToLobby（）{
this.setState（{room:null}）；
}
RemovePlaceholder文本（）{
this.inputRef.current.placeholder=''；
}
render（）{
const disabled=this.state.identity==''？true:false；
返回(
{ 
this.state.room==null
? 
会客室
:   
}
);
}
}
导出默认应用程序；

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

import React，{Component}来自'React'；
从“./Participant”导入参与者；
const{connect}=require（'twilio-video'）；
教室扩展组件{
componentDidMount（）{
this.props.room.on（'participantConnected'，participant=>this.addParticipant（participant））；
this.props.room.on（'participantDisconnected'，participant=>this.removeParticipant（participant））；
window.addEventListener（“卸载前”，this.leaveRoom）；
}
组件将卸载（）{
这个。离开房间（）；
}
添加参与者（参与者）{
log（`${participant.identity}已加入文件室。`）；
警报（`+参与者：${Participant.identity}`）
这是我的国家({
remoteParticipants:[…this.state.remoteParticipants，participant]
})
}
removeParticipant（参与者）{
警报（`Leaving:${participant.identity}`）
log（`${participant.identity}已离开房间`）；
这是我的国家({
remoteParticipants:this.state.remoteParticipants.filter（p=>p.identity！==participant.identity）
});
}
休息室{
this.props.room.disconnect（）；
this.props.returnToLobby（）；
}
建造师（道具）{
超级（道具）
此.state={
remoteParticipants:Array.from（this.props.room.participants.values（））
}
this.leaveRoom=this.leaveRoom.bind（this）；
}
render（）{
返回(
{
this.state.remoteParticipants.map（participant=>
)
}
离开房间
);
}
}
导出默认房间

Participant.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

import React，{Component}来自'React'；
从“./Track”导入曲目；
const{connect}=require（'twilio-video'）；
类参与者扩展组件{
componentDidMount（）{
如果（！this.props.localParticipant）{
this.props.participant.on（'trackSubscribed'，track=>this.addTrack（track））；
}
}
建造师（道具）{
超级（道具）；
const existingPublications=Array.from（this.props.participant.tracks.values（））；
const existingTracks=existingPublications.map（publication=>publication.track）；
const nonNullTracks=existingTracks.filter（track=>track！==null）
此.state={
轨迹：非空轨迹
}
}
添加轨迹（轨迹）{
这是我的国家({
曲目：[…this.state.tracks，track]
});
}
render（）{
报税表（
{this.props.participant.identity}
{ 
this.state.tracks.map（track=>
)
}
);
}
}
导出默认参与者

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

import React，{Component}来自'React'；
类跟踪扩展组件{
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）
}
}
建造师（道具）{
超级（道具）
this.ref=React.createRef（）；
}
render（）{
返回(
)
}
}
导出默认轨迹

演示：

我只有两个视频活动onJoin和onLeave我还需要其他活动吗？ 解决办法是什么？如果您的解决方案有效，我将奖励您最佳答案。谢谢