Не удается получить информацию о противоположной стороне в моем приложении для видеовызовов

Question

У меня очень тревожная проблема с получением медиафайлов с другого устройства в приложении для видеочата. Когда я захожу на страницу, запрос разрешения показывается легко, и после разрешения я вижу свои медиа, но когда я нажимаю кнопку вызова пользователя номер 2, ничего не происходит. У меня нет ошибки в моей консоли, просто она показывает предупреждение (Предупреждение: componentWillMount был переименован и не рекомендуется для использования.). Может быть из-за этого? Кто-нибудь может мне помочь? А вот и мой код:

export default class App extends Component {
    constructor(){
        super();

        this.state = {
            hasMedia: false,
            otherUserId: null,
        };

        this.user = window.user;
        this.user.stream = null;
        this.peers = {};

        this.mediaHandler = new MediaHandler();
        this.setupPusher();

        this.callTo = this.callTo.bind(this);
        this.setupPusher = this.setupPusher.bind(this);
        this.startPeer = this.startPeer.bind(this);
    }

    componentWillMount(){
        this.mediaHandler.getPermissions()
            .then((stream)=> {
                this.setState({hasMedia: true});
                this.user.stream = stream;

                try {
                    this.myVideo.srcObject = stream;
                } catch (e) {
                    this.myVideo.srcObject = stream;
                }

                this.myVideo.play();
                })
    }

    setupPusher() {
        this.pusher = new Pusher(APP_KEY, {
            authEndpoint: '/pusher/auth',
            cluster: 'ap2',
            auth: {
                params: this.user.id,
                headers: {
                    'X-CSRF-Token': window.csrfToken
                }
            }
            });
        this.channel = this.pusher.subscribe('presence-video-channel');

        this.channel.bind('client-signal-${this.user.id}',(signal) => {
            let peer = this.peers[signal.userId];

            // if peer is not already exists we got an incoming call
            if(peer == undefined) {
                this.setSatate({otherUserId: signal.userId});
                peer = this.startPeer(signal.userId, false);
            }

            peer.signal(signal.data);
        });
    }

    startPeer(userId, initiator = true) {
        const peer = new Peer({
            initiator,
            stream: this.user.stream,
            trickle: false
        });

        peer.on('signal', (data) => {
           console.log(data);
           this.channel.trigger('client-signal-${userId}', {
               type: 'signal',
               userId: this.user.id,
               data: data
           }) ;
        });

        peer.on('stream',(stream) => {
            try {
                this.userVideo.srcObject = stream;
            } catch (e) {
                this.userVideo.srcObject = stream;
            }

            this.userVideo.play();
        });

        peer.on('close', () => {
            let peer = this.peers[userId];
            if (peer != undefined){
                peer.destroy();
            }
            this.peers[userId] = undefined;
        });

        return peer;
        }
    callTo(userId) {
        this.peers[userId] = this.startPeer(userId);
    }

    render() {
        return (
            <div className="App">
                {[1,2,3,4].map((userId) => {
                    return this.user.id != userId ? <button key={userId} onClick={() => this.callTo(userId)}> Call {userId}</button> : null;
                })

                }

                <div className="video-container">
                    <video className="my-video" ref={(ref)=>{this.myVideo = ref;}}></video>
                    <video className="user-video" ref={(ref)=>{this.userVideo = ref;}}></video>
                </div>
            </div>
        );
    }
}