diff --git a/examples/data-channels/README.md b/examples/data-channels/README.md index 3cea3033..68c93299 100644 --- a/examples/data-channels/README.md +++ b/examples/data-channels/README.md @@ -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