diff --git a/examples/data-channels/README.md b/examples/data-channels/README.md index b68d6b93..85c3e018 100644 --- a/examples/data-channels/README.md +++ b/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 diff --git a/examples/data-channels/jsfiddle/demo.css b/examples/data-channels/jsfiddle/demo.css new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/examples/data-channels/jsfiddle/demo.css @@ -0,0 +1 @@ + diff --git a/examples/data-channels/jsfiddle/demo.details b/examples/data-channels/jsfiddle/demo.details new file mode 100644 index 00000000..ab58100d --- /dev/null +++ b/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 diff --git a/examples/data-channels/jsfiddle/demo.html b/examples/data-channels/jsfiddle/demo.html new file mode 100644 index 00000000..1cc6e85d --- /dev/null +++ b/examples/data-channels/jsfiddle/demo.html @@ -0,0 +1,9 @@ +Browser base64 Session Description
+Golang base64 Session Description:
+
+
+ +Message:
+
+ +
diff --git a/examples/data-channels/jsfiddle/demo.js b/examples/data-channels/jsfiddle/demo.js new file mode 100644 index 00000000..e520f8f9 --- /dev/null +++ b/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 + '
' +} + +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) + } +}