Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Add WebRTC stubs.

  • Loading branch information...
commit f9b5091fda3438c6a38b68c40aa1d31238b3c949 1 parent 433c43a
Alexandre Bourget authored May 09, 2012
323  examples/testapp/testapp/static/chatter.js
... ...
@@ -1,101 +1,244 @@
  1
+appendMessage = function(message) {
  2
+  $('#chatlog').append(message);
  3
+}
  4
+
1 5
 $(document).ready(function() {
2  
-    // connect to the websocket
3  
-    socket = io.connect();
4  
-    chat = io.connect('/chat');
5  
-
6  
-    // Listen for the event "chat" and add the content to the log
7  
-    socket.on("chat", function(e) {
8  
-        console.log("Chat message event", arguments);
9  
-        $("#chatlog").append(e + "<br />");
10  
-    });
11  
-    socket.on("got_some_json", function(e) {
12  
-        console.log("We got back some json", e);
13  
-    });
14  
-    socket.on("message", function(e) {
15  
-        console.log("Message", e);
16  
-    });
17  
-    socket.on("connect", function(e) {
18  
-        console.log("Connected", arguments);
19  
-    });
20  
-    socket.on("disconnect", function(e) {
21  
-        console.log("Disconnected", arguments);
22  
-    });
23  
-    chat.on("disconnect", function(e) {
24  
-        console.log("Disconnected from chat", arguments);
25  
-    });
26  
-    chat.on("pack", function(e) {
27  
-        console.log("got pack message", e);
28  
-    });
29  
-    chat.on("bob", function(e) {
30  
-        console.log("Received the bob event on /chat", e);
31  
-    });
32  
-    chat.on("callmeback", function(param1, param2, ack) {
33  
-        console.log("Got the 'callmeback' call", param1, param2, ack);
34  
-        if (ack) {
35  
-            console.log("  sending an ack");
36  
-            ack("ackprm1", "ackprm2");
37  
-        } else {
38  
-            console.log("  no ack to send, probably already sent");
39  
-        }
40  
-    });
41  
-    chat.on("error", function(e) {
42  
-        console.log("Error", arguments);        
43  
-    });
  6
+  // connect to the websocket
  7
+  socket = io.connect();
  8
+  chat = io.connect('/chat');
44 9
 
  10
+  // Listen for the event "chat" and add the content to the log
  11
+  socket.on("chat", function(e) {
  12
+    console.log("Chat message event", arguments);
  13
+    appendMessage(e + "<br />");
  14
+  });
  15
+  socket.on("got_some_json", function(e) {
  16
+    console.log("We got back some json", e);
  17
+  });
  18
+  socket.on("message", function(e) {
  19
+    console.log("Message", e);
  20
+  });
  21
+  socket.on("nettest_configured", function(e) {
  22
+    console.log("Ok, configured", e);
  23
+  });
  24
+  socket.on("connect", function(e) {
  25
+    console.log("Connected", arguments);
  26
+  });
  27
+  socket.on("disconnect", function(e) {
  28
+    console.log("Disconnected", arguments);
  29
+  });
45 30
 
46  
-    // Execute whenever the form is submitted
47  
-    $("#chat_form").submit(function(e) {
48  
-        // don't allow the form to submit
49  
-        e.preventDefault();
50 31
 
51  
-        var val = $("#chatbox").val();
  32
+  /* Chat events */
  33
+  chat.on("rtc_invite", function(nickname, sdp) {
  34
+    console.log("Got an RTC_INVITE packet", nickname, sdp);
  35
+    var div = $("<div>You've been invited.  <a href='#' onclick='onJoinRemoteStream(this);'>Click here</a> to join</div>");
  36
+    div.data('sdp', sdp);
  37
+    appendMessage(div);
  38
+  });
  39
+  chat.on("disconnect", function(e) {
  40
+    console.log("Disconnected from chat", arguments);
  41
+  });
  42
+  chat.on("pack", function(e) {
  43
+    console.log("got pack message", e);
  44
+  });
  45
+  chat.on("bob", function(e) {
  46
+    console.log("Received the bob event on /chat", e);
  47
+  });
  48
+  chat.on("callmeback", function(param1, param2, ack) {
  49
+    console.log("Got the 'callmeback' call", param1, param2, ack);
  50
+    if (ack) {
  51
+      console.log("  sending an ack");
  52
+      ack("ackprm1", "ackprm2");
  53
+    } else {
  54
+      console.log("  no ack to send, probably already sent");
  55
+    }
  56
+  });
  57
+  chat.on("error", function(e) {
  58
+    console.log("Error", arguments);        
  59
+  });
52 60
 
53  
-        // send out the "chat" event with the textbox as the only argument
54  
-        socket.emit("chat", val);
55 61
 
56  
-        $("#chatlog").append(val + "<br />");
  62
+  // Execute whenever the form is submitted
  63
+  $("#chat_form").submit(function(e) {
  64
+    // don't allow the form to submit
  65
+    e.preventDefault();
57 66
 
58  
-        $("#chatbox").val("");
59  
-    });
  67
+    var val = $("#chatbox").val();
60 68
 
61  
-    $('#b1').click(function(){
62  
-        console.log("b1, emit bob, thank you")
63  
-        socket.emit("bob", {"thank": "you"});
64  
-    });
65  
-    $('#b2').click(function(){
66  
-        console.log("b2, send simple json message")
67  
-        socket.json.send({blah: "a simple message"});
68  
-    });
69  
-    $('#b3').click(function(){
70  
-        console.log("b3, json.emit(bob, {thank:you})")
71  
-        socket.emit("bob", {"thank": "you"});
72  
-        socket.send("a simple message");
73  
-    });
74  
-    $('#b4').click(function(){
75  
-        console.log("b4, send /chat elements")
76  
-        chat.emit('mymessage', 'bob');
77  
-        chat.send("hey");
78  
-        chat.json.send({asdfblah: "asd " + String.fromCharCode(13) + "fé\n\\'blah"});
79  
-    });
80  
-    $('#b5').click(function(){
81  
-        console.log("b5, ack stuff and callbacks")
82  
-        chat.emit("my_callback", {'this': 'is sweet'}, function() {
83  
-            console.log("OKAY! Executed callback!!!!!", arguments);
84  
-            chat.emit("mymessage", "bob");
85  
-        });
86  
-    });
87  
-    $('#b6').click(function(){
88  
-        console.log("b6, triggering server callback")
89  
-        chat.emit("trigger_server_callback", 'superbob as param');
90  
-        chat.send("a little message", function() {
91  
-            console.log("GOT BACK THE SIMPLE CALLBACK!");
92  
-        });
93  
-    });
94  
-    $('#b7').click(function(){
95  
-        console.log("b7, disconnet me please")
96  
-        //chat.emit("disconnect_me", 'superbob as param');
97  
-        chat.disconnect();
98  
-    });
  69
+    // send out the "chat" event with the textbox as the only argument
  70
+    socket.emit("chat", val);
  71
+
  72
+    appendMessage(val + "<br />");
  73
+
  74
+    $("#chatbox").val("");
  75
+  });
  76
+
  77
+  $('#b1').click(function(){
  78
+    console.log("b1, emit bob, thank you")
  79
+    socket.emit("bob", {"thank": "you"});
  80
+  });
  81
+  $('#b2').click(function(){
  82
+    console.log("b2, send simple json message")
  83
+    socket.json.send({blah: "a simple message"});
  84
+  });
  85
+  $('#b3').click(function(){
  86
+    console.log("b3, json.emit(bob, {thank:you})")
  87
+    socket.emit("bob", {"thank": "you"});
  88
+    socket.send("a simple message");
  89
+  });
  90
+  $('#b4').click(function(){
  91
+    console.log("b4, send /chat elements")
  92
+    chat.emit('mymessage', 'bob');
  93
+    chat.send("hey");
  94
+    chat.json.send({asdfblah: "asd " + String.fromCharCode(13) + "fé\n\\'blah"});
  95
+  });
  96
+  $('#b5').click(function(){
  97
+    console.log("b5, ack stuff and callbacks")
  98
+    chat.emit("my_callback", {'this': 'is sweet'}, function() {
  99
+      console.log("OKAY! Executed callback!!!!!", arguments);
  100
+      chat.emit("mymessage", "bob");
  101
+    });
  102
+  });
  103
+  $('#b6').click(function(){
  104
+    console.log("b6, triggering server callback")
  105
+    chat.emit("trigger_server_callback", 'superbob as param');
  106
+    chat.send("a little message", function() {
  107
+      console.log("GOT BACK THE SIMPLE CALLBACK!");
  108
+    });
  109
+  });
  110
+  $('#b7').click(function(){
  111
+    console.log("b7, disconnet me please")
  112
+    //chat.emit("disconnect_me", 'superbob as param');
  113
+    chat.disconnect();
  114
+  });
  115
+  $('#button_nettest_config').click(function() {
  116
+    var options = {test_name: 'A2',
  117
+                   num_packets: 50,
  118
+                   packet_size: 100,
  119
+                   delay_between_packets: 0,
  120
+                   spread_delay: 0,
  121
+                  }
  122
+    console.log("Calling nettest_config_next", options);
  123
+    socket.emit("nettest_config_next", options);
  124
+  });
  125
+  $('#button_nettest_launch').click(function() {
  126
+    console.log("Calling nettest_launch");
  127
+    socket.emit("nettest_launch", {});
  128
+  });
  129
+  $('#rtc_button').click(function() {
  130
+    console.log("Sending WebRTC invitation to the channel.")
  131
+    getUserMedia();
  132
+    var video_el = $('#rtc_video');
  133
+  });
99 134
 
100 135
 
101 136
 });
  137
+
  138
+
  139
+/** Web RTC stuff, inspired by http://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/index.html and the code from someone at PyCon, snippettized at https://gist.github.com/2026984 */
  140
+
  141
+
  142
+var pc = null;
  143
+var localStream = null;
  144
+
  145
+getUserMedia = function() {
  146
+  try {
  147
+    navigator.webkitGetUserMedia("video,audio", onUserMediaSuccess,
  148
+                                 onUserMediaError);
  149
+    console.log("Requested access to local media.");
  150
+  } catch (e) {
  151
+    alert("webkitGetUserMedia() failed. Does your browser support WebRTC?");
  152
+    console.log("webkitGetUserMedia failed with exception: " + e.message);
  153
+  }
  154
+}
  155
+onUserMediaSuccess = function(stream) {
  156
+  console.log("User has granted access to local media.");
  157
+  var url = webkitURL.createObjectURL(stream);
  158
+  var video_el = $('#rtc_video')[0];
  159
+  video_el.style.opacity = 1;
  160
+  video_el.autoplay = true;
  161
+  console.log("Got an ObjectURL for the stream:", url);
  162
+  video_el.src = url;
  163
+
  164
+  // Create my own peerConnection stuff..
  165
+  createPeerConnection();
  166
+}
  167
+onUserMediaError = function(error) {
  168
+  console.log("Failed to get access to local media. Error code was " + error.code);
  169
+  alert("Failed to get access to local media. Error code was " + error.code + ".");
  170
+}
  171
+
  172
+
  173
+onProcessSignalMessage = function() {
  174
+  var sdp = $(this).data('sdp');
  175
+  processSignalMessage(sdp);
  176
+  appendMessage("<p>Attempting to connect to remote, using SDP "+ sdp + ".</p>");
  177
+}
  178
+processSignalMessage = function(data) {
  179
+  pc.processSignalingMessage(data);
  180
+}
  181
+
  182
+onJoinRemoteStream = function(el) {
  183
+  console.log("Trying to do stuff");
  184
+  console.log(el);
  185
+  var sdp = $(el).parent().data('sdp');
  186
+  console.log("Trying to do stuff again", sdp);
  187
+  createPeerConnection(sdp)
  188
+}
  189
+createPeerConnection = function(sdp) {
  190
+  if (pc != null) { return; }
  191
+
  192
+  var pc_config = 'STUN stun.xten.com';
  193
+  try {
  194
+    pc = new webkitDeprecatedPeerConnection(pc_config,
  195
+                                            onSignalingMessage);
  196
+    console.log("Created webkitDeprecatedPeerConnnection with config \"" + pc_config + "\".");
  197
+  } catch (e) {
  198
+    console.log("Failed to create webkitDeprecatedPeerConnection, exception: " + e.message);
  199
+    try {
  200
+      pc = new webkitPeerConnection(pc_config,
  201
+                                    onSignalingMessage);
  202
+      console.log("Created webkitPeerConnnection with config \"" + pc_config + "\".");
  203
+    } catch (e) {
  204
+      console.log("Failed to create webkitPeerConnection, exception: " + e.message);
  205
+      alert("Cannot create PeerConnection object; tried webkitPeerConnection and webkitDeprecatedPeerConnection");
  206
+      return;
  207
+    }
  208
+  }
  209
+  pc.onconnecting = onSessionConnecting;
  210
+  pc.onopen = onSessionOpened;
  211
+  pc.onaddstream = onRemoteStreamAdded;
  212
+  pc.onremovestream = onRemoteStreamRemoved;
  213
+}
  214
+onSignalingMessage = function(message) {
  215
+  console.log("PC: Got a signaling message", message);
  216
+  chat.emit("rtc_invite", message);
  217
+}
  218
+onSessionConnecting = function(message) {
  219
+  console.log("PC: Session connecting.");
  220
+}
  221
+onSessionOpened = function(message) {
  222
+  console.log("PC: Session opened.");
  223
+}
  224
+onRemoteStreamAdded = function(event) {
  225
+  console.log("PC: Remote stream added.");
  226
+  var url = webkitURL.createObjectURL(event.stream);
  227
+  var remote_video = $('#rtc_remote_video')[0];
  228
+  remote_video.style.opacity = 1;
  229
+  remote_video.src = url;
  230
+  appendMessage("<input type=\"button\" id=\"hangup\" value=\"Hang up\" onclick=\"onHangup()\" />");
  231
+}
  232
+onRemoteStreamRemoved = function(event) {
  233
+  console.log("PC: Remote stream removed.");
  234
+}
  235
+onHangup = function() {
  236
+  console.log("PC: Hanging up.");
  237
+  $('#rtc_video')[0].style.opacity = 0;
  238
+  $('#rtc_remote_video')[0].style.opacity = 0;
  239
+  pc.close();
  240
+  // will trigger BYE from server
  241
+  chat.emit("rtc_hangup");
  242
+  pc = null;
  243
+  appendMessage("<p>You have left the call.</p>");
  244
+}
3  examples/testapp/testapp/templates/index.mako
@@ -24,6 +24,9 @@
24 24
     <button id="b5">Test 5</button>
25 25
     <button id="b6">Test 6</button>
26 26
     <button id="b7">Test 7</button>
  27
+    <button id="rtc_button">Send WebRTC invitation</button>
  28
+    <video id="rtc_video"></video>
  29
+    <video id="rtc_remote_video"></video>
27 30
   </div>
28 31
   </body>
29 32
 </html>
10  examples/testapp/testapp/views.py
@@ -3,6 +3,7 @@
3 3
 from socketio import socketio_manage
4 4
 from socketio.namespace import BaseNamespace
5 5
 from socketio.mixins import RoomsMixin, BroadcastMixin
  6
+from gevent import socket
6 7
 
7 8
 def index(request):
8 9
     """ Base view to load our template """
@@ -47,8 +48,8 @@ def index(request):
47 48
  id: 1,
48 49
  ack: 'data',
49 50
  endpoint: '',
50  
- name: 'tobi',
51  
- args: []
  51
+ name: 'chat',
  52
+ args: ['', '']
52 53
 }
53 54
 
54 55
 {type: 'json',
@@ -124,6 +125,11 @@ def cb2(param1, param2):
124 125
         self.emit('callmeback', 'this is a first param',
125 126
                   'this is the last param', callback=cb2)
126 127
 
  128
+    def on_rtc_invite(self, sdp):
  129
+        print "Got an RTC invite, now pushing to others..."
  130
+        self.emit_to_room('room1', 'rtc_invite', self.session['nickname'],
  131
+                          sdp)
  132
+        
127 133
     def recv_connect(self):
128 134
         self.session['nickname'] = 'guest123'
129 135
         self.join('room1')

0 notes on commit f9b5091

Please sign in to comment.
Something went wrong with that request. Please try again.