DEV Community

Adding Video Chat To Your Laravel App

Kofi Mupati on November 12, 2020

Introduction I was required to build a custom video chat application for a Vuejs and Laravel project. I went through a lot of hoops to g...

Read full post

Ruchit Darji • Oct 5 '21 • Edited

Hello Kofi Mupati,

I have one question related to implementing this video call functionality...

Q. I need to display a video call notification and let the user choose between finish the current call and takes the new one or continue in the current call and don't take the new call...

Please Suggest the how to make this feature...

Kofi Mupati • Oct 6 '21 • Edited

This will take some tweaking. You need to send an event to the caller that will inform them to cancel the call. I've not thought through the use case for multiple incoming calls. This is beyond the scope of what I can offer in a demo application.

Ruchit Darji • Oct 7 '21 • Edited

So, All time refresh browser page of video call at both side ???

Because I need hangup first call and attend second call without page refresh...

But you suggest refresh both browsers to call again for same user second time calling...

Kofi Mupati • Oct 7 '21

that is not necessary. Read more on how to do all that through websocket events and listeners.

Ruchit Darji • Oct 26 '21

Hello Kofi Mupati,

Any reference to add a noise canceling filter to the video call...right now if the volume is high there is a lot of ecco...

Kofi Mupati • Oct 26 '21

I've not looked into that yet.

Ruchit Darji • Oct 27 '21

Let us know if you find anything about this. It will be very helpful and grateful for us.

Ruchit Darji • Nov 10 '21

Hello Kofi Mupati,

did you find anything related to this echo issue in the video call ???

I have spent many days to solving this issue but not getting anything solution in this.

Please suggest any reference links where can i solve this issue in my video chat application.

Kofi Mupati • Nov 11 '21

I've not had time to look into that yet.

Ruchit Darji • Nov 16 '21

Hello Kofi Mupati,

I have fixed this issue in my video chat functionality..

I have added "muted" parameter in placed user video element div in vue component file.

Many many thanks for your guidance and documentation...

Kofi Mupati • Nov 16 '21

That's good to know. All the best Ruchit Darji

Ruchit Darji • Nov 22 '21

Hello Kofi Mupati,

I have one question related this case...

how to placed video call is automatically ended within 30 seconds if the receiver user cannot accept the incoming call ???

So, Please suggest how can i do this...

Kofi Mupati • Nov 22 '21

when you place the call, you can set a timer which calls the endCall after the specified period. Play around with the setTimeout function in JavaScript.

Ruchit Darji • Nov 23 '21

Thank you again for your guidance...

nehasahu001 • Aug 27 '21 • Edited

Hello Kofi Mupati,

Big Thanks to you to help it out.

I followed this steps and I able to impletement on system. And It's working fine for me. But when i try in different device, it's failed to connect. and I got an error like 'Connection Failed'.

Can you please help me here?

Thank you again for your guidance.

Kofi Mupati • Aug 28 '21

Are the devices on a different network?

nehasahu001 • Aug 31 '21

Yes, it's different network.

Kofi Mupati • Aug 31 '21

This is where you need to set up a TURN server.

nehasahu001 • Aug 31 '21

Okay, is it reliable to use this numb.viagenie.ca/ free STUN/TURN server here?

Kofi Mupati • Aug 31 '21

Not tried it before but you can go ahead and use it.

nehasahu001 • Aug 31 '21

Thanks a lot!

nehasahu001 • Aug 31 '21

I tried TURN Server also but still it's same error i am facing. As I found here (github.com/feross/simple-peer/issu...) that it's taking much time to paste the signals. don't you think so? If yes than, is there any improvement in time?

Naeem Ijaz • Jul 2 '21

Bro Thanks
I am facing a problem.
i'm Getting Error
DOMException: Failed to construct 'RTCPeerConnection': '' is not a valid URL.
Please Help Me ASAP Because it is my final Year Project
Here is the SS: i.imgur.com/S7AKqHg.png

Kofi Mupati • Jul 3 '21

Maybe an error related to the absence of TURN Server

Naeem Ijaz • Jul 3 '21

Sir Thankyou So Much For Your Reply
How can i create TURN in my hosting panal.
I'm using shared hosting in NAMECHEAP

Kofi Mupati • Jul 3 '21

get a digitalocean droplet and use the following tutorial: ourcodeworld.com/articles/read/117...

but before that, comment out the following block of code and check whether it will work.

        config: {
          iceServers: [
            {
              urls: this.turn_url,
              username: this.turn_username,
              credential: this.turn_credential,
            },
          ],
        },

Alvin Luo • May 8 '21

Bro Thanks for your explanation.
I am facing a problem :
I implement it the same as you , I do it in localhost , I do not use turn server , when I call a user from another user , it works fine. But second time I call it and get an error say : Fails To set remote answer ! Pls help me

Kofi Mupati • May 8 '21

Were you able to establish the call between the 2 participants? Note that this video call is limited to only 2 people and not a group call. At times you'd have to refresh both browsers to call again. Obviously, this is a demo and one has to consider a number of things to make it very production-ready.

Darío Chiappello • May 28 '21

I have this problem when I click the call button.

{message: "Failed to connect to Pusher.", exception: "Illuminate\Broadcasting\BroadcastException",…}
exception: "Illuminate\Broadcasting\BroadcastException"
file:"\vendor\laravel\framework\src\Illuminate\Broadcasting\Broadcasters\PusherBroadcaster.php"
line: 122
message: "Failed to connect to Pusher."

Kofi Mupati • May 29 '21

You must install and configure pusher. You must create an account and add the credentials.

Sargis • Apr 27

Hello Kofi Mupati,

I am currently working on a project where I have to create a video chat, but it doesn't have to be just 2 people talking to each othe. In my project there are groups and users join the groups they need. Now the calls should be in groups only and anyone from that group should be able to join the call. Now my question is: is it possible to use your implementation within my project. Will it work?

Kofi Mupati • Apr 29

this implementation is not scalable at all. it's more of proof of concept and for my personal studies. Send me a message as scientificgh[at]gmail.com if you are open to consulting.

hbakouane • Jan 31 '21

A great article, Thanks.

stanliwise • Jan 7 '21

such a nice article!
Nice

KhoPhi • Nov 16 '20

Such a detailed article. Thanks.
Going to check out the github project.

Ramesh-php • Sep 17 '21

Hi Mupati

I'm getting error, logged in different user and different browser also. But all the user to show offline only.

Timothy Kimemia • Jul 30 '21

can someone explain/guide how to reduce or remove the echo from the video when connected?

sanjai-kumar • Jun 15 '23 • Edited

Hello @mupati , I need to record the video Chat conversation .Please Gudie me how to do using Video chat .

Mehedi Hasan • Apr 14 '22

Hello Kofi Mupati,

I'm following all your steps but it doesn't work, none of my users are doing online shows, how can i fix this problem

Kofi Mupati • Apr 14 '22

Please check your pusher setup and configuration

Mehedi Hasan • Apr 15 '22

allready configuration my pusher account , but did not work , you can check my env

Kofi Mupati • Apr 15 '22

That’s the possible reason I can think of at the moment unless I see your code. Kindly go through the comments to see some of the recommendations that helped others

Nazanin • Sep 23 '23 • Edited

Hi deer Mupati

could I Add just audio Chat To Laravel App.( like telegram or whatsApp)?
I want just massage and audio chat.

please suggest and help me how to make that.

Kofi Mupati • Oct 3 '23

It's possible.

Josuemart555 • Mar 5 '22

Excuse me, does anyone have documentation on how to make an app with Laravel for voice calls with a voip api, please

Kofi Mupati • Mar 7 '22

I've not done that before but looks like an interesting thing to explore. You can as well find out if a platform provides some SDKs for integration

Samuel Aliu • Oct 8

where is the tutorial all i'm seeing is " Liquid syntax error: Unknown tag 'endraw' "

Vardges • Apr 5 '22

Hello Kofi Mupati,

Tell me pleasе what if user is busy. How to define ?

Kofi Mupati • Apr 11 '22

Of the top of my head I think you can have a property in the user object say: isBusy: false. When the call is established between the 2, you update that property.
When you get an incoming call, you check that property before you accept. If busy you can decline by sending a message to the call via websockets(pusher)