MENU

Fun & Interesting

WebRTC: mediasoup (SFU) hands on - Part 2

Amir Eshaq 34,049 lượt xem 3 years ago
Video Not Working? Fix It Now

In this mediasoup tutorial you will learn the basics of integrating mediasoup SFU in your node.js application. ** Please look at the description below for code and mediasoup communication steps.

** In this tutorial I have used a docker container to run the application, but you should be able to run on the environment of your choice. So we start with creating a Dockerfile and docker-compose.yml.

CODE: https://github.com/jamalag/mediasoup

We will see how to:

- getUserMedia() to get local stream (@8:30)
- create a Worker (@11:30) and a Router (@12:25)
- request from client (@15:00) and create RTP Capabilities from the Router (@15:15)
- create a Device (client-side, @13:30) and it's load() method (@14:30)
- create server WebRtcTransports (for both Producer & Consumer, @17:50)
- create client WebRtc[Send (@17:20)/Recv (@30:30)]Transport
- transport connect event (Producer @21:20, Consumer @32:40)
- transport produce event (Producer @22:45)
- how to call produce(params) (@24:35)/consume from client (@34:45)
- client side params declaration (@24:50)
- how to call produce (@28:30)/consume (@35:25) from server side

Order to Create Transports
1. Server Transport created from Router
2. Client Transport created from Device

Order to Produce
1. Call produce() on Client Transport
2. Call produce() on Server Transport

Order to Consume
1. Call consume() on Server Transport
2. Call consume() on Client Transport

Below is the mediasoup connection and communication process:

1 Server: Create Worker
2. Client: makes socket.io connection to Server
3. Server:
- sends connection success with socket id to client
- creates a Router
4. Client: sends request to server for Router RTP Capabilities
5. Server: from the Router, gets rtpCapabilities and sends to Client
6. Client: with rtpCapabilities, creates a Device

PRODUCER STEPS
Assumes getUserMedia() has been executed already and track is available
7. Client: sends request to Server to create Transport
8. Server:
- creates Transport (producer) from the Router
- sends back to client, transport params (id, iceParameters, iceCandidates, dtlsParameters)
9. Client:
- receives Server side transport params
- with the params, create Send Transport from the Device (which is the Producer Transport)
- call the local Producer Transport produce(params) method
- listen for the following events, which are triggered by above produce() call:
- 'connect'
- send dtlsParameters back to the Server, no need response
- inform local Producer Transport that dtlsParameters were sent to the Server via callback
- 'produce'
- send kind, rtpParameters, appData back to the Server
- expects Server side Producer ID in a callback (see ** below)
- send via the callback the received Server side Producer ID
10. Server:
- receives dtlsParameters from the Client (see 9. above)
- calls Producer Transport connect({ dtlsParameters }) method
- receives kind, rtpParameters, appData from the Client (see 9. above)
- calls Producer Transport produce({ ... }) and passes in the received parameters
- sends Producer ID to the Client (**)

CONSUMER STEPS
[We don't need to getUserMedia()]
[Repeats steps 2 - 6 above if different client from producer]
[Repeats steps 2 - 4 above if same client as the producer]
11. Client:sends request to Server to create Transport
12. Server:
- creates Transport (consumer) from the Router
- sends back to client, transport params (id, iceParameters, iceCandidates, dtlsParameters)
13. Client:
- receives Server side transport params
- with the params, create Recv Transport from the Device (which is the Consumer Transport)
- listen for the following events, which are triggered by above consume() call:
- 'connect'
- send dtlsParameters back to the Server, no need response
- inform local Producer Transport that dtlsParameters were sent to the Server via callback
14. Server:
- receives dtlsParameters from the Client (see 13. above)
- calls Consumer Transport connect({ dtlsParameters }) method
15. Client:
- send a request to the Server for Server side Consumer to consume
- receives from the Server via a callback params (id, producerId, kind, rtpParameters) (***)
- executes local Consumer Transport consume({...}) with above params
- retrieves track from the local Consumer
- create new MediaStream from the track and set the stream to the srcObject of remoteVideo
16. Server:
- receives a request with rtpCapabilities for consumer transport to consume
- executes Consumer Transport consume({ rtpCapabilities }) method
- makes sure the stream is paused (a later call will be made to resume)
- sends back to Client consumer params (consumer id, producerId, kind, rtpParameters) (see *** above)

Comment