Add data-channels jsfiddle to git

examples/data-channels/README.md

@@ -1,5 +1,5 @@
 # data-channels
-TODO
+data-channels is a pion-WebRTC application that shows how you can send/recv DataChannel messages from a web browser
 
 ## Instructions
 ### Download data-channels
@@ -8,10 +8,10 @@ go get github.com/pions/webrtc/examples/data-channels
 ```
 
 ### Open data-channels example page
-[jsfiddle.net](http://jsfiddle.net/5hqt08fe/9/)
+[jsfiddle.net](https://jsfiddle.net/gh/get/library/pure/pions/webrtc/tree/master/examples/data-channels/jsfiddle)
 
 ### Run data-channels, with your browsers SessionDescription as stdin
-In the jsfiddle the top textarea is your browser, copy that and:
+In the jsfiddle the top textarea is your browser's session description, copy that and:
 #### Linux/macOS
 Run `echo $BROWSER_SDP | data-channels`
 #### Windows
@@ -22,6 +22,10 @@ Run `echo $BROWSER_SDP | data-channels`
 Copy the text that `data-channels` just emitted and copy into second text area
 
 ### Hit 'Start Session' in jsfiddle
-TODO
+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 browser!
+
+You can also type in your terminal, and when you hit enter it will appear in your web browser.
 
 Congrats, you have used pion-WebRTC! Now start building something cool

examples/data-channels/jsfiddle/demo.css

@@ -0,0 +1 @@
+

examples/data-channels/jsfiddle/demo.details

@@ -0,0 +1,5 @@
+---
+ name: data-channels
+ description: Example of using pion-WebRTC to communicate with a web browser using bi-direction DataChannels
+ authors:
+   - Sean DuBois

examples/data-channels/jsfiddle/demo.html

@@ -0,0 +1,9 @@
+Browser base64 Session Description <textarea id="localSessionDescription" readonly="true"></textarea> <br />
+Golang base64 Session Description: <textarea id="remoteSessionDescription"></textarea> <br/>
+<button onclick="window.startSession()"> Start Session </button> <br />
+<br />
+
+Message: <textarea id="message">This is my DataChannel message!</textarea> <br/>
+<button onclick="window.sendMessage()"> Send Message </button> <br />
+
+<div id="logs"></div>

examples/data-channels/jsfiddle/demo.js

@@ -0,0 +1,41 @@
+/* eslint-env browser */
+
+let pc = new RTCPeerConnection()
+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 => console.log(`sendChannel got ${e.data}`)
+
+pc.oniceconnectionstatechange = e => log(pc.iceConnectionState)
+
+pc.onnegotiationneeded = e =>
+  pc.createOffer({ }).then(d => {
+    document.getElementById('localSessionDescription').value = btoa(d.sdp)
+    return 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({type: 'answer', sdp: atob(sd)}))
+  } catch (e) {
+    alert(e)
+  }
+}