Swimlanes.io is a free webapp for making sequence diagrams. You simply edit the text on the left and the diagram is updated in real time. You can download your sequence diagrams as images or distribute with a link.
Title: WebRTC Protocol note Signalling Channel, Client: **Host** and **Client** agreen on a common text `Channel Name` and a `ICE Server` (eg. *stun:stun.l.google.com:19302*) via a **Signalling Channel** Signalling Channel -> Host: `Channel Name` Signalling Channel -> Client: `Channel Name` Signalling Channel -> Host: `ICE Server` Signalling Channel -> Client: `ICE Server` group: Data Channel Establishment --: * **Host** requests a new `dataChannel` from the **ICE Server** using `Channel Name`* Host => ICE Server: connect(`ICE Server`) ICE Server --> Host: `Connection` Host => ICE Server: `Connection`.createDataChannel(`Channel Name`) ICE Server => Data Channel: *create* Data Channel --> ICE Server: `dataChannel` ICE Server --> Host: `dataChannel` --: *Whenever a **Client** joins this **ICE Server** with the same `Channel Name`, the **Host** is notified of a new `ICE Candidate`* Client => ICE Server: Connect(`Channel Name`) ICE Server -> Client: onDataChannel(`dataChannel`) ICE Server -> Host: onICECandidate(`candidate`) end group: **Host** creates an `offerDescription` and the **Client** provides a `offerAnswer` response to authenticate and establish connection Host -> ICE Server: createOffer ICE Server --> Host: `offerDescription` note Host, Client: **Host** sends `offerDescription` to **Client** using a **Signalling Channel** Host -> Signalling Channel: `offerDescription` Signalling Channel -> Client: `offerDescription` note Host, Client: **Client** accepts the offer by creating an `offerAnswer` to send to the **Host** using a **Signalling Channel** Client -> ICE Server: createAnswer(`offerDescription`) ICE Server --> Client: `offerAnswer` Client -> Signalling Channel: `offerAnswer` Signalling Channel -> Host: `offerAnswer` end group: **Host** opens the `DataChannel` by accepting the `offerAnswer` Host => ICE Server: setRemoteDescription(`offerAnswer`) ICE Server -> Data Channel: open ICE Server -> Client: onDataChannel(`dataChannel`) Data Channel -> Host: dataChannel.onOpen Data Channel -> Client: dataChannel.onOpen end if: *Messaging commences via a P2P secure socket between the **Host** and **Client** * Host <-> Client: send(`message`) Host <--> Client: onMessage(`message`) else: *If P2p connection is not possible, due to additional inbound firewall rules, a **TURN Server** is used to proxy messages* Host -> TURN Server: send(`message`) TURN Server --> Client: onMessage(`message`) Client -> TURN Server: send(`message`) TURN Server --> Host: onMessage(`message`) end order: Signalling Channel, Host, Client, ICE Server, Data Channel, TURN server