Move JSfiddle snippets to git

jsfiddle provides a way to create snippets from Github via a URL. This
way we can still provide easy demos, but get all the nice things from
having them in Git

Closes #32

examples/gstreamer-receive/README.md

@@ -14,7 +14,7 @@ go get github.com/pions/webrtc/examples/gstreamer-receive
 ```
 
 ### Open gstreamer-receive example page
-[jsfiddle.net](https://jsfiddle.net/usd3xmtz/2/) you should see your Webcam, two text-areas and a 'Start Session' button
+[jsfiddle.net](http://jsfiddle.net/gh/get/library/pure/pions/webrtc/tree/master/examples/gstreamer-receive/jsfiddle) you should see your Webcam, two text-areas and a 'Start Session' button
 
 ### Run gstreamer-receive with your browsers SessionDescription as stdin
 In the jsfiddle the top textarea is your browser, copy that and:

examples/gstreamer-receive/jsfiddle/demo.details

@@ -0,0 +1,5 @@
+---
+ name: gstreamer-receive
+ description: Example of using pion-WebRTC to play video using GStreamer
+ authors:
+   - Sean DuBois

examples/gstreamer-receive/jsfiddle/demo.html

@@ -0,0 +1,6 @@
+<video id="video1" width="160" height="120" autoplay muted></video> <br />
+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>
+
+<div id="logs"></div>

examples/gstreamer-receive/jsfiddle/demo.js

@@ -0,0 +1,31 @@
+/* eslint-env browser */
+
+let pc = new RTCPeerConnection()
+var log = msg => {
+  document.getElementById('logs').innerHTML += msg + '<br>'
+}
+
+navigator.mediaDevices.getUserMedia({video: true, audio: true})
+  .then(stream => pc.addStream(document.getElementById('video1').srcObject = stream))
+  .catch(log)
+
+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.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)
+  }
+}

examples/gstreamer-send/README.md

@@ -14,7 +14,7 @@ go get github.com/pions/webrtc/examples/gstreamer-send
 ```
 
 ### Open gstreamer-send example page
-[jsfiddle.net](http://jsfiddle.net/he7gmqzf/1) you should see two text-areas and a 'Start Session' button
+[jsfiddle.net](http://jsfiddle.net/gh/get/library/pure/pions/webrtc/tree/master/examples/gstreamer-send/jsfiddle) you should see two text-areas and a 'Start Session' button
 
 ### Run gstreamer-send with your browsers SessionDescription as stdin
 In the jsfiddle the top textarea is your browser, copy that and:

examples/gstreamer-send/jsfiddle/demo.details

@@ -0,0 +1,5 @@
+---
+ name: gstreamer-send
+ description: Example of using pion-WebRTC to send video to your browser using GStreamer
+ authors:
+   - Sean DuBois

examples/gstreamer-send/jsfiddle/demo.html

@@ -0,0 +1,6 @@
+<div id="remoteVideos"></div> <br />
+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>
+<div id="div"></div>

examples/gstreamer-send/jsfiddle/demo.js

@@ -0,0 +1,34 @@
+/* eslint-env browser */
+
+let pc = new RTCPeerConnection()
+let log = msg => {
+  document.getElementById('div').innerHTML += msg + '<br>'
+}
+
+pc.ontrack = function (event) {
+  var el = document.createElement(event.track.kind)
+  el.srcObject = event.streams[0]
+  el.autoplay = true
+  el.controls = true
+
+  document.getElementById('remoteVideos').appendChild(el)
+}
+
+pc.oniceconnectionstatechange = e => log(pc.iceConnectionState)
+pc.createOffer({offerToReceiveVideo: true, offerToReceiveAudio: true}).then(d => {
+  document.getElementById('localSessionDescription').value = btoa(d.sdp)
+  return pc.setLocalDescription(d)
+}).catch(log)
+
+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)
+  }
+}

examples/save-to-disk/README.md

@@ -8,7 +8,7 @@ go get github.com/pions/webrtc/examples/save-to-disk
 ```
 
 ### Open save-to-disk example page
-[jsfiddle.net](https://jsfiddle.net/usd3xmtz/2/) you should see your Webcam, two text-areas and a 'Start Session' button
+[jsfiddle.net](http://jsfiddle.net/gh/get/library/pure/pions/webrtc/tree/master/examples/save-to-disk/jsfiddle) you should see your Webcam, two text-areas and a 'Start Session' button
 
 ### Run save-to-disk, with your browsers SessionDescription as stdin
 In the jsfiddle the top textarea is your browser, copy that and:

examples/save-to-disk/jsfiddle/demo.details

@@ -0,0 +1,5 @@
+---
+ name: save-to-disk
+ description: Example of using pion-WebRTC to save video to disk in an IVF container
+ authors:
+   - Sean DuBois

examples/save-to-disk/jsfiddle/demo.html

@@ -0,0 +1,6 @@
+<video id="video1" width="160" height="120" autoplay muted></video> <br />
+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>
+
+<div id="logs"></div>

examples/save-to-disk/jsfiddle/demo.js

@@ -0,0 +1,31 @@
+/* eslint-env browser */
+
+let pc = new RTCPeerConnection()
+var log = msg => {
+  document.getElementById('logs').innerHTML += msg + '<br>'
+}
+
+navigator.mediaDevices.getUserMedia({video: true, audio: true})
+  .then(stream => pc.addStream(document.getElementById('video1').srcObject = stream))
+  .catch(log)
+
+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.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)
+  }
+}