add drawio diagram for examples

examples/broadcast/README.md

@@ -1,20 +1,28 @@
 # broadcast
+
 broadcast is a Pion WebRTC application that demonstrates how to broadcast a video to many peers, while only requiring the broadcaster to upload once.
 
 This could serve as the building block to building conferencing software, and other applications where publishers are bandwidth constrained.
 
+## [architecture](https://viewer.diagrams.net/?tags=%7B%7D&highlight=FFFFFF&edit=_blank&layers=1&nav=1&title=drawio#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fmohammadne%2Fwebrtc-pion%2Fmaster%2Fexamples%2Fbroadcast%2Fdrawio)
+
 ## Instructions
+
 ### Download broadcast
+
 ```
 export GO111MODULE=on
 go get github.com/pion/webrtc/v3/examples/broadcast
 ```
 
 ### Open broadcast example page
+
 [jsfiddle.net](https://jsfiddle.net/1jc4go7v/) You should see two buttons 'Publish a Broadcast' and 'Join a Broadcast'
 
 ### Run Broadcast
+
 #### Linux/macOS
+
 Run `broadcast` OR run `main.go` in `github.com/pion/webrtc/examples/broadcast`
 
 ### Start a publisher
@@ -27,6 +35,7 @@ Run `broadcast` OR run `main.go` in `github.com/pion/webrtc/examples/broadcast`
 * The connection state will be printed in the terminal and under `logs` in the browser.
 
 ### Join the broadcast
+
 * Click `Join a Broadcast`
 * Copy the string in the first input labelled `Browser base64 Session Description`
 * Run `curl localhost:8080/sdp -d "$BROWSER_OFFER"`. `$BROWSER_OFFER` is the value you copied in the last step.

examples/broadcast/drawio

@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2021-10-29T18:41:54.271Z" agent="5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36" etag="4OcJ6OkW2YoOME-JKrTG" version="15.6.2" type="device"><diagram id="29NtQO1aZSxM7vXwuhRQ" name="Page-1">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</diagram></mxfile>

examples/custom-logger/README.md

@@ -1,17 +1,22 @@
 # custom-logger
+
 custom-logger is an example of how the Pion API provides an customizable
 logging API. By default all Pion projects log to stdout, but we also allow
 users to override this and process messages however they want.
 
+## [architecture](https://viewer.diagrams.net/?tags=%7B%7D&highlight=FFFFFF&edit=_blank&layers=1&nav=1&title=drawio#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fmohammadne%2Fwebrtc-pion%2Fmaster%2Fexamples%2Fcustom-logger%2Fdrawio)
+
 ## Instructions
+
 ### Download custom-logger
+
 ```
 export GO111MODULE=on
 go get github.com/pion/webrtc/v3/examples/custom-logger
 ```
 
 ### Run custom-logger
-`custom-logger`
 
+`custom-logger`
 
 You should see messages from our customLogger, as two PeerConnections start a session

examples/custom-logger/drawio

@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2021-10-31T08:46:42.806Z" agent="5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36" etag="YYcqetWN2UTXxQenDiDQ" version="15.6.2" type="device"><diagram id="29NtQO1aZSxM7vXwuhRQ" name="Page-1">7Vtbc+I2GP01PJKxLV8fA9lL22xLh2a6+yhsAZ61LVcWAfLrK+OrLhAgYGATMhOsz7Isn/NdJdMDw3j1hcB0/g0HKOoZWrDqgYeeYeiuabGvXLIuJB5wC8GMhEHZqRGMwxdUCrVSuggDlHEdKcYRDVNe6OMkQT7lZJAQvOS7TXHE3zWFMyQJxj6MZOm/YUDnhdQ1nEb+FYWzeXVn3faKMzGsOpdPks1hgJctEfjUA0OCMS2O4tUQRTl4FS7FdZ+3nK0nRlBC97ngMf4Wpz55epngPz068/7+6x+3X47yDKNF+cDlZOm6QgAlwX0OJGslOGHCQQCzOcpH1VljTuOoPMzlI0gpIslGYmiASTNK8M8aPCOX/ETUn5cX+QvyXA8mP1M5QRRwNJVP+AXhGFGyZh2WDTlWCfi8xUslIyiCNHzmyYWljszq4eo7jHDIZmJopT6bWjlOqc2mp/FDZHhBfFRe1SZDGAh43p1jc2OxwfmxKCQzRKWx2EHryRvRhu4DqAcK6u2I4TWYcApg/7fIVXQwxQntZxsDvWcddDddNSfZ0Sz/vk+yJSKIVEOxmU2qc5JmUbSivAYVujLEESaNuk3DKBJEMApnuY75TE/YzcDgGREaMqu9L0/EYRDktxks5yFF4xT6+T2XzEcxGcGLJNjonCZq41YFzG+AVjtVsDxrAYvjVTeMu1LSUlJvh5Kq9JFj/1CqHYlqnyBIUS93GTaMc1CK/zlBKNfTCDM02ff4YcT+4+k051Tgr8FR34J0m9o2zG1KewYIIHKnvsQ/O2P7LppMT0OM6dVEVOZbId4iRrctmRnRNE/GjLudmQBSOJxDFtaiW0feEtwm8BS4q9z22XDXze3ApwiRYZFOhDi5dex14PFhxlbpfKfYW+8Fe1HvrwB7+yPqnyXq6455bVFfl8O+RAYrStL8cBFH9z7FbVAf4QRFI5yFG0sEDxNMKY4VqFMsGB5e0ChM0LAuyTQOftk2mY6VlZ/unoYOQ+PpsBwFG0DBhn0uNgxVvv1O2LBs69rYUPnBLWxMI7QqK+BBqxj2I5hloc+DvcPJiLhyha8QnqZW/qcMT5vPDZTKYuyzTJcfYu9S+bWBzlwnG3KOPmam1lRH1x/fzuFgXaGU8rw7r/0xJQNXWjg4m4V7Em1FZUtQjDe5poq8G0swxeTeci+dYII9HCuvqW8B2UJuYKpAdo0J2O0m9we5bwnVq6EA2ekyelXstUCOwoyiBJHsvfmjqrRSLCm4Xfob84hFtmJxDW6qp5t3RSafcdumwko6XeMx5cD9keOdNMcTUzMHOMfleGKyKA105hzPlJOFjxyvcaCVSSt8bG2+nThZSw58Ejcf+5U9bpvRcnkSHYGcQ7YshbHqdLMjM7UMif5fL6eXfKEqpz9XIB0tw4E1+oM8xRPnceCPBuNp2pdRz5fmtd98NIRJEAabJOe2Qa9T6irHB3p3oA+Tr0u6+Ez839PlLHsavMT9leLNjDqd9BcZxXE/wrNZnjdqMA2vAH8JbAUlW/Gva6pq+bzLQlaJv6z0EsZcKDgsa2SwkPX3vHFnVc0f7XMPK661rlqrkH6v7siOfzRDsFZzUd6orlFGJKW9FKHgdaUs3PwOR11s8V1s6VHn16YkJdk7LRXWrXXxdZ8t8Y4pAly3uqV5h2zHhAGv/Yam7Z6XI/QHXH92UMzg2OCr5H6P/YsLGoR25QZhXtIgDGAq9evwHBAAbpWXTwelBa8TmYchqvsr5mGI5tSFecgvlJzUPI7w+41JcQbV2NcWkzrOPHZljlceL4DO64t5bLwAtpBFnileGGK2aukHzasq7M9qEPJbPpJBdL8R8KYk1RbWQzrdCFBiLG+2/AL7AG/iyBF9v6KQONe+gJIieVvgGovnt9mFJ9gFUNhFp8XzHiv/p8hV9cMC64VzVWffYHzRXNUSd1tF57l38aZv8danLt7EoG/tzk5N86TBmDWb3xAV3ZtfYoFP/wM=</diagram></mxfile>

examples/data-channels-detach/README.md

@@ -1,13 +1,18 @@
 # data-channels-detach
+
 data-channels-detach is an example that shows how you can detach a data channel. This allows direct access the the underlying [pion/datachannel](https://github.com/pion/datachannel). This allows you to interact with the data channel using a more idiomatic API based on the `io.ReadWriteCloser` interface.
 
 The example mirrors the data-channels example.
 
+## [architecture](https://viewer.diagrams.net/?tags=%7B%7D&highlight=FFFFFF&edit=_blank&layers=1&nav=1&title=drawio#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fmohammadne%2Fwebrtc-pion%2Fmaster%2Fexamples%2Fdata-channels-detach%2Fdrawio)
+
 ## Install
+
 ```
 export GO111MODULE=on
 go get github.com/pion/webrtc/v3/examples/data-channels-detach
 ```
 
 ## Usage
+
 The example can be used in the same way as the data-channel example or can be paired with the data-channels-detach-create example. In the latter case; run both example and exchange the offer/answer text by copy-pasting them on the other terminal.

examples/data-channels-detach/drawio

@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2021-10-30T10:32:59.846Z" agent="5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36" etag="NTECwzT9rus31BhrpZHD" version="15.6.2" type="device"><diagram id="29NtQO1aZSxM7vXwuhRQ" name="Page-1">7VxZc9o6GP01zKQPZPBuHgNpc5e05Q7t3PZR2AI8tS1XFoH011ey5U0SxKSYJUk6E6zPtmzO+XYp7RnjaHOHQbL8iHwY9vSBv+kZtz2d/tgW/WCSx1yiGTqXLHDgc1klmAa/IBcOuHQV+DBtXEgQCkmQNIUeimPokYYMYIzWzcvmKGw+NQELKAmmHghl6f+BT5a51NWdSv4XDBbL4smaPczPRKC4mH+TdAl8tK6JjPc9Y4wRIvlRtBnDkKFX4JLf92HL2fLFMIxJmxvuo49R4uGvv2bo05Ashv99/uL2+SwPIFzxL8xfljwWCMDYv2FA0lGMYioc+SBdQjarRgdLEoX8kMkngBCI40yiDwwqTQlGP0rwdCb5AYm35Dd5K/xQTiZ/J/6C0G/QxL/hHUQRJPiRXrCuyLE44MsaL4UMwxCQ4KFJLuA6siinK58wQQF9E33AFdoc8Hm4OlsFucUUKVphD/K76mQ8MZFmCxMRgBeQSBPRg9rXrkQZ13vwbih4t0MK1miOsvesFMD+uULFiX6aGegNvUBzk011kh4t+Gc2y6wQ/DNlhEKI6cfV5/kcYojfFVfRV5+Jd1JZ/gqFWFBHAjekqXa5go1RiHClo/MgDAURCIMFU0yPKhd9H2P0ADEJqKnf8BNR4PvsMaP1MiBwmgCPPXNNPRuVYbSK/UxRB6IKb9Va9gC42am3/KxlCPqg69fcUdY0e7hDs1VK3NCafVXEkVTEwxAQ2GM6b4OIgZL/ZgRBpjQhomjSz+nthP5GjG2JvwpHbQvSdWrrMNcp7emGD6A79yT+6Rnbc+FsfhhizGFJBKfGcAYSMVoR5+rMmF0x40rMYPhzBVNGQeAxgjwQ+4FPyUovHX9LcJSmqUBf5fE7Q19rETObzuJPQLag65sqkF19Ztj2YUB2rCbIuuvIIDsKkG2jI5AtCWMUs6QKpilL2C5cqR27ibcxOLVS29ud/RwhlsADAsZLQJPs8NLRF13K6dHXzO3ws9xpnBc3AbOBy8Zea4O9fVTsZVfzQrE3h81EpqxMT4e97HY6KkPuUK0MuYnT9VsdorZPo6kjZ1CHaHIhIpGRLkHCDldReOMRVAf1HsxgOEFpkJmwcTtDhKBIgTpBgsWiFQmDGI7LztKgAb9s1FRdeANLcw9Eh92kw3IUbBiqxKwrNnRV5+CVsGEJadsZsCEnDmGQEhhDLFd+Z+ixOiDJEaOcomB0FRwZnXGkCnJbLGYewg1vto5qfVcvBGkaeE3y9oC10WMVco+5xf4pc4/s5wK6spZQvlqueW0Ks7RtzOot5uq4N6vL/Z0pNbNaZ+3qIQBs8OX270/vXqmd68NhkyizIqqmdkp/3J2tDyXq8s4ohhHKSoqMwMuuI8Qazj55HVHw2eiIAv8eoeQqRIseWzPsZWuEKQqhbDEXRkC/TMCLpqimYOCoHQyjRVrYVUCDm4B8qx1/ZzNcW3x0u+ETZoPHYhDTb/2tPqjdxYbVbdmouG8re3l82YEQzwLy2LHjOuusQqs2MJuqZoh1XtvA6ggrXMZQmKjrFU9Fqpy5hpfaU3ZP7hPkztrRfULlB77Xzqh9wvNt22pp24UOnolxu0KzxxTzora27ZrCEql7ZNtuUWJd2JJcX9MEe1YtOyvX5LqyZ1POsl57s6Ev9OcMRSp81GaD+YxdG3lNCbKm+KVHQW3QJMQ+eRQ05WpeAvmt/fMnYUwXMh+n2L2wbxizzCcm6jiMmXL3QN34GaOE4vFhAqj3fbX9H7vZ/3EUfd7Sqo/iey05PkrcvG2mrRgU98A6h9pMa4sUd2y3lrwjLKWPzNavaXH5ArYOiFtmXFXL76hh1dJlzF9cp1WCfXhy2Per6d98nMDg8LkltjiRKzrLrn1cixK7s2ZO0awtB+2atWUTqNEYdnZ3hrdqVL0LNFkHI2vyL/4azZz7kTcZTedJnwPydBdocFYq2teEzqz53BZvuaGs+xavkgA5DGebhl/Q1lVp++Qxy9tdSl/HPIEXn+/0zw9oeYFtjSmK2RpnSj0vcwQg9lHUK5c0Xt5CZ7n6dDIa5FWk44VBZTjTWy507hk7DxoGdyn02URBYS1EXMJoGwTFiSznuEGwRYIuJFf7aOthU7GuMrHiD8WfUkH9rFTQEdIw0Ye11UDtmWkYVQPwWLssYRek++koHVZ/0Z5fXv3HAMb73w==</diagram></mxfile>

examples/data-channels-detach/jsfiddle/demo.html

@@ -2,14 +2,14 @@
 <textarea id="localSessionDescription" readonly="true"></textarea> <br />
 
 Golang base64 Session Description<br />
-<textarea id="remoteSessionDescription"></textarea><br/>
+<textarea id="remoteSessionDescription"></textarea><br />
 <button onclick="window.startSession()">Start Session</button><br />
 
 <br />
 
-<!--Message<br />
-<textarea id="message">This is my DataChannel message!</textarea> <br/>
-<button onclick="window.sendMessage()">Send Message</button> <br />-->
+Message<br />
+<textarea id="message">This is my DataChannel message!</textarea> <br />
+<button onclick="window.sendMessage()">Send Message</button> <br />
 
 <br />
 Logs<br />

examples/data-channels-detach/jsfiddle/demo.js

@@ -0,0 +1,49 @@
+/* eslint-env browser */
+
+let pc = new RTCPeerConnection({
+  iceServers: [
+    {
+      urls: 'stun:stun.l.google.com:19302'
+    }
+  ]
+})
+let log = msg => {
+  document.getElementById('logs').innerHTML += msg + '<br>'
+}
+
+let sendChannel = pc.createDataChannel('foo')
+sendChannel.onclose = () => console.log('sendChannel has closed')
+sendChannel.onopen = () => console.log('sendChannel has opened')
+sendChannel.onmessage = e => log(`Message from DataChannel '${sendChannel.label}' payload '${e.data}'`)
+
+pc.oniceconnectionstatechange = e => log(pc.iceConnectionState)
+pc.onicecandidate = event => {
+  if (event.candidate === null) {
+    document.getElementById('localSessionDescription').value = btoa(JSON.stringify(pc.localDescription))
+  }
+}
+
+pc.onnegotiationneeded = e =>
+  pc.createOffer().then(d => pc.setLocalDescription(d)).catch(log)
+
+window.sendMessage = () => {
+  let message = document.getElementById('message').value
+  if (message === '') {
+    return alert('Message must not be empty')
+  }
+
+  sendChannel.send(message)
+}
+
+window.startSession = () => {
+  let sd = document.getElementById('remoteSessionDescription').value
+  if (sd === '') {
+    return alert('Session Description must not be empty')
+  }
+
+  try {
+    pc.setRemoteDescription(new RTCSessionDescription(JSON.parse(atob(sd))))
+  } catch (e) {
+    alert(e)
+  }
+}

examples/data-channels-flow-control/README.md

@@ -1,4 +1,5 @@
 # data-channels-flow-control
+
 This example demonstrates how to use the following property / methods.
 
 * func (d *DataChannel) BufferedAmount() uint64
@@ -7,9 +8,12 @@ This example demonstrates how to use the following property / methods.
 * func (d *DataChannel) OnBufferedAmountLow(f func())
 
 These methods are equivalent to that of JavaScript WebRTC API.
-See https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel for more details.
+See <https://developer.mozilla.org/en-US/docs/Web/API/RTCDataChannel> for more details.
+
+## [architecture](https://viewer.diagrams.net/?tags=%7B%7D&highlight=FFFFFF&edit=_blank&layers=1&nav=1&title=drawio#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fmohammadne%2Fwebrtc-pion%2Fmaster%2Fexamples%2Fdata-channels-flow-control%2Fdrawio)
 
 ## When do we need it?
+
 Send or SendText methods are called on DataChannel to send data to the connected peer.
 The methods return immediately, but it does not mean the data was actually sent onto
 the wire. Instead, it is queued in a buffer until it actually gets sent out to the wire.
@@ -22,7 +26,6 @@ The rate you wish to send data might be much higher than the rate the data chann
 actually send to the peer over the Internet. The above properties/methods help your
 application to pace the amount of data to be pushed into the data channel.
 
-
 ## How to run the example code
 
 The demo code (main.go) implements two endpoints (offerPC and answerPC) in it.
@@ -45,10 +48,10 @@ connection, and data channel (label: "data").
 Once the data channel is successfully opened, offerPC will start sending a series of
 1024-byte packets to answerPC as fast as it can, until you kill the process by Ctrl-c.
 
-
 Here's how to run the code.
 
 At the root of the example, `pion/webrtc/examples/data-channels-flow-control/`:
+
 ```
 $ go run main.go
 2019/08/31 14:56:41 OnOpen: data-824635025728. Start sending a series of 1024-byte packets as fast as it can

examples/data-channels-flow-control/drawio

@@ -0,0 +1 @@
+<mxfile host="app.diagrams.net" modified="2021-10-31T10:59:36.691Z" agent="5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36" etag="ACDLtGSH_7-mxaAG8hCs" version="15.6.2" type="device"><diagram id="29NtQO1aZSxM7vXwuhRQ" name="Page-1">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</diagram></mxfile>

examples/data-channels/README.md

@@ -1,28 +1,41 @@
 # data-channels
+
 data-channels is a Pion WebRTC application that shows how you can send/recv DataChannel messages from a web browser
 
+## [architecture](https://viewer.diagrams.net/?tags=%7B%7D&highlight=FFFFFF&edit=_blank&layers=1&nav=1&title=drawio#Uhttps%3A%2F%2Fraw.githubusercontent.com%2Fmohammadne%2Fwebrtc-pion%2Fmaster%2Fexamples%2Fdata-channels%2Fdrawio)
+
 ## Instructions
+
 ### Download data-channels
+
 ```
 export GO111MODULE=on
 go get github.com/pion/webrtc/v3/examples/data-channels
 ```
 
 ### Open data-channels example page
+
 [jsfiddle.net](https://jsfiddle.net/9tsx15mg/90/)
 
 ### Run data-channels, with your browsers SessionDescription as stdin
+
 In the jsfiddle the top textarea is your browser's session description, copy that and:
+
 #### Linux/macOS
+
 Run `echo $BROWSER_SDP | data-channels`
+
 #### Windows
+
 1. Paste the SessionDescription into a file.
 1. 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
 
 ### 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!