Adding webrtc-sample demos under trunk/samples.

Review URL: https://webrtc-codereview.appspot.com/1126005 git-svn-id: http://webrtc.googlecode.com/svn/trunk@3578 4adac7df-926f-26a2-2b94-8c16560cd09d
2013-02-27 23:22:10 +00:00
parent 132c15de30
commit 98fce15c6f
30 changed files with 3409 additions and 0 deletions
--- a/samples/js/demos/html/dc1.html
+++ b/samples/js/demos/html/dc1.html
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Data Channel Demo 1</title>
+<style>
+button {
+  font: 18px sans-serif;
+  padding: 8px;
+}
+textarea {
+  font-family: monospace;
+  margin: 2px;
+  width: 480px;
+  height: 640px;
+}
+#left { position: absolute; left: 0; top: 0; width: 50%; }
+#right { position: absolute; right: 0; top: 0; width: 50%; }
+ 
+</style>
+</head>
+<body>
+<div id="left">
+<br>
+<h2>Send data</h2>
+<textarea id="dataChannelSend" rows="5" cols="15" disabled="true">
+</textarea><br>
+<button id="startButton" onclick="createConnection()">Start</button>
+<button id="sendButton" onclick="sendData()">Send Data</button>
+<button id="closeButton" onclick="closeDataChannels()">Stop Send Data
+</button>
+<br>
+</div>
+<div id="right">
+<br>
+<h2>Received Data</h2>
+<textarea id="dataChannelReceive" rows="5" cols="15" disabled="true">
+</textarea><br>
+</div>
+<script>
+var pc1, pc2, sendChannel, receiveChannel;
+startButton.disabled = false;
+sendButton.disabled = true;
+closeButton.disabled = true;
+
+function trace(text) {
+  // This function is used for logging.
+  if (text[text.length - 1] == '\n') {
+    text = text.substring(0, text.length - 1);
+  }
+  console.log((performance.now() / 1000).toFixed(3) + ": " + text);
+}
+ 
+function createConnection() {
+  var servers = null;
+  pc1 = new webkitRTCPeerConnection(servers,
+                                    {optional: [{RtpDataChannels: true}]});
+  trace('Created local peer connection object pc1');
+  
+  try {
+    // Reliable Data Channels not yet supported in Chrome
+    // Data Channel api supported from Chrome M25. 
+    // You need to start chrome with  --enable-data-channels flag.
+    sendChannel = pc1.createDataChannel("sendDataChannel", 
+                                         {reliable: false});
+    trace('Created send data channel');
+  } catch (e) {
+    alert('Failed to create data channel. ' +
+          'You need Chrome M25 or later with --enable-data-channels flag');
+    trace('Create Data channel failed with exception: ' + e.message);  
+  }
+  pc1.onicecandidate = iceCallback1; 
+  sendChannel.onopen = onSendChannelStateChange;
+  sendChannel.onclose = onSendChannelStateChange;
+  
+  pc2 = new webkitRTCPeerConnection(servers, 
+                                    {optional: [{RtpDataChannels: true}]});
+  trace('Created remote peer connection object pc2');
+  
+  pc2.onicecandidate = iceCallback2;
+  pc2.ondatachannel = receiveChannelCallback;
+  
+  pc1.createOffer(gotDescription1);
+  startButton.disabled = true;
+  closeButton.disabled = false;  
+}
+ 
+function sendData() {
+  var data = document.getElementById("dataChannelSend").value;
+  sendChannel.send(data);
+  trace('Sent Data: ' + data);
+}
+
+function closeDataChannels() {
+  trace('Closing data Channels');
+  sendChannel.close();
+  trace('Closed data channel with label: ' + sendChannel.label);
+  receiveChannel.close();
+  trace('Closed data channel with label: ' + receiveChannel.label);
+  pc1.close(); 
+  pc2.close();
+  pc1 = null;
+  pc2 = null;
+  trace('Closed peer connections');
+  startButton.disabled = false;
+  sendButton.disabled = true;
+  closeButton.disabled = true;
+  document.getElementById("dataChannelSend").value = "";
+  document.getElementById("dataChannelReceive").value = "";
+  document.getElementById("dataChannelSend").disabled = true;
+}
+
+function gotDescription1(desc) {
+  pc1.setLocalDescription(desc);
+  trace('Offer from pc1 \n' + desc.sdp);
+  pc2.setRemoteDescription(desc);
+  pc2.createAnswer(gotDescription2);
+}
+
+function gotDescription2(desc) {
+  pc2.setLocalDescription(desc);
+  trace('Answer from pc2 \n' + desc.sdp);
+  pc1.setRemoteDescription(desc);
+}
+
+function iceCallback1(event) { 
+  trace('local ice callback');
+  if (event.candidate) {
+    pc2.addIceCandidate(event.candidate);
+    trace('Local ICE candidate: \n' + event.candidate.candidate);
+  }
+}
+      
+function iceCallback2(event) {
+  trace('remote ice callback');
+  if (event.candidate) {
+    pc1.addIceCandidate(event.candidate);
+    trace('Remote ICE candidate: \n ' + event.candidate.candidate);
+  }
+}
+
+function receiveChannelCallback(event) {
+  trace('Receive Channel Callback');
+  receiveChannel = event.channel;
+  receiveChannel.onmessage = onReceiveMessageCallback;
+  receiveChannel.onopen = onReceiveChannelStateChange;
+  receiveChannel.onclose = onReceiveChannelStateChange;  
+}
+
+function onReceiveMessageCallback(event) {
+  trace('Received Message');
+  document.getElementById("dataChannelReceive").value = event.data;
+}
+
+function onSendChannelStateChange() {
+  var readyState = sendChannel.readyState;
+  trace('Send channel state is: ' + readyState);
+  if (readyState == "open") {
+    document.getElementById("dataChannelSend").disabled = false;
+    sendButton.disabled = false;
+    closeButton.disabled = false;
+  } else {
+    document.getElementById("dataChannelSend").disabled = true;
+    sendButton.disabled = true;
+    closeButton.disabled = true;
+  }
+}
+
+function onReceiveChannelStateChange() {
+  var readyState = receiveChannel.readyState;
+  trace('Receive channel state is: ' + readyState);
+}
+
+</script>
+</body>
+</html>
+