Laravel Webrt c видео-чат с реагировать и толкать

Question

Я создал веб-приложение для видео, используя Laravel, нажмите и реагируйте js, но теперь проблема в том, что я следовал учебнику, я не знаю о реакции, но я хорошо разбираюсь в Laravel. Теперь я хочу добавить функцию, с помощью которой я могу отправлять электронную почту пользователю, чтобы он мог присоединиться ко мне в видеочате, сейчас он работает над функциями щелчка, где реагируют, принимают идентификатор и отправляют запрос на канал клиента. Вот мой код реагирования.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import MediaHandler from '../MediaHandler';
import Pusher from 'pusher-js';
import Peer from 'simple-peer';

const APP_KEY = 'removed-app-key';

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.src = URL.createObjectURL(stream);
                }

                this.myVideo.play();
            })
    }

    setupPusher() {
        Pusher.logToConsole=true;
        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.setState({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) => {
            this.channel.trigger(`client-signal-${userId}`, {
                type: 'signal',
                userId: this.user.id,
                userName:this.user.name,
                data: data
            });
        });

        peer.on('stream', (stream) => {
            try {
                this.userVideo.srcObject = stream;
            } catch (e) {
                this.userVideo.src = URL.createObjectURL(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 {name}</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>
        );
    }
}

if (document.getElementById('app')) {
    ReactDOM.render(<App />, document.getElementById('app'));
}

Вот моя функция толкателя.

public function authenticate(Request $request){
        $socketId= $request->socket_id;
        $channelName= $request->channel_name;
        $pusher = new Pusher('APP_KEY', 'APP_SECRET','APP_ID',['cluster'=> 'ap2','forceTLS'=>true]);
        $presence_data = ['name' => auth()->user()->name];
        $key = $pusher->presence_auth($channelName, $socketId, auth()->id(), $presence_data);

        return response($key);
    }

Мой скрипт головы

!-- Scripts -->
    @if(auth()->user())
        <script>
            window.user = {
                id:{{auth()->id()}},
                name:"{{auth()->user()->first_name}}"
            };
            window.csrfToken = "{{ csrf_token() }}";
        </script>
    @endif

Простая вещь, которую я хочу создать комната, где я могу отправить электронное письмо пользователю, чтобы присоединиться ко мне в видеочате. Я ищу это с прошлой ночи, но пока не получаю хорошего результата