diff --git a/README.md b/README.md index e68a9101ce779005dfd82ec1eaf78bbbff110b69..7155b536e3a835e31d3bff16bc17a42136c1218d 100644 --- a/README.md +++ b/README.md @@ -129,6 +129,7 @@ class Party extends Component { this.state = { nick: this.props.nick, roomID: `party-${this.props.roomName}`, + peers: [], muted: false, camPaused: false }; @@ -145,6 +146,7 @@ class Party extends Component { autoRequestMedia: true, // Optional: nickname nick: this.state.nick, + debug: true }); this.webrtc.on('videoAdded', this.addVideo); @@ -155,11 +157,15 @@ class Party extends Component { } addVideo = (stream, peer) => { - this.webrtc.attachStream(stream, this.remoteVideos[peer.id]); + this.setState({ peers: [...this.state.peers, peer] }, () => { + this.webrtc.attachStream(stream, this.remoteVideos[peer.id]); + }); } removeVideo = (peer) => { - // Clean up video + this.setState({ + peers: this.state.peers.filter(p => !p.closed) + }); } handleConnectionError = (peer) => { @@ -175,10 +181,9 @@ class Party extends Component { } // Show fellow peers in the room - generateRemotes = () => this.webrtc.getPeers().map((p) => ( + generateRemotes = () => this.state.peers.map((p) => ( <div key={p.id}> - // The video parent container needs a special id - <div id={`${this.webrtc.getContainerId(p)}`}> + <div id={/* The video container needs a special id */ `${this.webrtc.getContainerId(p)}`}> <video key={this.webrtc.getId(p)} // Important: The video element needs both an id and ref