zishuo/webrtc
1
0
Fork 0
mirror of https://github.com/pion/webrtc.git synced 2025-12-24 11:51:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

Improve the data-channels example

Browse Source
This commit is contained in:
philipch07
2025-10-20 23:04:49 -04:00
committed by Joe Turki
parent 7d8a700730
commit 8f7e057201
1 changed files with 30 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
examples/data-channels/README.md
View File

@@ -1,36 +1,48 @@
# data-channels
data-channels is a Pion WebRTC application that shows how you can send/recv DataChannel messages from a web browser
data-channels is Pion's sample WebRTC app that lets you send and receive DataChannel messages from a web browser.
## Brief Overview
This example will result in messages being sent between a browser and a self-hosted data-channels server. The connection is made by grabbing the browser's generated session description, or SDP, and passing it into the server. The server uses the browser's SDP to then return a new SDP from the server based on the browser's SDP. The server's SDP then gets passed back into the browser which confirms the handshake and forms a connection!
Once the connection is established, messages will automatically be sent from the data-channels server to the browser every 5 seconds. The browser has a button that lets you send a message back to the server when you click on it.
## Instructions
### Download data-channels
### 1. Download the data-channels server
```
go install github.com/pion/webrtc/v4/examples/data-channels@latest
```
### Open data-channels example page
[jsfiddle.net](https://jsfiddle.net/e41tgovp/)
### 2. Open JSFiddle
[Open this JSFiddle example page.](https://jsfiddle.net/e41tgovp/)
The top of the JSFiddle example page contains a text box containing your browser's session description (SDP).
Press `Copy browser SDP to clipboard` or copy the base64 string manually.
### 3. Send the browser's SDP to the server
Depending on your OS:
#### Linux/macOS (including WSL)
In the following command, replace `$BROWSER_SDP` with the copied string.
Run `echo $BROWSER_SDP | data-channels`.
### Run data-channels, with your browsers SessionDescription as stdin
In the jsfiddle the top textarea is your browser's session description, press `Copy browser SDP to clipboard` or copy the base64 string manually and:
#### Linux/macOS
Run `echo $BROWSER_SDP | data-channels`
#### Windows
1. Paste the SessionDescription into a file.
1. Run `data-channels < my_file`
1. Paste the copied string into a file.
2. Run `data-channels < my_file`.
### Input data-channels's SessionDescription into your browser
Copy the text that `data-channels` just emitted and copy into second text area
### 4. Send the server's SDP back to the browser
The server will automatically print out a base64 string. Copy it and paste it into the second textbox in the JSFiddle page.
### Hit 'Start Session' in jsfiddle
Under Start Session you should see 'Checking' as it starts connecting. If everything worked you should see `New DataChannel foo 1`
Now you can put whatever you want in the `Message` textarea, and when you hit `Send Message` it should appear in your terminal!
### 5. Start the session!
Under Start Session you should see 'Checking' as it starts connecting. If everything worked you should see `New DataChannel foo 1`.
Pion WebRTC will send random messages every 5 seconds that will appear in your browser.
Congrats, you have used Pion WebRTC! Now start building something cool
### 6. Send a message from the browser to the server!
You can put whatever you want in the `Message` text area, and when you hit `Send Message` it should appear in your terminal!
## Architecture
## Example finished!
Congrats, you have used Pion WebRTC! Now start building something cool :)
## Architecture Overview
```mermaid
flowchart TB