DEV Community

Cover image for Live stream with WebRTC in your Laravel application

Live stream with WebRTC in your Laravel application

Kofi Mupati on March 23, 2021

Introduction My first attempt at WebRTC was to implement a video call feature within a Laravel Application. The implementation involved ...
Collapse
 
sayamk3004 profile image
sayamk3004

Well I have successfully connected, and it worked too. I have one question? Do we have any peer connection limitations? Cant this this be used as a live stream which can have millions of viewers watching it together?

Collapse
 
mupati profile image
Kofi Mupati

You'll need to modify the code. The limiting factor is the number of users that can be accommodated on a presence channel.

By the way how many users were able to connect to it after you got it to work?

Collapse
 
shehranahmad profile image
ShehranAhmad

Can you explain what did you changed in code because mine join stream button not work??

Collapse
 
mupati profile image
Kofi Mupati

do you have any error messages in the browser console?

Thread Thread
 
shehranahmad profile image
ShehranAhmad

No it's not showing any error or message in console.
I think this method is not hitting in Viewer.vue component

window.Echo.private(stream-signal-channel.${this.auth_user_id}).listen(
"StreamOffer",
({ data }) => {
console.log("Signal Offer from private channel");
this.broadcasterId = data.broadcaster;
this.createViewerPeer(data.offer, data.broadcaster);
}
);

Thread Thread
 
mupati profile image
Kofi Mupati

okay. are you connecting on the same local network?

Thread Thread
 
shehranahmad profile image
ShehranAhmad

Yes I am connecting on same local network but join stream button not working

Collapse
 
sayamk3004 profile image
sayamk3004

I have tried everything discussed above, but im not being able to get the peer connection by turn server. Is there any other way I can connect my peer ? My project currently turns on the camera for the broadcaster with a streaming link, but when the viewer hits join stream. Nothing happens!

Collapse
 
mupati profile image
Kofi Mupati

Do you have any errors in your browser console?

Collapse
 
sayamk3004 profile image
sayamk3004

No. Its just nothing happens after the viewer clicks... When I console log I see
like this
Ps. The broadcaster video starts, and I also have the sharing link... But when the viewers gets into the link and tries to join this happens^

Thread Thread
 
mupati profile image
Kofi Mupati • Edited

Were you able to set up the TURN/STUN server? If not, comment out the following code from the peer instance and test again. In this case, both the broadcaster and viewer should be on the same network.

The code to comment out:

        config: {
          iceServers: [
            {
              urls: "stun:stun.stunprotocol.org",
            },
            {
              urls: this.turn_url,
              username: this.turn_username,
              credential: this.turn_credential,
            },
          ],
        },
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
sayamk3004 profile image
sayamk3004

i did commented out and tried, is there any other way to get the peer connection apart from turn/stun server? It would be really nice if you can use my teamviewer for some time please?

Collapse
 
maczad profile image
maczad

I need a live-streaming with live chat included for my content support website, like a live chat where livestreamers can receive gifts from users, like it is done on BIGO and TikTok. Is this achievable?

Collapse
 
mupati profile image
Kofi Mupati

Yeah. That is possible.

Collapse
 
dariochiappello profile image
Darío Chiappello • Edited

hi, is it possible to run the project without a turn server? for example with xampp or wampserver

Collapse
 
mupati profile image
Kofi Mupati

The TURN/STUN server is not needed to run your webserver. It is used during the signaling process between 2 peers. Run the application like any laravel application on your xampp or wampserver.

Comment out the following code. It will work if both devices are on the same network:

        config: {
          iceServers: [
            {
              urls: "stun:stun.stunprotocol.org",
            },
            {
              urls: this.turn_url,
              username: this.turn_username,
              credential: this.turn_credential,
            },
          ],
        },
Enter fullscreen mode Exit fullscreen mode
Collapse
 
alinajmuddin98 profile image
Muhammad Ali Najmuddin

Ive commented this out from bradcast, viewer, and app js. Still not working. I use php artisan serve. Do i need to use xampp?

Collapse
 
alinajmuddin98 profile image
Muhammad Ali Najmuddin

Hi Dario, if I may ask, did you commented all of the occurance of config details for turn server?

Ive commented all of it in broadcast, viewer and app js file. Still the join stream wont work.

Collapse
 
dariochiappello profile image
Darío Chiappello

Hello Muhammad. I commented on the config details and the camera and sound of the sender can be activated but the image is not reaching the receiver

Collapse
 
rakeshmaity271 profile image
honeycrisp

Join stream button not working bro.

Collapse
 
mupati profile image
Kofi Mupati

What's the error in your browser console?

Collapse
 
richajaiswal11 profile image
RICHA JAISWAL

Not getting any issue on console.

Collapse
 
hasansarm profile image
hasan-sarm

how i can save video after stream ?

Collapse
 
mupati profile image
Kofi Mupati

I didn't handle that but you can explore the MediaRecorder API developer.mozilla.org/en-US/docs/W...

Such solutions exist so you can do some googling too.

Collapse
 
crazeetee profile image
Timothy Kimemia

can someone guide how they reduced or removed the echo from the stream

Collapse
 
richajaiswal11 profile image
RICHA JAISWAL

I have tried everything discussed above, and also comment iceServers code on both vue file but join stream button is not working and not getting any issue in my console.

Collapse
 
mupati profile image
Kofi Mupati

As in the Livestream works but it's very slow at the viewer's end? If that is the case you should note that there are optimizations to be considered if you want to implement this at scale.

Collapse
 
sanjaikumar profile image
sanjai-kumar

dev-to-uploads.s3.amazonaws.com/up...

After Logged In I Get this Empty page.

Collapse
 
sanjaikumar profile image
sanjai-kumar

I have tried everything discussed above, but im not being able to get the peer connection by turn server. Is there any other way I can connect my peer ? Does This Package Support for Laravel 7.0

Collapse
 
test10990 profile image
test

Hello everyone please i need help with this code how come it ain't working for me. when i visit the /stream route all i get is the extended layout. Please can someone enlighten me

Collapse
 
gcyugurten profile image
Jugurtha Gaci

there are a way to create it using jQuery ?

Collapse
 
mupati profile image
Kofi Mupati

yeah you can. It's just javascript.

Collapse
 
kwul0208 profile image
ahmad wahyu

I use windows and I have trouble when install COTURN and Set up ICE SERVER (TURN SERVER). do you have any sugest? thanks

Collapse
 
myseocompany profile image
Nicolás Navarro Rincón

I want to create a two people chat rooms in laravel. Can you help me to do it? It is a shared pomodoro sessión. Just two guys sharing a pomodoro timer. Can you do it for me?

Collapse
 
mupati profile image
Kofi Mupati

sure, I can help with that. scientificgh[at]gmail.com to discuss further

Collapse
 
deijosh profile image
Joshua

hi am having issues doing it

Collapse
 
mupati profile image
Kofi Mupati

which issue?