Manage jsfiddle code in tree

Load code from GitHub repository.

examples/codecparam/README.md

@@ -8,7 +8,7 @@ go get github.com/pion/mediadevices/examples/codecparam
 
 ### Open example page
 
-[jsfiddle.net](https://jsfiddle.net/z7ms3u5r/) you should see two text-areas and a 'Start Session' button
+[jsfiddle.net](https://jsfiddle.net/gh/get/library/pure/pion/mediadevices/tree/master/examples/internal/jsfiddle/audio-and-video) you should see two text-areas and a 'Start Session' button
 
 ### Run simple with your browsers SessionDescription as stdin
 

examples/internal/jsfiddle/audio-and-video/demo.css

@@ -0,0 +1,14 @@
+textarea {
+  width: 100%;
+  min-height: 3.5em;
+  display: block;
+}
+button {
+  display: block;
+}
+video {
+  display: block;
+}
+h3 {
+  margin-bottom: 0;
+}

examples/internal/jsfiddle/audio-and-video/demo.details

@@ -0,0 +1,6 @@
+---
+ name: audio-and-video
+ description: Example of using Pion WebRTC to play audio and video
+ authors:
+   - Sean DuBois
+   - Atsushi Watanabe

examples/internal/jsfiddle/audio-and-video/demo.html

@@ -0,0 +1,12 @@
+<h3>Browser base64 Session Description</h3>
+<textarea id="localSessionDescription" readonly="true"></textarea>
+
+<h3>Golang base64 Session Description</h3>
+<textarea id="remoteSessionDescription"></textarea>
+<button onclick="window.startSession()">Start Session</button>
+
+<h3>Video</h3>
+<div id="remoteVideos"></div>
+
+<h3>Logs</h3>
+<div id="logs"></div>

examples/internal/jsfiddle/audio-and-video/demo.js

@@ -0,0 +1,46 @@
+/* eslint-env browser */
+
+const pc = new RTCPeerConnection({
+  iceServers: [{
+    urls: 'stun:stun.l.google.com:19302'
+  }]
+})
+const log = msg => {
+  document.getElementById('logs').innerHTML += msg + '<br>'
+}
+
+pc.ontrack = event => {
+  const 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.onicecandidate = event => {
+  if (event.candidate === null) {
+    document.getElementById('localSessionDescription').value = btoa(JSON.stringify(pc.localDescription))
+  }
+}
+
+// Offer to receive 1 audio, and 1 video tracks
+pc.addTransceiver('audio', {
+  'direction': 'recvonly'
+})
+pc.addTransceiver('video', {
+  'direction': 'recvonly'
+})
+pc.createOffer().then(d => pc.setLocalDescription(d)).catch(log)
+
+window.startSession = () => {
+  const 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/internal/jsfiddle/video/demo.css

@@ -0,0 +1,14 @@
+textarea {
+  width: 100%;
+  min-height: 3.5em;
+  display: block;
+}
+button {
+  display: block;
+}
+video {
+  display: block;
+}
+h3 {
+  margin-bottom: 0;
+}

examples/internal/jsfiddle/video/demo.details

@@ -0,0 +1,6 @@
+---
+ name: audio-and-video
+ description: Example of using Pion WebRTC to play audio and video
+ authors:
+   - Sean DuBois
+   - Atsushi Watanabe

examples/internal/jsfiddle/video/demo.html

@@ -0,0 +1,12 @@
+<h3>Browser base64 Session Description</h3>
+<textarea id="localSessionDescription" readonly="true"></textarea>
+
+<h3>Golang base64 Session Description</h3>
+<textarea id="remoteSessionDescription"></textarea>
+<button onclick="window.startSession()">Start Session</button>
+
+<h3>Video</h3>
+<div id="remoteVideos"></div>
+
+<h3>Logs</h3>
+<div id="logs"></div>

examples/internal/jsfiddle/video/demo.js

@@ -0,0 +1,43 @@
+/* eslint-env browser */
+
+const pc = new RTCPeerConnection({
+  iceServers: [{
+    urls: 'stun:stun.l.google.com:19302'
+  }]
+})
+const log = msg => {
+  document.getElementById('logs').innerHTML += msg + '<br>'
+}
+
+pc.ontrack = event => {
+  const 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.onicecandidate = event => {
+  if (event.candidate === null) {
+    document.getElementById('localSessionDescription').value = btoa(JSON.stringify(pc.localDescription))
+  }
+}
+
+// Offer to receive 1 video track
+pc.addTransceiver('video', {
+  'direction': 'recvonly'
+})
+pc.createOffer().then(d => pc.setLocalDescription(d)).catch(log)
+
+window.startSession = () => {
+  const 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/screenshare/README.md

@@ -8,7 +8,7 @@ go get github.com/pion/mediadevices/examples/screenshare
 
 ### Open example page
 
-[jsfiddle.net](https://jsfiddle.net/z7ms3u5r/) you should see two text-areas and a 'Start Session' button
+[jsfiddle.net](https://jsfiddle.net/gh/get/library/pure/pion/mediadevices/tree/master/examples/internal/jsfiddle/audio-and-video) you should see two text-areas and a 'Start Session' button
 
 ### Run screenshare with your browsers SessionDescription as stdin
 

examples/simple/README.md

@@ -8,7 +8,7 @@ go get github.com/pion/mediadevices/examples/simple
 
 ### Open example page
 
-[jsfiddle.net](https://jsfiddle.net/z7ms3u5r/) you should see two text-areas and a 'Start Session' button
+[jsfiddle.net](https://jsfiddle.net/gh/get/library/pure/pion/mediadevices/tree/master/examples/internal/jsfiddle/audio-and-video) you should see two text-areas and a 'Start Session' button
 
 ### Run simple with your browsers SessionDescription as stdin
 

examples/transform/README.md

@@ -8,7 +8,7 @@ go get github.com/pion/mediadevices/examples/transform
 
 ### Open example page
 
-[jsfiddle.net](https://jsfiddle.net/z7ms3u5r/) you should see two text-areas and a 'Start Session' button
+[jsfiddle.net](https://jsfiddle.net/gh/get/library/pure/pion/mediadevices/tree/master/examples/internal/jsfiddle/audio-and-video) you should see two text-areas and a 'Start Session' button
 
 ### Run transform with your browsers SessionDescription as stdin