Skip to content

Commit 3b33338

Browse files
authored
Calls: Update API diagram to Mermaid and Improve DataChannel page (#20535)
* Calls: Update API diagram to Mermaid and Improve DataChannel page * Update src/content/docs/calls/datachannels.mdx
1 parent 28e4646 commit 3b33338

File tree

4 files changed

+80
-21
lines changed

4 files changed

+80
-21
lines changed
-69.6 KB
Binary file not shown.
-68 KB
Binary file not shown.

src/content/docs/calls/datachannels.mdx

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,32 @@ pcx_content_type: get-started
33
title: DataChannels
44
sidebar:
55
order: 8
6-
76
---
87

9-
Since Cloudflare Calls is basically a pub/sub server for WebRTC that can scale up to many subscribers per publisher, it's fit for arbitrary data besides media too.
8+
DataChannels are a way to send arbitrary data, not just audio or video data, between client in low latency. DataChannels are useful for scenarios like chat, game state, or any other data that doesn't need to be encoded as audio or video but still needs to be sent between clients in real time.
9+
10+
While it is possible to send audio and video over DataChannels, it's not optimal because audio and video transfer includes media specific optimizations that DataChannels do not have, such as simulcast, forward error correction, better caching across the Cloudflare network for retransmissions.
11+
12+
```mermaid
13+
graph LR
14+
A[Publisher] -->|Arbitrary data| B[Cloudflare Calls SFU]
15+
B -->|Arbitrary data| C@{ shape: procs, label: "Subscribers"}
16+
```
17+
18+
DataChannels on Cloudflare Calls can scale up to many subscribers per publisher, there is no limit to the number of subscribers per publisher.
19+
20+
### How to use DataChannels
21+
22+
1. Create a two Calls sessions, one for the publisher and one for the subscribers.
23+
2. Create a DataChannel by calling /datachannels/new with the location set to "local" and the dataChannelName set to the name of the DataChannel.
24+
3. Create a DataChannel by calling /datachannels/new with the location set to "remote" and the sessionId set to the sessionId of the publisher.
25+
4. Use the DataChannel to send data from the publisher to the subscribers.
26+
27+
### Unidirectional DataChannels
28+
29+
Cloudflare Calls SFU DataChannels are one way only. This means that you can only send data from the publisher to the subscribers. Subscribers cannot send data back to the publisher. While regular MediaStream WebRTC DataChannels are bidirectional, this introduces a problem for Cloudflare Calls because the SFU does not know which session to send the data back to. This is especially problematic for scenarios where you have multiple subscribers and you want to send data from the publisher to all subscribers at scale, such as distributing game score updates to all players in a multiplayer game.
30+
31+
To send data in a bidirectional way, you can use two DataChannels, one for sending data from the publisher to the subscribers and one for sending data the opposite direction.
1032

1133
## Example
1234

src/content/docs/calls/https-api.mdx

Lines changed: 56 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,22 @@ pcx_content_type: get-started
33
title: Connection API
44
sidebar:
55
order: 5
6-
76
---
87

98
Cloudflare Calls simplifies the management of peer connections and media tracks through HTTPS API endpoints. These endpoints allow developers to efficiently manage sessions, add or remove tracks, and gather session information.
109

1110
## API Endpoints
1211

13-
* **Create a New Session**: Initiates a new session on Cloudflare Calls, which can be modified with other endpoints below.
14-
* `POST /apps/{appId}/sessions/new`
15-
* **Add a New Track**: Adds a media track (audio or video) to an existing session.
16-
* `POST /apps/{appId}/sessions/{sessionId}/tracks/new`
17-
* **Renegotiate a Session**: Updates the session's negotiation state to accommodate new tracks or changes in the existing ones.
18-
* `PUT /apps/{appId}/sessions/{sessionId}/renegotiate`
19-
* **Close a Track**: Removes a specified track from the session.
20-
* `PUT /apps/{appId}/sessions/{sessionId}/tracks/close`
21-
* **Retrieve Session Information**: Fetches detailed information about a specific session.
22-
* `GET /apps/{appId}/sessions/{sessionId}`
12+
- **Create a New Session**: Initiates a new session on Cloudflare Calls, which can be modified with other endpoints below.
13+
- `POST /apps/{appId}/sessions/new`
14+
- **Add a New Track**: Adds a media track (audio or video) to an existing session.
15+
- `POST /apps/{appId}/sessions/{sessionId}/tracks/new`
16+
- **Renegotiate a Session**: Updates the session's negotiation state to accommodate new tracks or changes in the existing ones.
17+
- `PUT /apps/{appId}/sessions/{sessionId}/renegotiate`
18+
- **Close a Track**: Removes a specified track from the session.
19+
- `PUT /apps/{appId}/sessions/{sessionId}/tracks/close`
20+
- **Retrieve Session Information**: Fetches detailed information about a specific session.
21+
- `GET /apps/{appId}/sessions/{sessionId}`
2322

2423
[View full API and schema (OpenAPI format)](/calls/static/calls-api-2024-05-21.yaml)
2524

@@ -31,24 +30,62 @@ It is vital to manage App ID and its secret securely. While track and session ID
3130

3231
Cloudflare Calls is designed to operate efficiently without the need for TURN servers in most scenarios, as Cloudflare exposes a publicly routable IP address for Calls. However, integrating a STUN server can be necessary for facilitating peer discovery and connectivity.
3332

34-
* **Cloudflare STUN Server**: `stun.cloudflare.com:3478`
33+
- **Cloudflare STUN Server**: `stun.cloudflare.com:3478`
3534

3635
Utilizing Cloudflare's STUN server can help the connection process for Calls applications.
3736

3837
## Lifecycle of a Simple Session
3938

4039
This section provides an overview of the typical lifecycle of a simple session, focusing on audio-only applications. It illustrates how clients are notified by the backend server as new remote clients join or leave, incorporating video would introduce additional tracks and considerations into the session.
4140

42-
<div class="full-img">
41+
```mermaid
42+
sequenceDiagram
43+
participant WA as WebRTC Agent
44+
participant BS as Backend Server
45+
participant CA as Calls API
46+
47+
Note over BS: Client Joins
48+
49+
WA->>BS: Request
50+
BS->>CA: POST /sessions/new
51+
CA->>BS: newSessionResponse
52+
BS->>WA: Response
53+
54+
WA->>BS: Request
55+
BS->>CA: POST /sessions/<ID>/tracks/new (Offer)
56+
CA->>BS: newTracksResponse (Answer)
57+
BS->>WA: Response
58+
59+
WA-->>CA: ICE Connectivity Check
60+
Note over WA: iceconnectionstatechange (connected)
61+
WA-->>CA: DTLS Handshake
62+
Note over WA: connectionstatechange (connected)
63+
64+
WA<<->>CA: *Media Flow*
65+
66+
Note over BS: Remote Client Joins
4367
44-
![Example Lifecycle](~/assets/images/calls/lifecycle-of-a-session.png)
68+
WA->>BS: Request
69+
BS->>CA: POST /sessions/<ID>/tracks/new
70+
CA->>BS: newTracksResponse (Offer)
71+
BS->>WA: Response
4572
46-
</div>
73+
WA->>BS: Request
74+
BS->>CA: PUT /sessions/<ID>/renegotiate (Answer)
75+
CA->>BS: OK
76+
BS->>WA: Response
4777
48-
There is also a previously used, but now deprecated way to use the API illustrated below. If you are using this style please consider upgrading to the newer version illustrated above.
78+
Note over BS: Remote Client Leaves
4979
50-
<div class="full-img">
80+
WA->>BS: Request
81+
BS->>CA: PUT /sessions/<ID>/tracks/close
82+
CA->>BS: closeTracksResponse
83+
BS->>WA: Response
5184
52-
![Deprecated Lifecycle](~/assets/images/calls/deprecated-lifecycle-of-a-session.png)
85+
Note over BS: Client Leaves
5386
54-
</div>
87+
WA->>BS: Request
88+
BS->>CA: PUT /sessions/<ID>/tracks/close
89+
CA->>BS: closeTracksResponse
90+
BS->>WA: Response
91+
```

0 commit comments

Comments
 (0)