afikderi / laravel-react-webrtc-video-chat Goto Github PK
View Code? Open in Web Editor NEWVideo chat application based on WebRTC (Laravel & reactJS)
Video chat application based on WebRTC (Laravel & reactJS)
I am new to laravel as well as Reactjs, Please help me how i can add incoming alert with ACCEPT and Deny options.
Hi, I am trying to use your project with Vue component. I did most of the translation work, but I stumble on:
this.channel.bind('client-signal-1', (signal) => {
// do stuff
});
I am successfully subscribed to channel, and I am triggering events witch correct name. However, catching them doesn't work. Any ideas?
app.js:83061 Uncaught (in promise) TypeError: Cannot read property 'getUserMedia' of undefined
at app.js:83061
at new Promise ()
at MediaHandler.getPermissions (app.js:83060)
at App.componentWillMount (app.js:83239)
at callComponentWillMount (app.js:61966)
at mountClassInstance (app.js:62059)
at updateClassComponent (app.js:65584)
at beginWork$1 (app.js:67103)
at beginWork$$1 (app.js:71791)
at performUnitOfWork (app.js:70809)
(anonymous) @ app.js:83061
getPermissions @ app.js:83060
componentWillMount @ app.js:83239
callComponentWillMount @ app.js:61966
mountClassInstance @ app.js:62059
updateClassComponent @ app.js:65584
beginWork$1 @ app.js:67103
beginWork$$1 @ app.js:71791
performUnitOfWork @ app.js:70809
workLoopSync @ app.js:70783
renderRoot @ app.js:70476
scheduleUpdateOnFiber @ app.js:70017
scheduleRootUpdate @ app.js:72917
updateContainerAtExpirationTime @ app.js:72945
updateContainer @ app.js:73034
(anonymous) @ app.js:73561
unbatchedUpdates @ app.js:70285
legacyRenderSubtreeIntoContainer @ app.js:73560
render @ app.js:73640
./resources/js/components/App.js @ app.js:83366
webpack_require @ app.js:20
./resources/js/app.js @ app.js:83100
webpack_require @ app.js:20
0 @ app.js:83389
webpack_require @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
Promise.then (async)
componentWillMount @ app.js:83239
callComponentWillMount @ app.js:61966
mountClassInstance @ app.js:62059
updateClassComponent @ app.js:65584
beginWork$1 @ app.js:67103
beginWork$$1 @ app.js:71791
performUnitOfWork @ app.js:70809
workLoopSync @ app.js:70783
renderRoot @ app.js:70476
scheduleUpdateOnFiber @ app.js:70017
scheduleRootUpdate @ app.js:72917
updateContainerAtExpirationTime @ app.js:72945
updateContainer @ app.js:73034
(anonymous) @ app.js:73561
unbatchedUpdates @ app.js:70285
legacyRenderSubtreeIntoContainer @ app.js:73560
render @ app.js:73640
./resources/js/components/App.js @ app.js:83366
webpack_require @ app.js:20
./resources/js/app.js @ app.js:83100
webpack_require @ app.js:20
0 @ app.js:83389
webpack_require @ app.js:20
(anonymous) @ app.js:84
(anonymous) @ app.js:87
when i try to call the other user it gives me no error , but the call don't start
i just see my video , but no the client's
this is my 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 = '8616e928f10be81d8916';
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.handleClick = this.handleClick.bind(this);
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();
});
}
handleClick(event,userId){
// this.callTo(userId);
// var r = confirm("Start the call ???");
// if(r==true){
// 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(){
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 == 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,
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">
{/* <button className="btn btn-success p-3 fa fa-phone" onClick={this.handleClick} > Start Call </button> */}
{[1,2].map((userId)=>{
return this.user.id != userId ? <button key={userId} className="btn btn-success p-3 fa fa-phone" onClick={() => this.callTo(userId)} > Call User { 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>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(, document.getElementById('app'));
}
`
i hope some one can help , thank u so much
i got an error on final step when calling i got this follwing errors
app.js:8443 Uncaught RTCError: Transport channel closed
Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.
Uncaught Error: Connection failed.
help mee thanks in advance
when i want install node modules from "npm install" but it shows "node-sass" error
Uncaught TypeError: this._pc.addTrack is not a function
Remote video stream show black screen when other peer connected at one to one call.
Via pusher connection established successful on server but remote video stream showing black screen.
I don't know but I am suspecting this issue to from the fact that the app is not yet hosted it is still on my locahost.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.