afikderi / laravel-react-webrtc-video-chat Goto Github PK

I am new to laravel as well as Reactjs, Please help me how i can add incoming alert with ACCEPT and Deny options.

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

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.

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.

Uncaught TypeError: this._pc.addTrack is not a function

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

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?