WebRTC: mediasoup (SFU) N - N hands on - Part 4

[@averynagata1281]

This series was absolutely fantastic. I was having issues reading the documentation without strong examples.

[@amireshaq]

Thank you

[@sadiyaKhan-ub1ri]

00:05 - Implementing a dynamic media conference system without extra buttons. 02:54 - Joining a room and setting up media streams in WebRTC. 05:25 - Implementing consumer transport for WebRTC producers. 08:15 - Implementing producer closing logic on client and server sides. 10:35 - Implementing WebRTC router creation and transport management for room connections. 14:11 - Implementing WebRTC transport methods using promises. 17:37 - Creating and managing transports and producers in WebRTC. 20:21 - Implementing producer and consumer transport mechanisms in WebRTC. 22:50 - Implementing consumer and producer connections in mediasoup. 25:12 - Managing peer disconnections in a WebRTC mediasoup application. 27:37 - Increasing transport ports for WebRTC participants in mediasoup. 30:04 - Concluding the video with participant counts in the series.

[@amireshaq]

@@sadiyaKhan-ub1ri thanks for the breakdown. I love it. I will adopt it in the description

[@anarpearls9785]

Thank you for the great content. You make webrtc more accessible to developers

[@amireshaq]

I am glad to hear that, thanks

[@most_random_videos]

Thanks alot for these videos. I was struggling to put up my mediasoup code, since there is lesss community discuusing about this. I am glad i came accross your tutorials. Wish you a lots of success and happiness in life 🙏

[@most_random_videos]

I am watching every ad played on your video, just to show you my support.

[@amireshaq]

Thanks Harsha, I am glad you found the videos helpful. I wish you too success and happiness in life.

[@amireshaq]

:) highly appreciated but I dont make any money from KZbin hahaha

[@Ubaiish]

The series is amazing. Please bring more videos to it.

[@paw_snowy]

hello mr amir, is there any next episode or part of the video u talk about in the desc

[@amireshaq]

that's a good point, I completely forgot about those two suggestions I made. However, I am working on gstreamer to stream a video from a file to a peer over webrtc. I will be using python this time. I plan to make a video about it and after that hopefully integrate with mediasoup e.g. to broadcast video to many.

[@paw_snowy]

thanks for the reply.Eagerly awaiting.

[@andrewmarabante4548]

Great Series! I learned a lot and was able to set up my first ever webcam website!! I appreciate the time you took to make this, mediasoup / webRTC was scary for me to start a new developer, so many different configs and documentation to read.. and here we have a full step by step guide!

[@KNSHQ]

Hey great work, looking forward to more videos in this series, covering all the features of mediasoup including recording.

[@amireshaq]

I am currently traveling in Kenya (East Africa) but I intend to continue once am back.

[@andrewndotela7407]

@@amireshaq Lucky kenya people visited by genius.... make a trip to Tanzania brother....

[@andrewndotela7407]

Its very near to Kenya

[@amireshaq]

hahahaha I think I am the lucky one to get another chance to visit home. next time we will definitely visit Tanzania. Actually, I have been to Daresalam, Zanzibar, Mikumi (but that was a long time ago).

[@andrewndotela7407]

@@amireshaq Thats awesome, Dar es salaam.... the silicon valley of Tanzania

[@sahilchouksey]

Thank you sir You are best teacher 🙏

[@angNguyen-gn2wv]

Still best video about video conferencing until now :v Thanks you a lot and please keep your passion !!

[@amireshaq]

Thank you, I will try

[@nguyenngocson6184]

That great, this is exactly what I was looking for.

[@andrewndotela7407]

Thanks man, this is very much useful

[@amireshaq]

I am glad it is. thanks!

[@박공부-m5h]

너무 감사합니다 webrtc에 대해서 알아보는 좋은 시간이였습니다.

[@amireshaq]

이 튜토리얼이 도움이 되었다니 기쁘네요.

[@yassinemohsen3188]

Hi Amir! Thanks for this helpful series shedding light on mediasoup, looking forward to the next video, covering One and Few - N with admin and multiple rooms, hope you include the single router per worker and using the router.pipeToRouter() API for scalability with the right cloud server. Could you please let us know the date of this next video?

[@mimizone]

Thanks again for this Amir. Nice to follow along.

[@mrezamuktasib]

i think there is some problem if people join in same time its got .transport undefined?

[@richard_cevallos]

How do you configure the ports of the workers if I am using nginx ?

[@danguiismaelkone08]

hi good tut. want to know how to use React native with mediasoup i have gone through the doc but seing black screen

[@amireshaq]

Hi, did you follow this link? mediasoup.org/documentation/v3/mediasoup-client/react-native/

[@frontendinterviewpro]

This video helped me a lot. Thankyou so much !! I just wanted to know how to produce and consume both audio / video and show it on the frontend.

[@amireshaq]

I am glad it helped you understand the concept behind mediasoup. I currently not settled yet as I am out of the country but I intend to do more videos on mediasoup.

[@hamexmusic-vy5cn]

why final codes in github has not multiple users join ?

[@shadmerhi]

Amazing series! One question regarding the consumer transports. Is it possible to consume all other producers' media with only a single consumer transport rather than create a new transport for every other producer?

[@amireshaq]

HI Shadee Merhi and thanks. According to their documentation (mediasoup.org/documentation/v3/communication-between-client-and-server/) consumer transport per producer is by design. so you cannot have one consumer transport for all producers.

[@AntonCTO]

Basically, this is how a SFU is intended to work. This allows a SFU to stay lightweight and efficient. What you are looking for is a MCU.

[@MEZENNERFARES]

SIr do you have any video or resource explaining how to separate the audio from the video so I can add button to mute mic and a button to enable/disable camera? thank you in advance

[@ameer6168]

20:00 i think we don't have to create multiple consumer transport for consuming multiple media. we can user one consumer transport and with the help of that we can create multiple consumers

[@amireshaq]

I think there was a similar suggestion on mediasoup discussion. please look it up; If I find it I will share.

[@ameer6168]

@@amireshaqokay btw thank you this series really helped me a lot to understand how everything works together

[@seifa2k]

Great content, thank you Amir, you helped me a lot understanding these concepts better than any other tutorial available on the net. :) I have a 2 questions, is it possible to condition the media produced by a viewer to an invitation by the hoster, following this scenario? (Broadcaster launch video streaming, viewers access to room and visualiz contente, and Broadcaster can pick a viewer and invite him to the live stream, meaning that access to the room guarantee that you view the video streamed by broadcaster, but a viewer cannot stream its own video until he accepts an invitation). Question 2 : Is it possible de record an entire video stream (including the visio conference parts) with Mediasoup without major losses ? (I know that video streaming recording can be very tricky especially when using MP4 format). Many thanks again ! :)

[@amireshaq]

I am glad you found the content useful. Q2. I have not tried recording yet but it is something I intend to try. Q1. Yes, this is very possible (someone else also asked before, I hope to do this for you).

[@damaralbaribin]

Thanks you save my life 👍

[@amireshaq]

that's great, thanks!

[@somnathdas8922]

Sir is this possible to build same things in react native?

[@anarpearls9785]

Hope you address server side recording and broadcast in future

[@amireshaq]

I will consider your suggestion

[@PrankoBanos]

Great series, thanks a lot!

[@andrewndotela7407]

Hello brother.... all these tutorials are good and have brought light to this mediasoup thing in a big way.. but i was wondering how do we get to do multiple rooms on the same server with router to represent a room, and add new router on the same worker, but how do we spin another worker on another cpu core and create worker as well and all these to happen dynamically.... am going through mediasoup documentation but am not seeing this details.... as you know production ready applications are multiparty/ have multilple room at the same time shed light on this brother please!

[@code4lifechannel37]

I want to allow some specific IPs (like Viet Nam's IP, Korean's IP...) to join the group. How do I update the code? How do I limit the users' participation in the group? Thanks so much and waiting for your response

[@GuillermoPradoObando]

Hello mate, I've seen your videos and they are very helpful. I want to know if you have any plan to create a specific course about WebRTC, I mean out of youtube, maybe a peer-to-peer mentoring or a focused group, let me know.

[@amireshaq]

Hi Guillermo, and thanks. Private lessons did cross my mind before but I havent got to make it happen. I have never done it before so I am sure it requires quite a bit of planning. Thanks for asking, I will think of doing something about it now.

[@mahmoudhassan4266]

Thank you, you made it easy for me... This is what I was looking for... Can I try this on Windows... What is the maximum number that can connect at the same moment.... Excuse me one last question what are the server requirements To call 100 people or more??

[@amireshaq]

I'll get back to your question; I think I have answered this before.

[@mahmoudhassan4266]

@@amireshaq Well, thank you very much for your efforts... The most important question that I would like a definite answer to... What are the server requirements for 100 people to communicate in real time?

[@amireshaq]

@@mahmoudhassan4266 Please have a look at this link, it may give you an idea: mediasoup.discourse.group/t/experience-with-mediasoup/1578 ... and also look at this link for a similar scenario of 100 participants: mediasoup.discourse.group/t/a-room-with-100-participants/1092

[@mahmoudhassan4266]

@@amireshaq Well, thank you.... We are eagerly awaiting the rest of the course....and we hope you will explain in the upcoming lessons how to switch between video mode and screen sharing mode, recording the meeting and controlling callers

[@amireshaq]

@@mahmoudhassan4266 noted; I will tackle recording in future video. Unfortunately I travelling and am not settled in one place yet. Hopefully after a month I will look into recording another video.

[@javedsaifi8871]

Hello Amir, I hope you doing well, can you please make next video on pipeToRouter? or PipeTransport. I learned alot from this series

[@amireshaq]

I hope to continue once I am back home.

[@javedsaifi8871]

@@amireshaq thank you for your quick response.

[@sahibalam6547]

Plz make a video on fewer to many using mediasoup and Sturn....thanku

[@amireshaq]

hopefully soon I will record on 1-many and few-many

[@sahibalam6547]

@@amireshaq thanku...👍👍👍

[@medyzay]

​@@amireshaq Hello! I really appreciate the time and effort you put into sharing your knowledge, and I want to know if you'll finish this series or if it's over? Thank you anyways.

[@amireshaq]

@@medyzay I appreciate your kind words. I think I may do as per the request above 1 to many because I dont think it will much of change in logic.

[@medyzay]

@@amireshaq You deserve all the kind words, this is the best tutorial out there on mediasoup, I'm working in a few to many scalable live streaming rooms with admin permission, I hope we will keep in touch on Linkedin to keep you updated on my progress. Thanks!

[@code4lifechannel37]

Amazing topic 😂🤗

[@muhammadluqman1347]

where is the next video?

[@amireshaq]

oh am not sure because am super busy these days

[@bhavyachaitanya7057]

Sir you content is top notch! But sir I need to convert webrtc stream to rtmp for live streaming is there any better approach else please make a video on webrtc to rtmp using media soup

[@VuNguyen-bf7cj]

hi Amir, I change listenIps to my local ip address(windown), it's okay, but when i use chrome in another computer then I receive black screen at another video div, anyway thank you for your video ^^ it's very goodddd.

[@angNguyen-gn2wv]

bạn j ơi b sửa được lỗi này chưa giúp mình với, mình có hỏi thì thấy bảo do announcedIp nma chưa biết sửa ntn

[@VuNguyen-sc9zu]

@@angNguyen-gn2wv Mình làm full app chạy oke hết rồi(React native), mà khúc chỗ này không nhớ fix sao :)))) có gì mình kiếm chỗ đó lại thử đã.

[@angNguyen-gn2wv]

@@VuNguyen-sc9zu b có thể cho mình add mail hay zalo k khi nào cần mình hỏi vài thứ ạ

[@jacobflaxman377]

Did you ever fix this?

[@ishanshah7460]

Hi, thank you for the great tutorials! How can I share both audio and video? Currently it's video only.

[@amireshaq]

Hi Ihsan, you may start by changing audio:false to audio:true and see what happens ... const getLocalStream = () => { navigator.mediaDevices.getUserMedia({ //audio: false, audio: true, video: {...} ... }) }

[@ishanshah7460]

@@amireshaq Hi Amir, the issue is in StreamSuccess function where you are passing only video track, const track = stream.getVideoTracks()[0] params = { track, ...params }

[@amireshaq]

@@ishanshah7460 That's correct, in the tutorial we are only creating one producer for Video; you need to also add audio producer. you can see from the design... mediasoup.org/documentation/v3/mediasoup/design/

[@ishanshah7460]

@@amireshaq Hi, thanks for the hint, I've created a new audio producer and it's working fine now :)

[@amireshaq]

@@ishanshah7460 oh that's great, you beat me to it because I had started looking into it. Would you mind make a PR on github if added you as a contributor?

[@ArchitPorwal]

Getting white stream when joining the call from another device which is not on same Wi-Fi, can anyone tell me what maybe the cause of the issue?

[@NguyênPhan-r5o]

What is the bundle.js

[@andrewndotela7407]

Since you was from Kenya, i assume you understand Swahili, so am gone shoot some to you Sasa babu, Lini utatuwekea tutorial nyingine amaizing ?

[@amireshaq]

hahaha asante sana ndugu Andrew. kidogo nimezidiwa na kazi lakini najaribu kupanga fikra ya video nyengine. I think it will be interesting, hopefully soon. The idea is to take control with permission of your peer's desktop using webrtc; but it cannot be done using the browser, it will have to be I think something like Electron app.

[@andrewndotela7407]

@@amireshaq Asante sana kaka, very great idea, am all in.... waiting for it!!

[@judeclassic4179]

Please I need to pass information through appData from producer to consumer... its was only shown how pass it from producer put did not find it when consuming

[@amireshaq]

Hi Jude, I think you mean you want to send data from porducer to consumer; the process is similar to streaming video. You need to use DataChannels. see this link... mediasoup.org/documentation/v3/communication-between-client-and-server/#producing-data BTW, I have asked Ishan to share his code on audio.

[@mohamedsulaiman3601]

Is it possible to achieve many to one using mediasoup ?. Exam proctoring usecase where many students live streams sent to one proctor

[@amireshaq]

Yes, it is possible to have many producers (many single producer transports) and one consumer (multiple consumer transports).

[@sadekhossain9566]

Are you available for a project on this?

[@amireshaq]

Hi Sadek Hossain, let's connect on LinkedIN

[@davidisresting]

Thank you. Please can you share the link to the final code?

[@amireshaq]

thanks for reminding me, I'll push it to github in a couple of hours

[@amireshaq]

I have added the link to the code in the description: github.com/jamalag/mediasoup3

[@waleedzakriakhan9538]

Can you create a video on screensharing with flutter webrtc

[@amireshaq]

I'll see what I can do.

[@bikideka7880]

Would you make a video regarding installing mediasoup in windows machine locally, I tried, but did not work, now I am using ubuntu container which is very resource intensive

[@amireshaq]

why dont you configure WSL2 on your windows machine and install Ubuntu? I am assuming you are running containers using VirtualBox The issue with Windows is using the right version of Python and ensuring you have VS (community will do) as well ensuring your path is setup correctly.

[@sahibalam6547]

Here all participants seems to be under same network...what if they are in different network....???

[@amireshaq]

As long as you have your mediasoup server configured and accessible from a public IP/fqdn, you should be good to go. You may have to also make a turn server available for clients that may need it. Dont forget each transport you create uses one port.

[@sahibalam6547]

@@amireshaq thanku very much for the reply

[@SleeppingForest]

If the room has 50 users but display on screen 6 user how to manage 44 users for save bandwidth

[@amireshaq]

Hi No Body, would you please elaborate a bit on your question. thanks Do you mean like: - each of the 50 users produce media - but only 6 can be consumed - each of of those 50 to consume 6 producers is that what you are asking?

[@윤경록-m5z]

Hello !! I made a comment on yr part 1 vedio about issue of 'server' -> 'client'. I think i got the reason. I tested yr code at Linux environment It shows 'server' well. Anyway I have a question about hosting mediasoup server on server behind NAT. I searched about ListenIps. It is for binding and Listening IP.And announcedIp is for NAT. When I tested yr code at Linux Server behind NAT, I can't see remote Video Stream. Is it about listenIps and annoucnedIp??

[@amireshaq]

i have not really tried it behind a NAT but let us know your findings; it will be great. Have you looked at this link: mediasoup.discourse.group/t/server-behind-nat-and-the-announcedip/99?

[@윤경록-m5z]

@@amireshaq I tried and successfully managed to open server. Key was opening port of min to max rtp ports

[@amireshaq]

​@@윤경록-m5z its great that you mention because when creating transports that exceed the number of ports in min/max, then you get an error that is kind of difficult to figure out. I actually thought I mentioned it in one of the videos. Thanks for bringing it up.

[@IJs-g1t]

Hi I have followed you above series and it is great. Can you please help this app to deploy on google cloud.

[@JaspreetSingh-ck2lz]

Have anybody created one to many or few to many? If yes then please share the code, that'll be very beneficial for me

[@judeclassic4179]

I need to pass audio Amir. I am having issues with codec don't know how to set it up

[@amireshaq]

Hi Jude, you need to first set audio: true in getUserMedia() and then you need to create audio producer as you can see in the diagram in the following link: mediasoup.org/documentation/v3/mediasoup/design/ However, Ishan has implemented the audio part and he plans to make a PR to update the repo on github. Once he does that he will share the code.

[@judeclassic4179]

@@amireshaq wow. thanks amir it help alot. I guess there's still much i have to learn from the documetation

[@amireshaq]

@@judeclassic4179 I am glad that you may have figured it out.

[@amireshaq]

BTW, Ishan has updated the code to include audio, have a look at it github.com/jamalag/mediasoup3

[@Ning850]

Best teacher and youtube channel on mediasoup, Thanks Amir for what you do! I see you've managed to install and run mediasoup on your windows using visual studio code. I know it's a lot of work, but could you show step by step how to do it?

[@amireshaq]

That's correct, I did get mediasoup to build in Windows with and without WSL2 feature enabled. All you need to do is to pay attention at the requirements i.e. specifically the correct version of Python (among the other requirements e.g. Visual Studio, etc.) I am currently out of the country and the only computer I have is my mac - If I get a Windows machine I may make a short video on it.

[@lynnpelly2277]

thx

[@prasenjitdeb2327]

can anyone guide me about implementing ICE(STUN/TURN) server for production. I've used at following methods device.createSendTransport & device.createRecvTransport, but still showing error. Please help me with proper approach, or anything in addition I need to code.

[@amireshaq]

What's the error?

[@prasenjitdeb2327]

​@@amireshaq Thank You for responding back. Error: WebRTC: ICE failed, add a STUN server and see about:webrtc for more details. It happens with some network, Working fine at others. Even though after adding iceServers, with correct cred, at device.createSendTransport & device.createRecvTransport, it throws Error: WebRTC: ICE failed, your TURN server appears to be broken, see about:webrtc for more details. With this credential, project running at production before implementing Mediasoup. Would be grateful, if you can throw some light, where am I going wrong. Stuck for few days.

[@amireshaq]

@@prasenjitdeb2327 That's a bit difficult to debug because you say it works on some networks. Also I will have to revisit my code but for now I am able to find time. I hope you solve it soon.

[@lynnpelly2277]

device phone multi room camera

[@amireshaq]

Hi Lynn, I have not reached to that part yet.

[@anarpearls9785]

Hi Amir, awaiting your next video. I am facing this error every time I try to install mediasoup: npm ERR! code 1 . npm ERR! command failed npm ERR! command sh -c node npm-scripts.js postinstall

[@anarpearls9785]

solved. needed to install build essentials & pip

[@bkm215]

Hi Amir, I am getting below error on socket.on('disconnect', () => { const {roomName} = peers[socket.id] ^ TypeError: Cannot destructure property 'roomName' of 'peers[socket.id]' as it is undefined. Could you pls check once..

[@Ubaiish]

when your server disconnect its looking for the room to remove , but there is no room that client has joined. Most probably you are using react for this is yes call io() inside the component only