Laravel Webrtc video chat with react and pusher - php

Question

I created a web app for video using Laravel, pusher and react js but now problem is that I was following the tutorial I don't know about the react but I'm good in Laravel.
Now I want to add a function where I can send email to a user so he can join me in video chat, right now it is working on click functions where react take an id and send the request to the client channel.
here is my react code.
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'));
}
Here is my pusher function.
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);
}
My head script
!-- Scripts -->
#if(auth()->user())
<script>
window.user = {
id:{{auth()->id()}},
name:"{{auth()->user()->first_name}}"
};
window.csrfToken = "{{ csrf_token() }}";
</script>
#endif
The simple thing I want to create a room where I can send email to user to join me one-to-one video chat.
I'm searching this from last night but no good result till now