├── .gitignore
├── LICENSE
├── README.md
├── image_processing_pipeline.html
├── images
    ├── new_file_arriving.png
    └── share_new_file.png
├── package.json
├── sdp_session_manager.html
├── sdp_session_manager.js
├── video_call_with_chat_and_file_sharing.html
└── webrtc_signal_server.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013 Rob Manson, http://buildAR.com. All rights reserved.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | getting_started_with_webrtc
 2 | ===========================
 3 | 
 4 | Example code to help you get started creating your own WebRTC applications. This application is designed to help you quickly and easily work out how WebRTC works under the hood and is written with a focus on readability. It is designed to make the Offer/Answer call setup process less opaque than the example code provided in the WebRTC API specification documents. It is not intended as a WebRTC API wrapper that hides all the complexity under a high level abstraction. Instead it provides a fully working example application with video calls, text chat and drag and drop file sharing.  It is the perfect launch point for anyone who wants to start developing their own WebRTC application and in the process really learn how the WebRTC API and signaling works.
 5 | 
 6 | For a full description of how all this code works and other examples described in more details see "Getting started with WebRTC" by Rob Manson, published by Packt Publishing (http://www.packtpub.com/getting-started-with-webrtc/book).
 7 | 
 8 | webrtc_polyfill.js 
 9 | ------------------
10 | (included inline within video_call_with_chat_and_file_sharing.html)
11 | This is a simple WebRTC polyfill based loosely on adapter.js by  Adam Barth. It is designed to make it easy to write WebRTC code that runs on different browser implementations (e.g. Chrome, Firefox, etc.).
12 | 
13 | video_call_with_chat_and_file_sharing.html
14 | ------------------------------------------
15 | This is a basic web page that connects a Caller and a Callee via a Web Socket signaling server to support a video call and text based chat with file sharing.  This utilises the new_file_arriving.png and share_new_file.png files in the images directory.
16 | 
17 | webrtc_signal_server.js
18 | -----------------------
19 | This is a node.js based script that provides Web server and Web Socket server functionality required to support the video_call_with_chat_and_file_sharing.html based WebRTC application.
20 | 
21 | This requires the "websocket" package that can be installed from the command line by typing `npm install websocket`.
22 | 
23 | or `npm install` from the project root
24 | 
25 | To start this server from the command line simply type "node webrtc_signal_server.js" then point your browser at http://localhost:1234
26 | You can replace localhost with any ip address you like and you can replace 1234 with any port you like too.
27 | 
28 | IMPORTANT: If you are trying to access this node server from more than one computer you MUST replace "localhost" with an IP address that can be accessed by all of these computers, at least via NAT/STUN (e.g. not 127.0.0.1). Firewalls may also limit access to port 1234 so this may also need to be updated. 
29 | 
30 | Extras
31 | ======
32 | 
33 | image_processing_pipeline.html
34 | ------------------------------
35 | This code is designed to help you explore how the Video/Canvas processing pipeline works. The coding style is focused on clearly describing the concepts and is not designed to be used as production code.
36 | 
37 | The key concepts covered are:
38 | - the Video/Canvas pipeline
39 | - Array Buffers vs Views
40 | - efficient frame buffer processing using multiple Views
41 | 
42 | sdp_session_manager.js & sdp_session_manager.html
43 | -------------------------------------------------
44 | This is a parser/renderer and example page designed to help you quickly get started exploring how to manipulate SDP based WebRTC sessions through javascript. None of this code deals with the actual sending/adding of SDP to any of the peers. This code simply handles the parsing, manipulation and rendering of SDP.
45 | 
46 | All feedback and discussion about the structure of the Javascript Object Model that represents the session is welcome.
47 | 
48 | All pull requests that improve the parsing and rendering is very welcome 8)
49 | 


--------------------------------------------------------------------------------
/image_processing_pipeline.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <script>
  5 | /*
  6 | 
  7 |   image_processing_pipeline.js by Rob Manson (buildAR.com)
  8 | 
  9 |     This code is designed to help you explore how the Video/Canvas processing
 10 |     pipeline works. 
 11 | 
 12 |     The coding style is focused on clearly describing the concepts and is not 
 13 |     designed to be used as production code.
 14 | 
 15 |     The key concepts covered are:
 16 |     - the Video/Canvas pipeline
 17 |     - Array Buffers vs Views
 18 |     - efficient frame buffer processing using multiple Views
 19 | 
 20 |     HINT:
 21 |     Search for "example:" to find useful examples below.
 22 | 
 23 | 
 24 |   The MIT License
 25 | 
 26 |   Copyright (c) 2013 Rob Manson, http://buildAR.com. All rights reserved.
 27 | 
 28 |   Permission is hereby granted, free of charge, to any person obtaining a copy
 29 |   of this software and associated documentation files (the "Software"), to deal
 30 |   in the Software without restriction, including without limitation the rights
 31 |   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 32 |   copies of the Software, and to permit persons to whom the Software is
 33 |   furnished to do so, subject to the following conditions:
 34 | 
 35 |   The above copyright notice and this permission notice shall be included in
 36 |   all copies or substantial portions of the Software.
 37 | 
 38 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 39 |   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 40 |   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 41 |   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 42 |   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 43 |   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 44 |   THE SOFTWARE.
 45 |  
 46 | */
 47 | 
 48 | ///////////////////////////////////////////////
 49 | /*          EDIT BELOW TO EXPERIMENT          */
 50 | ///////////////////////////////////////////////
 51 | 
 52 | // setup variables
 53 | var pipeline_processor_speed = 30; // processor iterations per second
 54 | var pipeline_width = 640;
 55 | var pipeline_height = 480;
 56 | 
 57 | 
 58 | // setup frame buffer processor
 59 | // - pipeline_callback() calls this function "pipeline_processor_speed" times per second
 60 | function example_processor(pipeline_image_data) {
 61 | 
 62 |   // Key concept: Array Buffers vs Array Buffer Views
 63 |   // Think of Buffers as long strings of bits
 64 |   // Think of Typed Arrays as Views into the Buffers
 65 |   // You can create Views in a specific format
 66 |   // You can create Views for a specific range
 67 |   // By using Views on top of a shared Buffer you reduce "copy" overhead
 68 | 
 69 |   // allow us to turn the processor on and off
 70 |   if (pipeline_filter_on) {
 71 | 
 72 |     // create a view where each item is a 4 byte RGBA pixel
 73 |     var pixels = new Uint32Array(pipeline_image_data.data.buffer);
 74 | 
 75 |     // create a view where each item is an 8 bit channel
 76 |     var channels = new Uint8ClampedArray(pipeline_image_data.data.buffer);
 77 | 
 78 |     // Key concept: efficient frame buffer processing using multiple Views
 79 |     // Both pixels and channels use the same underlying Buffer but fold the bits
 80 |     // into different ways of seeing that data
 81 | 
 82 |     // walk through all the pixels
 83 |     for (var pixel in pixels) {
 84 | 
 85 |       // get the channel item id for this pixel
 86 |       var channel_id = 4*pixel;
 87 | 
 88 |       // get RGBA channels
 89 |       var r = channel_id+0;
 90 |       var g = channel_id+1;
 91 |       var b = channel_id+2;
 92 |       var a = channel_id+3;
 93 | 
 94 |       // calculate the average of all three RGB values
 95 |       var rgb_avg = (channels[ r ] + channels[ g ] + channels[ b ]) / 3;
 96 | 
 97 |       // subtract the rgb_avg from 255
 98 |       //rgb_avg = 255-rgb_avg; // example: invert
 99 | 
100 |       // update all three channels to the average
101 |       channels[ r ] = rgb_avg; //+ 30; // example: sepia tone
102 |       channels[ g ] = rgb_avg;
103 |       channels[ b ] = rgb_avg;
104 | 
105 |       // add random noise to the alpha channel
106 |       //channels[ a ] = Math.round(Math.random()*255); // example: random alpha noise
107 | 
108 |       // chroma key 1 - make greener things transparent 
109 |       //if (channels[ g ] > channels[ r ] && channels[ g ] > channels[ b ]) {
110 |       //  channels[ a ] = 0; // example: make this transparent
111 |       //}
112 | 
113 |       // chroma key 2 - make darker things transparent 
114 |       //if (channels[ r ] < 75 && channels[ g ] < 75 && channels[ g ] < 75) {
115 |       //  channels[ a ] = 0; // example: make this transparent
116 |       //}
117 | 
118 |     }
119 | 
120 |     // draw the update image data back into the canvas
121 |     pipeline_ctx.putImageData(pipeline_image_data, 0, 0);
122 |   }
123 | }
124 | 
125 | 
126 | ///////////////////////////////////////////////
127 | /*        EDITING BELOW IS OPTIONAL          */
128 | ///////////////////////////////////////////////
129 | 
130 | var pipeline_canvas = undefined;
131 | var pipeline_ctx = undefined;
132 | var pipeline_video = undefined;
133 | var pipeline_interval = undefined;
134 | var pipeline_filter_on = false;
135 | 
136 | // start the whole process by getting a stream
137 | function start() {  // called by body.onload
138 |   get_stream(document.getElementById("pipeline_canvas"));
139 | }
140 | 
141 | // get a video stream
142 | function get_stream(canvas) {
143 |   pipeline_canvas = canvas;
144 |   pipeline_canvas.width = pipeline_width; // set this otherwise it defaults to 300
145 |   pipeline_canvas.height = pipeline_height; // set this otherwise it defaults to 150
146 |   pipeline_ctx = pipeline_canvas.getContext("2d");
147 |   /*
148 |   var options = { 
149 |     video:{
150 |       mandatory: {
151 |         width: { min: pipeline_width },
152 |         height: { min: pipeline_height }
153 |       },
154 |     //  optional: [
155 |     //    { frameRate: 60 },
156 |     //    { facingMode: "user" }
157 |     //  ]
158 |     }, 
159 |     audio:false 
160 |   };
161 |   */
162 |   var options = { video:true, audio:false };
163 |   get_user_media(options, create_vc_pipeline, got_error);
164 |   function got_error(error) {
165 |     console.log(error);
166 |   }
167 | }
168 | 
169 | // create a Video/Canvas MediaStream pipeline
170 | function create_vc_pipeline(stream) {
171 | 
172 |   // Key concept: Video/Canvas MediaStream processing pipeline
173 |   // The Video/Canvas pipeline allows you to connect a stream in one end
174 |   // and have it regularly output image_data objects at the other end
175 |   pipeline_video = document.createElement("video");
176 |   connect_stream_to_src(stream, pipeline_video);
177 |   start_pipeline();
178 | }
179 | 
180 | // create other types of Stream pipelines here
181 | // ...Image Capture...
182 | // function create_ic_pipeline(stream) { ... }
183 | // ...Recording...
184 | // function create_r_pipeline(stream) { ... }
185 | 
186 | // start the pipeline processor
187 | function start_pipeline() {
188 |   // NOTE: You may prefer to use requestAnimationFrame() or setTimeout() here as needed
189 |   //       setInterval() has been used in this demo for it's simplicity
190 |   pipeline_interval = setInterval(function() {
191 |       pipeline_callback();
192 |     }, 
193 |     1000/pipeline_processor_speed
194 |   );
195 | }
196 | 
197 | // pipeline processor callback 
198 | function pipeline_callback() {
199 |   if (pipeline_ctx && pipeline_video) {
200 |     pipeline_ctx.drawImage(pipeline_video, 0, 0, pipeline_width, pipeline_height);
201 |     example_processor(pipeline_ctx.getImageData(0, 0, pipeline_width, pipeline_height)); // process frame 
202 |     //console.log(pipeline_video.currentTime); // example: how to log video timestamps
203 |     // example: integrate other sensor data with timestamps here
204 |   }
205 | }
206 | 
207 | // toggle filter on/off 
208 | function toggle_filter() {
209 |   pipeline_filter_on = !pipeline_filter_on;
210 | }
211 | 
212 | // stop the pipeline processor
213 | function stop_pipeline() {
214 |   clearInterval(pipeline_interval);
215 | }
216 | 
217 | 
218 | ///////////////////////////////////////////////
219 | /*           GENERIC GUM POLY FILL           */
220 | ///////////////////////////////////////////////
221 | 
222 | // setup get_user_media polyfill
223 | var get_user_media = null;
224 | var connect_stream_to_src = null;
225 | var browser_type = null; 
226 | if (navigator.getUserMedia) { // WebRTC 1.0 standard compliant browser
227 |   get_user_media = navigator.getUserMedia.bind(navigator);
228 |   connect_stream_to_src = function(media_stream, media_element) {
229 |     media_element.srcObject = media_stream;
230 |     media_element.play();
231 |   };
232 |   browser_type = "webrtc";
233 | } else if (navigator.mozGetUserMedia) { // early firefox webrtc implementation
234 |   get_user_media = navigator.mozGetUserMedia.bind(navigator);
235 |   connect_stream_to_src = function(media_stream, media_element) {
236 |     media_element.mozSrcObject = media_stream;
237 |     media_element.play();
238 |   };
239 |   browser_type = "firefox";
240 | } else if (navigator.webkitGetUserMedia) { // early webkit webrtc implementation
241 |   get_user_media = navigator.webkitGetUserMedia.bind(navigator);
242 |   connect_stream_to_src = function(media_stream, media_element) {
243 |     media_element.src = webkitURL.createObjectURL(media_stream);
244 |     media_element.play();
245 |   };
246 |   browser_type = "webkit";
247 | } else {
248 |   alert("This browser does not support WebRTC - visit WebRTC.org for more info");
249 | }
250 | 
251 | </script>
252 | <style>
253 | #pipeline_canvas {
254 |   /* scale whole canvas here */
255 |   width:  640px;
256 |   height: 480px;
257 |   background-color: #FF0000;
258 | }
259 | </style>
260 | </head>
261 | <body onload="start()">
262 | <p><canvas id="pipeline_canvas"></canvas></p>
263 | <p><a href="#" onClick="toggle_filter()">TOGGLE FILTER</a> <-- View the source of this page to see what this does (HINT: search for "Key concept:" and "example:" to get started)</p>
264 | </body>
265 | </html>
266 | 


--------------------------------------------------------------------------------
/images/new_file_arriving.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buildar/getting_started_with_webrtc/00c357b4bff420c99dc090462063234c5902af13/images/new_file_arriving.png


--------------------------------------------------------------------------------
/images/share_new_file.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buildar/getting_started_with_webrtc/00c357b4bff420c99dc090462063234c5902af13/images/share_new_file.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "getting_started_with_webrtc",
 3 |   "version": "1.0.0",
 4 |   "description": "getting_started_with_webrtc\r ===========================",
 5 |   "main": "webrtc_signal_server.js",
 6 |   "dependencies": {
 7 |     "websocket": "^1.0.17"
 8 |   },
 9 |   "devDependencies": {},
10 |   "scripts": {
11 |     "test": "echo \"Error: no test specified\" && exit 1"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "https://github.com/buildar/getting_started_with_webrtc.git"
16 |   },
17 |   "author": "",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/buildar/getting_started_with_webrtc/issues"
21 |   },
22 |   "homepage": "https://github.com/buildar/getting_started_with_webrtc"
23 | }
24 | 


--------------------------------------------------------------------------------
/sdp_session_manager.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <script src="sdp_session_manager.js"></script>
  5 | </head>
  6 | <body>
  7 | View source for the secret sauce! 8)
  8 | </body>
  9 | <script>
 10 | /*
 11 |   The MIT License
 12 | 
 13 |   Copyright (c) 2013 Rob Manson, http://buildAR.com. All rights reserved.
 14 | 
 15 |   Permission is hereby granted, free of charge, to any person obtaining a copy
 16 |   of this software and associated documentation files (the "Software"), to deal
 17 |   in the Software without restriction, including without limitation the rights
 18 |   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 19 |   copies of the Software, and to permit persons to whom the Software is
 20 |   furnished to do so, subject to the following conditions:
 21 | 
 22 |   The above copyright notice and this permission notice shall be included in
 23 |   all copies or substantial portions of the Software.
 24 | 
 25 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 26 |   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 27 |   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 28 |   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 29 |   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 30 |   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 31 |   THE SOFTWARE.
 32 |  
 33 | 
 34 |   This is a rough example page so you can quickly get started exploring how 
 35 |   to manipulate SDP based WebRTC sessions through javascript.
 36 | 
 37 |   None of this code deals with the actual sending/adding of SDP to any of 
 38 |   the peers.
 39 | 
 40 |   This code simply handles the parsing, manipulation and rendering of SDP.
 41 | 
 42 |   All feedback and discussion about the structure of the Javascript Object 
 43 |   Model that represents the session is welcome.
 44 | 
 45 |   All pull requests that improve the parsing and rendering is very welcome 8)
 46 | 
 47 | 
 48 |   usage examples
 49 |   ==============
 50 |   
 51 |   basic usage
 52 |   -----------
 53 |   var sdp_sm = new sdp_session_manager(); 
 54 |   var session = sdp_sm.parse_sdp(sdp);
 55 |   var sdp_out = sdp_sm.render_sdp(session);
 56 | 
 57 |   NOTE: sdp should == sdp_out
 58 |   
 59 |   hold
 60 |   ----
 61 |   var sdp_sm = new sdp_session_manager(); 
 62 |   var session = sdp_sm.parse_sdp(sdp);
 63 |   sdp_sm.hold(0); // media stream 1
 64 |   sdp_sm.hold(1); // media stream 2 (as relevant based on the sdp you choose)
 65 |   sdp_sm.render_sdp(session);
 66 | 
 67 |   unhold
 68 |   ------
 69 |   var sdp_sm = new sdp_session_manager(); 
 70 |   var session = sdp_sm.parse_sdp(sdp);
 71 |   sdp_sm.unhold(0, "sendrcv"); // media stream 1
 72 |   sdp_sm.unhold(1, "sendrcv"); // media stream 2
 73 |   sdp_sm.render_sdp(session);
 74 | 
 75 |   list rtp formats 
 76 |   ----------------
 77 |   var sdp_sm = new sdp_session_manager(); 
 78 |   var session = sdp_sm.parse_sdp(sdp);
 79 |   sdp_sm.list_rtp_formats(1);
 80 | 
 81 | 
 82 |   example of json
 83 |   ---------------
 84 |   {
 85 |      "session" : {
 86 |         "net_type" : "IN",
 87 |         "other_attributes" : {
 88 |            "msid-semantic" : " WMS 5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK"
 89 |         },
 90 |         "time" : {
 91 |            "stop" : "0",
 92 |            "start" : "0"
 93 |         },
 94 |         "subject" : "-",
 95 |         "version" : "3",
 96 |         "username" : "-",
 97 |         "group_bundle" : [
 98 |            "audio",
 99 |            "video"
100 |         ],
101 |         "id" : "2738925626739154476",
102 |         "address" : "127.0.0.1",
103 |         "address_type" : "IP4"
104 |      },
105 |      "media" : [
106 |         {
107 |            "synchronisation_sources" : [
108 |               "2225430392 cname:XVx5MwI/mG7gpwKS",
109 |               "2225430392 msid:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK 5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoKa0",
110 |               "2225430392 mslabel:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK",
111 |               "2225430392 label:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoKa0"
112 |            ],
113 |            "connection" : {
114 |               "net_type" : "IN",
115 |               "address" : "123.456.789.012",
116 |               "address_type" : "IP4"
117 |            },
118 |            "other_attributes" : {
119 |               "rtcp" : "38703 IN IP4 123.456.789.012",
120 |               "ice-pwd" : "1ToUWZN+zmosFQ5NKRMMZpAw",
121 |               "maxptime" : "60",
122 |               "mid" : "audio",
123 |               "rtcp-mux" : "",
124 |               "crypto" : "1 AES_CM_128_HMAC_SHA1_80 inline:iqLbGf04Kf+AYqol9X809bUrW0gKoRm28s8XyewL",
125 |               "ice-options" : "google-ice",
126 |               "ice-ufrag" : "E2hbRMG2uTrfTOGG",
127 |               "extmap" : "1 urn:ietf:params:rtp-hdrext:ssrc-audio-level"
128 |            },
129 |            "mode" : "sendrecv",
130 |            "description" : {
131 |               "protocol" : "RTP/SAVPF",
132 |               "rtp_format_preferences" : [
133 |                  "111",
134 |                  "103",
135 |                  "104",
136 |                  "0",
137 |                  "8",
138 |                  "107",
139 |                  "106",
140 |                  "105",
141 |                  "13",
142 |                  "126"
143 |               ],
144 |               "port" : "38703"
145 |            },
146 |            "rtp_formats" : {
147 |               "104" : {
148 |                  "rate" : "32000",
149 |                  "name" : "ISAC"
150 |               },
151 |               "111" : {
152 |                  "rate" : "48000",
153 |                  "format_parameters" : "minptime=10",
154 |                  "encoding_parameter" : "2",
155 |                  "name" : "opus"
156 |               },
157 |               "107" : {
158 |                  "rate" : "48000",
159 |                  "name" : "CN"
160 |               },
161 |               "8" : {
162 |                  "rate" : "8000",
163 |                  "name" : "PCMA"
164 |               },
165 |               "103" : {
166 |                  "rate" : "16000",
167 |                  "name" : "ISAC"
168 |               },
169 |               "0" : {
170 |                  "rate" : "8000",
171 |                  "name" : "PCMU"
172 |               },
173 |               "106" : {
174 |                  "rate" : "32000",
175 |                  "name" : "CN"
176 |               },
177 |               "13" : {
178 |                  "rate" : "8000",
179 |                  "name" : "CN"
180 |               },
181 |               "105" : {
182 |                  "rate" : "16000",
183 |                  "name" : "CN"
184 |               },
185 |               "126" : {
186 |                  "rate" : "8000",
187 |                  "name" : "telephone-event"
188 |               }
189 |            },
190 |            "type" : "audio",
191 |            "candidates" : [
192 |               "2845767988 1 udp 2113937151 10.194.79.1 55430 typ host generation 0",
193 |               "2845767988 2 udp 2113937151 10.194.79.1 55430 typ host generation 0",
194 |               "328666875 1 udp 2113937151 172.20.10.2 42137 typ host generation 0",
195 |               "328666875 2 udp 2113937151 172.20.10.2 42137 typ host generation 0",
196 |               "3133702446 1 udp 1845501695 123.456.789.012 38703 typ srflx raddr 172.20.10.2 rport 42137 generation 0",
197 |               "3133702446 2 udp 1845501695 123.456.789.012 38703 typ srflx raddr 172.20.10.2 rport 42137 generation 0",
198 |               "12678881 1 udp 1845501695 123.456.789.012 41500 typ srflx raddr 10.194.79.1 rport 55430 generation 0",
199 |               "12678881 2 udp 1845501695 123.456.789.012 41500 typ srflx raddr 10.194.79.1 rport 55430 generation 0",
200 |               "3877438916 1 tcp 1509957375 10.194.79.1 0 typ host generation 0",
201 |               "3877438916 2 tcp 1509957375 10.194.79.1 0 typ host generation 0",
202 |               "1561653771 1 tcp 1509957375 172.20.10.2 0 typ host generation 0",
203 |               "1561653771 2 tcp 1509957375 172.20.10.2 0 typ host generation 0"
204 |            ]
205 |         },
206 |         {
207 |            "synchronisation_sources" : [
208 |               "2357739379 cname:XVx5MwI/mG7gpwKS",
209 |               "2357739379 msid:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK 5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoKv0",
210 |               "2357739379 mslabel:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK",
211 |               "2357739379 label:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoKv0"
212 |            ],
213 |            "connection" : {
214 |               "net_type" : "IN",
215 |               "address" : "123.456.789.012",
216 |               "address_type" : "IP4"
217 |            },
218 |            "other_attributes" : {
219 |               "rtcp" : "38703 IN IP4 123.456.789.012",
220 |               "rtcp-fb" : "100 ccm fir",
221 |               "ice-pwd" : "1ToUWZN+zmosFQ5NKRMMZpAw",
222 |               "mid" : "video",
223 |               "rtcp-mux" : "",
224 |               "crypto" : "1 AES_CM_128_HMAC_SHA1_80 inline:iqLbGf04Kf+AYqol9X809bUrW0gKoRm28s8XyewL",
225 |               "ice-options" : "google-ice",
226 |               "ice-ufrag" : "E2hbRMG2uTrfTOGG",
227 |               "extmap" : "2 urn:ietf:params:rtp-hdrext:toffset"
228 |            },
229 |            "mode" : "sendrecv",
230 |            "description" : {
231 |               "protocol" : "100",
232 |               "rtp_format_preferences" : [
233 |                  "116",
234 |                  "117"
235 |               ],
236 |               "port" : "RTP/SAVPF"
237 |            },
238 |            "rtp_formats" : {
239 |               "116" : {
240 |                  "rate" : "90000",
241 |                  "name" : "red"
242 |               },
243 |               "117" : {
244 |                  "rate" : "90000",
245 |                  "name" : "ulpfec"
246 |               },
247 |               "100" : {
248 |                  "rate" : "90000",
249 |                  "name" : "VP8"
250 |               }
251 |            },
252 |            "type" : "video",
253 |            "candidates" : [
254 |               "2845767988 1 udp 2113937151 10.194.79.1 55430 typ host generation 0",
255 |               "2845767988 2 udp 2113937151 10.194.79.1 55430 typ host generation 0",
256 |               "328666875 1 udp 2113937151 172.20.10.2 42137 typ host generation 0",
257 |               "328666875 2 udp 2113937151 172.20.10.2 42137 typ host generation 0",
258 |               "3133702446 1 udp 1845501695 123.456.789.012 38703 typ srflx raddr 172.20.10.2 rport 42137 generation 0",
259 |               "3133702446 2 udp 1845501695 123.456.789.012 38703 typ srflx raddr 172.20.10.2 rport 42137 generation 0",
260 |               "12678881 1 udp 1845501695 123.456.789.012 41500 typ srflx raddr 10.194.79.1 rport 55430 generation 0",
261 |               "12678881 2 udp 1845501695 123.456.789.012 41500 typ srflx raddr 10.194.79.1 rport 55430 generation 0",
262 |               "3877438916 1 tcp 1509957375 10.194.79.1 0 typ host generation 0",
263 |               "3877438916 2 tcp 1509957375 10.194.79.1 0 typ host generation 0",
264 |               "1561653771 1 tcp 1509957375 172.20.10.2 0 typ host generation 0",
265 |               "1561653771 2 tcp 1509957375 172.20.10.2 0 typ host generation 0"
266 |            ]
267 |         }
268 |      ]
269 |   }
270 | 
271 | */
272 | 
273 | // here's some random sdp examples for quick testing
274 | var sdp = "v=0\r\no=- 2738925626739154476 3 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE audio video\r\na=msid-semantic: WMS 5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK\r\nm=audio 38703 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126\r\nc=IN IP4 123.456.789.012\r\na=rtcp:38703 IN IP4 123.456.789.012\r\na=candidate:2845767988 1 udp 2113937151 10.194.79.1 55430 typ host generation 0\r\na=candidate:2845767988 2 udp 2113937151 10.194.79.1 55430 typ host generation 0\r\na=candidate:328666875 1 udp 2113937151 172.20.10.2 42137 typ host generation 0\r\na=candidate:328666875 2 udp 2113937151 172.20.10.2 42137 typ host generation 0\r\na=candidate:3133702446 1 udp 1845501695 123.456.789.012 38703 typ srflx raddr 172.20.10.2 rport 42137 generation 0\r\na=candidate:3133702446 2 udp 1845501695 123.456.789.012 38703 typ srflx raddr 172.20.10.2 rport 42137 generation 0\r\na=candidate:12678881 1 udp 1845501695 123.456.789.012 41500 typ srflx raddr 10.194.79.1 rport 55430 generation 0\r\na=candidate:12678881 2 udp 1845501695 123.456.789.012 41500 typ srflx raddr 10.194.79.1 rport 55430 generation 0\r\na=candidate:3877438916 1 tcp 1509957375 10.194.79.1 0 typ host generation 0\r\na=candidate:3877438916 2 tcp 1509957375 10.194.79.1 0 typ host generation 0\r\na=candidate:1561653771 1 tcp 1509957375 172.20.10.2 0 typ host generation 0\r\na=candidate:1561653771 2 tcp 1509957375 172.20.10.2 0 typ host generation 0\r\na=ice-ufrag:E2hbRMG2uTrfTOGG\r\na=ice-pwd:1ToUWZN+zmosFQ5NKRMMZpAw\r\na=ice-options:google-ice\r\na=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level\r\na=sendrecv\r\na=mid:audio\r\na=rtcp-mux\r\na=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:iqLbGf04Kf+AYqol9X809bUrW0gKoRm28s8XyewL\r\na=rtpmap:111 opus/48000/2\r\na=fmtp:111 minptime=10\r\na=rtpmap:103 ISAC/16000\r\na=rtpmap:104 ISAC/32000\r\na=rtpmap:0 PCMU/8000\r\na=rtpmap:8 PCMA/8000\r\na=rtpmap:107 CN/48000\r\na=rtpmap:106 CN/32000\r\na=rtpmap:105 CN/16000\r\na=rtpmap:13 CN/8000\r\na=rtpmap:126 telephone-event/8000\r\na=maxptime:60\r\na=ssrc:2225430392 cname:XVx5MwI/mG7gpwKS\r\na=ssrc:2225430392 msid:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK 5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoKa0\r\na=ssrc:2225430392 mslabel:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK\r\na=ssrc:2225430392 label:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoKa0\r\nm=video RTP/SAVPF 100 116 117\r\nc=IN IP4 123.456.789.012\r\na=rtcp:38703 IN IP4 123.456.789.012\r\na=candidate:2845767988 1 udp 2113937151 10.194.79.1 55430 typ host generation 0\r\na=candidate:2845767988 2 udp 2113937151 10.194.79.1 55430 typ host generation 0\r\na=candidate:328666875 1 udp 2113937151 172.20.10.2 42137 typ host generation 0\r\na=candidate:328666875 2 udp 2113937151 172.20.10.2 42137 typ host generation 0\r\na=candidate:3133702446 1 udp 1845501695 123.456.789.012 38703 typ srflx raddr 172.20.10.2 rport 42137 generation 0\r\na=candidate:3133702446 2 udp 1845501695 123.456.789.012 38703 typ srflx raddr 172.20.10.2 rport 42137 generation 0\r\na=candidate:12678881 1 udp 1845501695 123.456.789.012 41500 typ srflx raddr 10.194.79.1 rport 55430 generation 0\r\na=candidate:12678881 2 udp 1845501695 123.456.789.012 41500 typ srflx raddr 10.194.79.1 rport 55430 generation 0\r\na=candidate:3877438916 1 tcp 1509957375 10.194.79.1 0 typ host generation 0\r\na=candidate:3877438916 2 tcp 1509957375 10.194.79.1 0 typ host generation 0\r\na=candidate:1561653771 1 tcp 1509957375 172.20.10.2 0 typ host generation 0\r\na=candidate:1561653771 2 tcp 1509957375 172.20.10.2 0 typ host generation 0\r\na=ice-ufrag:E2hbRMG2uTrfTOGG\r\na=ice-pwd:1ToUWZN+zmosFQ5NKRMMZpAw\r\na=ice-options:google-ice\r\na=extmap:2 urn:ietf:params:rtp-hdrext:toffset\r\na=sendrecv\r\na=mid:video\r\na=rtcp-mux\r\na=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:iqLbGf04Kf+AYqol9X809bUrW0gKoRm28s8XyewL\r\na=rtpmap:100 VP8/90000\r\na=rtcp-fb:100 ccm fir\r\na=rtcp-fb:100 nack \r\na=rtcp-fb:100 goog-remb \r\na=rtpmap:116 red/90000\r\na=rtpmap:117 ulpfec/90000\r\na=ssrc:2357739379 cname:XVx5MwI/mG7gpwKS\r\na=ssrc:2357739379 msid:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK 5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoKv0\r\na=ssrc:2357739379 mslabel:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK\r\na=ssrc:2357739379 label:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoKv0\r\n";
275 | 
276 | var sdp2 = "v=0\r\no=- 187493392 2 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE audio video\r\na=msid-semantic: WMS lCvU2FlLeBhVSlbp5e1G7fb2YsLceBMcEHnl\r\nm=audio 1 RTP/SAVPF 103 104 111 0 8 107 106 105 13 126\r\nc=IN IP4 0.0.0.0\r\na=rtcp:1 IN IP4 0.0.0.0\r\na=ice-ufrag:6hI+d5BB2RJZI7Cf\r\na=ice-pwd:GXys/5SsiKlnq1ZhMTXkVClJ\r\na=ice-options:google-ice\r\na=sendrecv\r\na=mid:audio\r\na=rtcp-mux\r\na=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:wM6Rdi8wPHauGtSRcU2t0iT49Imyqj6pPddGC0tj\r\na=rtpmap:103 ISAC/16000\r\na=rtpmap:104 ISAC/32000\r\na=rtpmap:111 opus/48000/2\r\na=rtpmap:0 PCMU/8000\r\na=rtpmap:8 PCMA/8000\r\na=rtpmap:107 CN/48000\r\na=rtpmap:106 CN/32000\r\na=rtpmap:105 CN/16000\r\na=rtpmap:13 CN/8000\r\na=rtpmap:126 telephone-event/8000\r\na=ssrc:4253239662 cname:Bu0o4VhmGvXNnRzp\r\na=ssrc:4253239662 msid:lCvU2FlLeBhVSlbp5e1G7fb2YsLceBMcEHnl a0\r\na=ssrc:4253239662 mslabel:lCvU2FlLeBhVSlbp5e1G7fb2YsLceBMcEHnl\r\na=ssrc:4253239662 label:lCvU2FlLeBhVSlbp5e1G7fb2YsLceBMcEHnla0\r\nm=video 1 RTP/SAVPF 100 116 117\r\nc=IN IP4 0.0.0.0\r\na=rtcp:1 IN IP4 0.0.0.0\r\na=ice-ufrag:6hI+d5BB2RJZI7Cf\r\na=ice-pwd:GXys/5SsiKlnq1ZhMTXkVClJ\r\na=ice-options:google-ice\r\na=sendrecv\r\na=mid:video\r\na=rtcp-mux\r\na=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:wM6Rdi8wPHauGtSRcU2t0iT49Imyqj6pPddGC0tj\r\na=rtpmap:100 VP8/90000\r\na=rtpmap:116 red/90000\r\na=rtpmap:117 ulpfec/90000\r\na=ssrc:2756695341 cname:Bu0o4VhmGvXNnRzp\r\na=ssrc:2756695341 msid:lCvU2FlLeBhVSlbp5e1G7fb2YsLceBMcEHnl v0\r\na=ssrc:2756695341 mslabel:lCvU2FlLeBhVSlbp5e1G7fb2YsLceBMcEHnl\r\na=ssrc:2756695341 label:lCvU2FlLeBhVSlbp5e1G7fb2YsLceBMcEHnlv0\r\n";
277 | 
278 | var sdp3 = "v=0\r\no=- 2738925626739154476 3 IN IP4 127.0.0.1\r\ns=-\r\nt=0 0\r\na=group:BUNDLE audio video\r\na=msid-semantic: WMS 5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK\r\nm=audio 38703 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126\r\nc=IN IP4 123.456.789.012\r\na=rtcp:38703 IN IP4 123.456.789.012\r\na=candidate:2845767988 1 udp 2113937151 10.194.79.1 55430 typ host generation 0\r\na=candidate:2845767988 2 udp 2113937151 10.194.79.1 55430 typ host generation 0\r\na=candidate:328666875 1 udp 2113937151 172.20.10.2 42137 typ host generation 0\r\na=candidate:328666875 2 udp 2113937151 172.20.10.2 42137 typ host generation 0\r\na=candidate:3133702446 1 udp 1845501695 123.456.789.012 38703 typ srflx raddr 172.20.10.2 rport 42137 generation 0\r\na=candidate:3133702446 2 udp 1845501695 123.456.789.012 38703 typ srflx raddr 172.20.10.2 rport 42137 generation 0\r\na=candidate:12678881 1 udp 1845501695 123.456.789.012 41500 typ srflx raddr 10.194.79.1 rport 55430 generation 0\r\na=candidate:12678881 2 udp 1845501695 123.456.789.012 41500 typ srflx raddr 10.194.79.1 rport 55430 generation 0\r\na=candidate:3877438916 1 tcp 1509957375 10.194.79.1 0 typ host generation 0\r\na=candidate:3877438916 2 tcp 1509957375 10.194.79.1 0 typ host generation 0\r\na=candidate:1561653771 1 tcp 1509957375 172.20.10.2 0 typ host generation 0\r\na=candidate:1561653771 2 tcp 1509957375 172.20.10.2 0 typ host generation 0\r\na=ice-ufrag:E2hbRMG2uTrfTOGG\r\na=ice-pwd:1ToUWZN+zmosFQ5NKRMMZpAw\r\na=ice-options:google-ice\r\na=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level\r\na=sendrecv\r\na=mid:audio\r\na=rtcp-mux\r\na=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:iqLbGf04Kf+AYqol9X809bUrW0gKoRm28s8XyewL\r\na=rtpmap:111 opus/48000/2\r\na=fmtp:111 minptime=10\r\na=rtpmap:103 ISAC/16000\r\na=rtpmap:104 ISAC/32000\r\na=rtpmap:0 PCMU/8000\r\na=rtpmap:8 PCMA/8000\r\na=rtpmap:107 CN/48000\r\na=rtpmap:106 CN/32000\r\na=rtpmap:105 CN/16000\r\na=rtpmap:13 CN/8000\r\na=rtpmap:126 telephone-event/8000\r\na=maxptime:60\r\na=ssrc:2225430392 cname:XVx5MwI/mG7gpwKS\r\na=ssrc:2225430392 msid:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK 5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoKa0\r\na=ssrc:2225430392 mslabel:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK\r\na=ssrc:2225430392 label:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoKa0\r\nm=video 38703 RTP/SAVPF 100 116 117\r\nc=IN IP4 123.456.789.012\r\na=rtcp:38703 IN IP4 123.456.789.012\r\na=candidate:2845767988 1 udp 2113937151 10.194.79.1 55430 typ host generation 0\r\na=candidate:2845767988 2 udp 2113937151 10.194.79.1 55430 typ host generation 0\r\na=candidate:328666875 1 udp 2113937151 172.20.10.2 42137 typ host generation 0\r\na=candidate:328666875 2 udp 2113937151 172.20.10.2 42137 typ host generation 0\r\na=candidate:3133702446 1 udp 1845501695 123.456.789.012 38703 typ srflx raddr 172.20.10.2 rport 42137 generation 0\r\na=candidate:3133702446 2 udp 1845501695 123.456.789.012 38703 typ srflx raddr 172.20.10.2 rport 42137 generation 0\r\na=candidate:12678881 1 udp 1845501695 123.456.789.012 41500 typ srflx raddr 10.194.79.1 rport 55430 generation 0\r\na=candidate:12678881 2 udp 1845501695 123.456.789.012 41500 typ srflx raddr 10.194.79.1 rport 55430 generation 0\r\na=candidate:3877438916 1 tcp 1509957375 10.194.79.1 0 typ host generation 0\r\na=candidate:3877438916 2 tcp 1509957375 10.194.79.1 0 typ host generation 0\r\na=candidate:1561653771 1 tcp 1509957375 172.20.10.2 0 typ host generation 0\r\na=candidate:1561653771 2 tcp 1509957375 172.20.10.2 0 typ host generation 0\r\na=ice-ufrag:E2hbRMG2uTrfTOGG\r\na=ice-pwd:1ToUWZN+zmosFQ5NKRMMZpAw\r\na=ice-options:google-ice\r\na=extmap:2 urn:ietf:params:rtp-hdrext:toffset\r\na=sendrecv\r\na=mid:video\r\na=rtcp-mux\r\na=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:iqLbGf04Kf+AYqol9X809bUrW0gKoRm28s8XyewL\r\na=rtpmap:100 VP8/90000\r\na=rtcp-fb:100 ccm fir\r\na=rtcp-fb:100 nack \r\na=rtcp-fb:100 goog-remb \r\na=rtpmap:116 red/90000\r\na=rtpmap:117 ulpfec/90000\r\na=ssrc:2357739379 cname:XVx5MwI/mG7gpwKS\r\na=ssrc:2357739379 msid:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK 5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoKv0\r\na=ssrc:2357739379 mslabel:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoK\r\na=ssrc:2357739379 label:5AbKYRUGTe9roRp2Vb84bKnRtXNPW2FQxmoKv0\r\n";
279 | 
280 | var sdp4 = "v=0\r\no=Mozilla-SIPUA-24.0a1 8779 0 IN IP4 0.0.0.0\r\ns=SIP Call\r\nt=0 0\r\na=ice-ufrag:390cc303\r\na=ice-pwd:02de074e065bea46807d82ff2a6f08c7\r\na=fingerprint:sha-256 2A:42:CD:9C:E9:F0:51:81:8F:51:99:E8:12:D6:E9:DE:5C:E6:74:DF:64:88:0A:82:0D:5A:91:10:79:05:4A:51\r\nm=audio 38045 RTP/SAVPF 109 0 8 101\r\nc=IN IP4 192.168.22.44\r\na=rtpmap:109 opus/48000/2\r\na=ptime:20\r\na=rtpmap:0 PCMU/8000\r\na=rtpmap:8 PCMA/8000\r\na=rtpmap:101 telephone-event/8000\r\na=fmtp:101 0-15\r\na=sendrecv\r\na=candidate:0 1 UDP 2112356607 192.168.22.44 38045 typ host\r\na=candidate:0 2 UDP 2112356606 192.168.22.44 42635 typ host\r\nm=video 52194 RTP/SAVPF 120\r\nc=IN IP4 192.168.22.44\r\na=rtpmap:120 VP8/90000\r\na=sendrecv\r\na=candidate:0 1 UDP 2112356607 192.168.22.44 52194 typ host\r\na=candidate:0 2 UDP 2112356606 192.168.22.44 42608 typ host\r\n";
281 | 
282 | var sdp5 = "v=0\r\no=Mozilla-SIPUA 13445 0 IN IP4 0.0.0.0\r\ns=SIP Call\r\nt=0 0\r\na=ice-ufrag:fce5ed7d\r\na=ice-pwd:236c73310fcf2a40d4a3c873bbcb55c0\r\na=fingerprint:sha-256 6D:D8:B3:8F:67:48:84:59:E4:57:9E:07:38:79:3A:9B:51:A1:8A:5D:D6:B8:B7:AF:52:39:B6:61:73:84:2A:04\r\nm=audio 39256 RTP/SAVPF 109 101\r\nc=IN IP4 192.168.22.58\r\na=rtpmap:109 opus/48000/2\r\na=ptime:20\r\na=rtpmap:101 telephone-event/8000\r\na=fmtp:101 0-15\r\na=sendrecv\r\na=candidate:0 1 UDP 2113601791 192.168.22.58 39256 typ host\r\na=candidate:0 2 UDP 2113601790 192.168.22.58 57517 typ host\r\nm=video 53285 RTP/SAVPF 120\r\nc=IN IP4 192.168.22.58\r\na=rtpmap:120 VP8/90000\r\na=sendrecv\r\na=candidate:0 1 UDP 2113601791 192.168.22.58 53285 typ host\r\na=candidate:0 2 UDP 2113601790 192.168.22.58 50349 typ host\r\n";
283 | </script>
284 | </html>
285 | 


--------------------------------------------------------------------------------
/sdp_session_manager.js:
--------------------------------------------------------------------------------
  1 | function sdp_session_manager() {
  2 |   /*
  3 | 
  4 |   sdp_session_manager.js by Rob Manson (buildAR.com)
  5 | 
  6 |   An SDP parsing and rendering process based on rfc4566 and rfc3264.
  7 | 
  8 |   basic usage
  9 |   -----------
 10 |   var sdp_sm = new sdp_session_manager(); 
 11 |   var session = sdp_sm.parse_sdp(sdp_in);
 12 |   var sdp_out = sdp_sm.render_sdp(session);
 13 | 
 14 |   NOTE: sdp_out should == sdp_in
 15 | 
 16 | 
 17 |   The MIT License
 18 | 
 19 |   Copyright (c) 2013 Rob Manson, http://buildAR.com. All rights reserved.
 20 | 
 21 |   Permission is hereby granted, free of charge, to any person obtaining a copy
 22 |   of this software and associated documentation files (the "Software"), to deal
 23 |   in the Software without restriction, including without limitation the rights
 24 |   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 25 |   copies of the Software, and to permit persons to whom the Software is
 26 |   furnished to do so, subject to the following conditions:
 27 | 
 28 |   The above copyright notice and this permission notice shall be included in
 29 |   all copies or substantial portions of the Software.
 30 | 
 31 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 32 |   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 33 |   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 34 |   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 35 |   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 36 |   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 37 |   THE SOFTWARE.
 38 |  
 39 |   */
 40 | 
 41 |   var this_session, state, current_media, current_rtpmap;
 42 | 
 43 |   var sm = new sdp_session_manager();
 44 | 
 45 |   function sdp_session_manager() {
 46 |     return this;
 47 |   }
 48 | 
 49 |   sm.constructor.prototype.list_rtp_formats = function(i) {
 50 |     return this_session.media[i].rtp_formats;
 51 |   }
 52 | 
 53 |   sm.constructor.prototype.hold = function(i) {
 54 |     var m = this_session.media;
 55 |     if (i != undefined) {
 56 |       if (m[i] != undefined) {
 57 |         m[i].mode = "inactive";
 58 |       } else {
 59 |         console.log("ERROR: invalid media stream - "+i);
 60 |       }
 61 |     } else {
 62 |       if (m.length) {
 63 |         for (var i in m) {
 64 |           m[i].mode = "inactive";
 65 |         }
 66 |       } else {
 67 |         console.log("WARNING: no media streams in this session");
 68 |       }
 69 |     }
 70 |   }
 71 | 
 72 |   sm.constructor.prototype.unhold = function(i, type) {
 73 |     var m = this_session.media;
 74 |     if (i != undefined) {
 75 |       if (m[i] != undefined) {
 76 |         if (type != undefined) {
 77 |           m[i].mode = type; 
 78 |         } else {
 79 |           m[i].mode = "sendrecv";
 80 |         }
 81 |       } else {
 82 |         console.log("ERROR: invalid media stream - "+i);
 83 |       }
 84 |     } else {
 85 |       if (m.length) {
 86 |         for (var i in m) {
 87 |           m[i].mode = "sendrecv";
 88 |         }
 89 |       } else {
 90 |         console.log("WARNING: no media streams in this session");
 91 |       }
 92 |     }
 93 |   }
 94 | 
 95 |   sm.constructor.prototype.reject = function(i) {
 96 |     var m = this_session.media;
 97 |     if (i != undefined) {
 98 |       if (m[i] != undefined) {
 99 |         if (m[i].description != undefined) {
100 |           m[i].description.port = 0;
101 |         } else {
102 |           console.log("ERROR: invalid media stream - "+i+" (no description)");
103 |         }
104 |       } else {
105 |         console.log("ERROR: invalid media stream - "+i);
106 |       }
107 |     } else {
108 |       if (m.length) {
109 |         for (var i in m) {
110 |           if (m[i].description != undefined) {
111 |             m[i].description.port = 0;
112 |           } else {
113 |             console.log("ERROR: invalid media stream - "+i+" (no description)");
114 |           }
115 |         }
116 |       } else {
117 |         console.log("WARNING: no media streams in this session");
118 |       }
119 |     }
120 |   }
121 | 
122 |   sm.constructor.prototype.parse_sdp = function(sdp) {
123 |     this_session = {
124 |       session:{
125 |         other_attributes:{},
126 |       },
127 |       media:[],
128 |     };
129 |     state = "session";
130 |     current_media = undefined;
131 |     current_rtpmap = undefined;
132 | 
133 |     var obj = {};
134 |     var obj_array = [];
135 |     var lines = sdp.split("\r\n");
136 | 
137 |     for (var line in lines) {
138 |       var kv = lines[line].match(/(.)=(.*)/);
139 |       if (kv) {
140 |         if (state == "session") {
141 |           parse_session(kv[1], kv[2]);
142 |         }
143 |         if (state == "media") {
144 |           parse_media(kv[1], kv[2]);
145 |         }
146 |       }
147 |     }
148 | 
149 |     return this_session;
150 |   }
151 | 
152 |   function split_value(value) {
153 |     return value.split(" ");
154 |   }
155 | 
156 |   function split_attribute_value(value) {
157 |     var match = value.match(/(.*?):(.*)/);
158 |     var key = match[1];
159 |     var value = match[2]; 
160 |     return { key:key, value:value };
161 |   }
162 | 
163 |   function parse_session(key, value) {
164 |     if (key == "m") {
165 |       state = "media";
166 |     } else if (key == "v") {
167 |       session_param = true;
168 |       this_session.session.version = value;
169 |     } else if (key == "o") {
170 |       session_param = true;
171 |       var origin = split_value(value);
172 |       if (origin.length == 6) {
173 |         this_session.session.username = origin[0];
174 |         this_session.session.id = origin[1];
175 |         this_session.session.version = origin[2];
176 |         this_session.session.net_type = origin[3];
177 |         this_session.session.address_type = origin[4];
178 |         this_session.session.address = origin[5];
179 |       } else {
180 |         console.log("ERROR: invalid origin line ("+value+")");
181 |       }
182 |     } else if (key == "s") {
183 |       session_param = true;
184 |       this_session.session.subject = value;
185 |     } else if (key == "t") {
186 |       session_param = true;
187 |       var time = split_value(value);
188 |       if (time.length == 2) {
189 |         this_session.session.time = {
190 |           start: time[0],
191 |           stop: time[1],
192 |         };
193 |       } else {
194 |         console.log("ERROR: invalid time line ("+value+")");
195 |       }
196 |     } else if (key == "a") {
197 |       session_param = true;
198 |       //value = value.replace(/:\s+/, ":");
199 |       var obj = split_attribute_value(value);
200 |       if (value.match("BUNDLE")) {
201 |         var values = split_value(obj.value);
202 |         this_session.session["group_bundle"] = values.slice(1,values.length);
203 |       } else if (this_session.session.other_attributes[obj.key] == undefined) {
204 |         this_session.session.other_attributes[obj.key] = obj.value;
205 |       } else {
206 |         console.log("ERROR: invalid session attribute ("+key+":"+value+")");
207 |       }    
208 |     }
209 |   }
210 | 
211 |   function parse_media(key, value) {
212 |     if (key == "m") {
213 |       if (current_media == undefined) {
214 |         current_media = 0;
215 |       } else {
216 |         current_media++;
217 |       }
218 |       if (this_session.media[current_media] == undefined) {
219 |         this_session.media[current_media] = {
220 |           other_attributes: {},
221 |         };
222 |       }
223 |       var media = split_value(value);
224 |       if (media.length > 3) {
225 |         this_session.media[current_media].type = media[0];
226 |         this_session.media[current_media].description = {
227 |           port: media[1],
228 |           protocol: media[2],
229 |           rtp_format_preferences: media.slice(3,media.length),
230 |         };
231 |       } else {
232 |         console.log("ERROR: invalid media line ("+value+")");
233 |       } 
234 |     } else if (key == "c") {
235 |       var connection = split_value(value);
236 |       if (connection.length == 3) {
237 |         this_session.media[current_media].connection = {
238 |           net_type: connection[0],
239 |           address_type: connection[1],
240 |           address: connection[2], 
241 |         };
242 |       } else {
243 |         console.log("ERROR: invalid media line ("+value+")");
244 |       } 
245 |     } else if (key == "a") {
246 |       value = value.replace(/:\s+/, ":");
247 |       if (value.match(/(recvonly|sendrecv|sendonly|inactive)/)) {
248 |         this_session.media[current_media].mode = value;  
249 |       } else {
250 |         var obj = undefined;
251 |         try {
252 |           obj = split_attribute_value(value);
253 |         } catch(e) { };
254 |         if (obj) {
255 |           if (obj.key == "rtpmap") {
256 |             var values = split_value(obj.value);
257 |             var format_id = values[0];
258 |             current_rtpmap = format_id;
259 |             var format_params = values[1].split("/");
260 |             var name = format_params[0];
261 |             var rate = format_params[1];
262 |             if (this_session.media[current_media].rtp_formats == undefined) {
263 |               this_session.media[current_media].rtp_formats = {};
264 |             }
265 |             this_session.media[current_media].rtp_formats[format_id] = {
266 |               name: name,
267 |               rate: rate,
268 |             };
269 |             if (format_params[2] != undefined) {
270 |               this_session.media[current_media].rtp_formats[format_id].encoding_parameter = format_params[2];
271 |             }
272 |           } else if (obj.key == "fmtp") {
273 |             var values = split_value(obj.value);
274 |             this_session.media[current_media].rtp_formats[current_rtpmap].format_parameters = values.splice(1,values.length).join(" "); 
275 |           } else if (obj.key == "candidate") {
276 |             if (this_session.media[current_media].candidates == undefined) {
277 |               this_session.media[current_media].candidates = [];
278 |             }
279 |             this_session.media[current_media].candidates.push(obj.value);
280 |           } else if (obj.key == "ssrc") {
281 |             if (this_session.media[current_media].synchronisation_sources == undefined) {
282 |               this_session.media[current_media].synchronisation_sources = [];
283 |             }
284 |             this_session.media[current_media].synchronisation_sources.push(obj.value);
285 |           } else if (this_session.media[current_media].other_attributes[obj.key] == undefined) {
286 |             this_session.media[current_media].other_attributes[obj.key] = obj.value;
287 |           } else {
288 |             var tmp = this_session.media[current_media].other_attributes[obj.key];
289 |             if (tmp instanceof Array) {
290 |               tmp.push(obj.value);
291 |             } else {
292 |               var tmp2 = [tmp];
293 |               tmp = tmp2;
294 |             }
295 |           }
296 |         } else if (this_session.media[current_media].other_attributes[value] == undefined) {
297 |             this_session.media[current_media].other_attributes[value] = ""; 
298 |         } else {
299 |           var tmp = this_session.media[current_media].other_attributes[value];
300 |           if (tmp instanceof Array) {
301 |             tmp.push("");
302 |           } else {
303 |             var tmp2 = [tmp];
304 |             tmp = tmp2;
305 |           }
306 |         }    
307 |       }
308 |     }
309 |   }
310 | 
311 |   sm.constructor.prototype.render_sdp = function() {
312 |     var sdp = "";
313 |     sdp += render_session(this_session.session);
314 |     sdp += render_media(this_session.media);
315 |     return sdp;
316 |   }
317 | 
318 |   function render_line(key, value) {
319 |     return key+"="+value+"\r\n";
320 |   }
321 | 
322 |   function render_attribute(key, value) {
323 |     if (value == undefined || value == "") {
324 |       return key;
325 |     } else {
326 |       return key+":"+value;
327 |     }
328 |   }
329 | 
330 |   function render_session(obj) {
331 |     var sdp = "v=0\r\n";
332 |     if (obj.username != undefined 
333 |         && obj.id != undefined 
334 |         && obj.version != undefined 
335 |         && obj.net_type != undefined 
336 |         && obj.address_type != undefined 
337 |         && obj.address != undefined) {
338 |       var o = [obj.username, obj.id, obj.version, obj.net_type, obj.address_type, obj.address].join(" ");
339 |       sdp += render_line("o", o);
340 |     }
341 |     if (obj.subject != undefined) {
342 |       sdp += render_line("s", obj.subject);
343 |     }
344 |     if (obj.time != undefined && obj.time.start != undefined && obj.time.stop != undefined) {
345 |       sdp += render_line("t", obj.time.start+" "+obj.time.stop);
346 |     }
347 |     if (obj.group_bundle != undefined) {
348 |       sdp += render_line("a","group:BUNDLE "+obj.group_bundle.join(" ")); 
349 |     }
350 |     if (Object.keys(obj.other_attributes).length) {
351 |       for (var key in obj.other_attributes) {
352 |         sdp += render_line("a", render_attribute(key, obj.other_attributes[key]));
353 |       }
354 |     }
355 |     return sdp; 
356 |   }
357 | 
358 |   function render_media(obj) {
359 |     var sdp = "";
360 |     for (var media in obj) {
361 |       var m = obj[media];
362 |       if (m.type != undefined
363 |           && m.description.port != undefined
364 |           && m.description.protocol != undefined
365 |           && m.description.rtp_format_preferences.length) {
366 |         var d = m.description;
367 |         var line = [m.type, d.port, d.protocol].join(" ")+" "+d.rtp_format_preferences.join(" ");
368 |         sdp += render_line("m", line);
369 |       }
370 |       if (m.description.port != 0) {
371 |         if (m.connection != undefined
372 |             && m.connection.net_type != undefined
373 |             && m.connection.address_type != undefined
374 |             && m.connection.address != undefined) {
375 |           var c = m.connection;
376 |           sdp += render_line("c", [c.net_type, c.address_type, c.address].join(" "));
377 |         }
378 |         if (m.mode != undefined) {
379 |           sdp += render_line("a", render_attribute(m.mode)); 
380 |         }
381 |         if (m.rtp_formats != undefined) {
382 |           for (var fid in m.rtp_formats) {
383 |             var f = m.rtp_formats[fid];
384 |             var line = "rtpmap:"+fid+" "+f.name+"/"+f.rate;
385 |             if (f.encoding_parameters != undefined) {
386 |               line += "/"+f.encoding_parameters;
387 |             }
388 |             sdp += render_line("a", line);
389 |             if (f.format_parameters != undefined) {
390 |               sdp += render_line("a", "fmtp:"+fid+" "+f.format_parameters);
391 |             }
392 |           }
393 |         }
394 |         if (m.other_attributes != undefined) {
395 |           if (Object.keys(m.other_attributes).length) {
396 |             for (var key in m.other_attributes) {
397 |               sdp += render_line("a", render_attribute(key, m.other_attributes[key]));
398 |             }
399 |           }
400 |         }
401 |         if (m.candidates != undefined) {
402 |           if (Object.keys(m.candidates).length) {
403 |             for (var id in m.candidates) {
404 |               sdp += render_line("a", "candidate:"+m.candidates[id]); 
405 |             }
406 |           }
407 |         }
408 |         if (m.synchronisation_sources != undefined) {
409 |           if (Object.keys(m.synchronisation_sources).length) {
410 |             for (var id in m.synchronisation_sources) {
411 |               sdp += render_line("a", "ssrc:"+m.synchronisation_sources[id]); 
412 |             }
413 |           }
414 |         }
415 |       }
416 |     }
417 |     return sdp;
418 |   }
419 |   return sm;
420 | }
421 | 


--------------------------------------------------------------------------------
/video_call_with_chat_and_file_sharing.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 | <script>
  5 | /*
  6 | 
  7 |   webrtc_polyfill.js by Rob Manson (buildAR.com)
  8 |   NOTE: Based on adapter.js by Adam Barth
  9 |         See http://www.webrtc.org/interop for more info
 10 | 
 11 |   The MIT License
 12 | 
 13 |   Copyright (c) 2013 Rob Manson, http://buildAR.com. All rights reserved.
 14 | 
 15 |   Permission is hereby granted, free of charge, to any person obtaining a copy
 16 |   of this software and associated documentation files (the "Software"), to deal
 17 |   in the Software without restriction, including without limitation the rights
 18 |   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 19 |   copies of the Software, and to permit persons to whom the Software is
 20 |   furnished to do so, subject to the following conditions:
 21 | 
 22 |   The above copyright notice and this permission notice shall be included in
 23 |   all copies or substantial portions of the Software.
 24 | 
 25 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 26 |   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 27 |   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 28 |   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 29 |   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 30 |   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 31 |   THE SOFTWARE.
 32 | 
 33 | */
 34 | 
 35 | var webrtc_capable = true;
 36 | var rtc_peer_connection = null;
 37 | var rtc_session_description = null;
 38 | var rtc_ice_candidate = null
 39 | var get_user_media = null;
 40 | var connect_stream_to_src = null;
 41 | var stun_server = "stun.l.google.com:19302";
 42 | 
 43 | if (navigator.getUserMedia) { // WebRTC 1.0 standard compliant browser
 44 |   rtc_peer_connection = RTCPeerConnection;
 45 |   rtc_session_description = RTCSessionDescription;
 46 |   rtc_ice_candidate = RTCIceCandidate;
 47 |   get_user_media = navigator.getUserMedia.bind(navigator);
 48 |   connect_stream_to_src = function(media_stream, media_element) {
 49 |     // https://www.w3.org/Bugs/Public/show_bug.cgi?id=21606
 50 |     media_element.srcObject = media_stream;
 51 |     media_element.play();
 52 |   };
 53 | } else if (navigator.mozGetUserMedia) { // early firefox webrtc implementation
 54 |   rtc_peer_connection = mozRTCPeerConnection;
 55 |   rtc_session_description = mozRTCSessionDescription;
 56 |   rtc_ice_candidate = mozRTCIceCandidate;
 57 |   get_user_media = navigator.mozGetUserMedia.bind(navigator);
 58 |   connect_stream_to_src = function(media_stream, media_element) {
 59 |     media_element.mozSrcObject = media_stream;
 60 |     media_element.play();
 61 |   };
 62 |   stun_server = "23.21.150.121"; // Mozilla's STUN server
 63 | } else if (navigator.webkitGetUserMedia) { // early webkit webrtc implementation
 64 |   rtc_peer_connection = webkitRTCPeerConnection;
 65 |   rtc_session_description = RTCSessionDescription;
 66 |   rtc_ice_candidate = RTCIceCandidate;
 67 |   get_user_media = navigator.webkitGetUserMedia.bind(navigator);
 68 |   connect_stream_to_src = function(media_stream, media_element) {
 69 |     media_element.src = webkitURL.createObjectURL(media_stream);
 70 |     media_element.play();
 71 |   };
 72 | } else {
 73 |   alert("This browser does not support WebRTC - visit WebRTC.org for more info");
 74 |   webrtc_capable = false;
 75 | }
 76 | </script>
 77 | <script>
 78 | /*
 79 | 
 80 |   video_call_with_chat_and_file_sharing.js by Rob Manson (buildAR.com)
 81 | 
 82 |   The MIT License
 83 | 
 84 |   Copyright (c) 2013 Rob Manson, http://buildAR.com. All rights reserved.
 85 | 
 86 |   Permission is hereby granted, free of charge, to any person obtaining a copy
 87 |   of this software and associated documentation files (the "Software"), to deal
 88 |   in the Software without restriction, including without limitation the rights
 89 |   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 90 |   copies of the Software, and to permit persons to whom the Software is
 91 |   furnished to do so, subject to the following conditions:
 92 | 
 93 |   The above copyright notice and this permission notice shall be included in
 94 |   all copies or substantial portions of the Software.
 95 | 
 96 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 97 |   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 98 |   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 99 |   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
100 |   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
101 |   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
102 |   THE SOFTWARE.
103 | 
104 | */
105 | 
106 | var call_token; // unique token for this call
107 | var signaling_server; // signaling server for this call
108 | var peer_connection; // peer connection object
109 | var file_store = []; // shared file storage
110 | var local_stream_added = false;
111 | 
112 | function start() {
113 |   // create the WebRTC peer connection object
114 |   peer_connection = new rtc_peer_connection({ // RTCPeerConnection configuration 
115 |     "iceServers": [ // information about ice servers
116 |       { "url": "stun:"+stun_server }, // stun server info
117 |     ]
118 |   });
119 | 
120 |   // generic handler that sends any ice candidates to the other peer
121 |   peer_connection.onicecandidate = function (ice_event) {
122 |     console.log("new ice candidate");
123 |     if (ice_event.candidate) {
124 |       signaling_server.send(
125 |         JSON.stringify({
126 |           token:call_token,
127 |           type: "new_ice_candidate",
128 |           candidate: ice_event.candidate ,
129 |         })
130 |       );
131 |     }
132 |   };
133 | 
134 |   // display remote video streams when they arrive using remote_video <video> MediaElement
135 |   peer_connection.onaddstream = function (event) {
136 |     console.log("new remote stream added");
137 |     connect_stream_to_src(event.stream, document.getElementById("remote_video"));
138 |     // hide placeholder and show remote video
139 |     document.getElementById("loading_state").style.display = "none";
140 |     console.log("updating UI to open_call_state");
141 |     document.getElementById("open_call_state").style.display = "block";
142 |   };
143 | 
144 |   // setup stream from the local camera 
145 |   setup_video();
146 | 
147 |   // setup generic connection to the signaling server using the WebSocket API
148 |   console.log("setting up connection to signaling server");
149 |   signaling_server = new WebSocket("ws://localhost:1234");
150 | 
151 |   if (document.location.hash === "" || document.location.hash === undefined) { // you are the Caller
152 |     console.log("you are the Caller");
153 | 
154 |     // create the unique token for this call 
155 |     var token = Date.now()+"-"+Math.round(Math.random()*10000);
156 |     call_token = "#"+token;
157 | 
158 |     // set location.hash to the unique token for this call
159 |     document.location.hash = token;
160 | 
161 |     signaling_server.onopen = function() {
162 |       // setup caller signal handler
163 |       signaling_server.onmessage = caller_signal_handler;
164 | 
165 |       // tell the signaling server you have joined the call 
166 |       console.log("sending 'join' signal for call token:"+call_token);
167 |       signaling_server.send(
168 |         JSON.stringify({ 
169 |           token:call_token,
170 |           type:"join",
171 |         })
172 |       );
173 |     }
174 | 
175 |     document.title = "You are the Caller";
176 |     console.log("updating UI to loading_state");
177 |     document.getElementById("loading_state").innerHTML = "Ready for a call...ask your friend to visit:<br/><br/>"+document.location;
178 | 
179 |   } else { // you have a hash fragment so you must be the Callee 
180 |     console.log("you are the Callee");
181 |     
182 |     // get the unique token for this call from location.hash
183 |     call_token = document.location.hash;
184 | 
185 |     signaling_server.onopen = function() {
186 |       // setup caller signal handler
187 |       signaling_server.onmessage = callee_signal_handler;
188 | 
189 |       // tell the signaling server you have joined the call 
190 |       console.log("sending 'join' signal for call token:"+call_token);
191 |       signaling_server.send(
192 |         JSON.stringify({ 
193 |           token:call_token,
194 |           type:"join",
195 |         })
196 |       );
197 | 
198 |       // let the caller know you have arrived so they can start the call
199 |       console.log("sending 'callee_arrived' signal for call token:"+call_token);
200 |       signaling_server.send(
201 |         JSON.stringify({ 
202 |           token:call_token,
203 |           type:"callee_arrived",
204 |         })
205 |       );
206 |     }
207 | 
208 |     document.title = "You are the Callee";
209 |     console.log("updating UI to loading_state");
210 |     document.getElementById("loading_state").innerHTML = "One moment please...connecting your call...";
211 |   }
212 | 
213 |   // setup message bar handlers
214 |   document.getElementById("message_input").onkeydown = send_chat_message;
215 |   document.getElementById("message_input").onfocus = function() { this.value = ""; }
216 | 
217 |   // setup file sharing 
218 |   if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
219 |     document.getElementById("file_sharing").style.display = "none";
220 |     alert("This browser does not support File Sharing");
221 |   } else {
222 |     document.getElementById("file_add").onclick = click_file_input;
223 |     document.getElementById("file_input").addEventListener("change", file_input, false);
224 |     document.getElementById("open_call_state").addEventListener("dragover", drag_over, false);
225 |     document.getElementById("open_call_state").addEventListener("drop", file_input, false);
226 |   }
227 | }
228 | 
229 | /* functions used above are defined below */
230 | 
231 | // handler to process new descriptions
232 | function new_description_created(description) {
233 |   peer_connection.setLocalDescription(
234 |     description, 
235 |     function () {
236 |       signaling_server.send(
237 |         JSON.stringify({
238 |           token:call_token,
239 |           type:"new_description",
240 |           sdp:description 
241 |         })
242 |       );
243 |     }, 
244 |     log_error
245 |   );
246 | }
247 | 
248 | // handle signals as a caller
249 | function caller_signal_handler(event) {
250 |   var signal = JSON.parse(event.data);
251 |   console.log(signal.type);
252 |   if (signal.type === "callee_arrived") {
253 |     create_offer();
254 |   } else if (signal.type === "new_ice_candidate") {
255 |     peer_connection.addIceCandidate(
256 |       new rtc_ice_candidate(signal.candidate)
257 |     );
258 |   } else if (signal.type === "new_description") {
259 |     peer_connection.setRemoteDescription(
260 |       new rtc_session_description(signal.sdp), 
261 |       function () {
262 |         if (peer_connection.remoteDescription.type == "answer") {
263 |           // extend with your own custom answer handling here
264 |         }
265 |       },
266 |       log_error
267 |     );
268 |   } else if (signal.type === "new_chat_message") {
269 |     add_chat_message(signal);
270 |   } else if (signal.type === "new_file_thumbnail_part") {
271 |     store_file_part("thumbnail", signal.id, signal.part, signal.length, signal.data);
272 |     if (file_store[signal.id].thumbnail.parts.length == signal.length) {
273 |       document.getElementById("file_list").innerHTML = get_file_div(signal.id)+document.getElementById("file_list").innerHTML;
274 |       document.getElementById("file-img-"+signal.id).src = file_store[signal.id].thumbnail.parts.join(""); 
275 |     }
276 |   } else if (signal.type === "new_file_part") {
277 |     store_file_part("file", signal.id, signal.part, signal.length, signal.data);
278 |     update_file_progress(signal.id, file_store[signal.id].file.parts.length, signal.length);
279 |   } else {
280 |     // extend with your own signal types here
281 |   }
282 | }
283 | function create_offer() {
284 |   if (local_stream_added) {
285 |     console.log("creating offer");
286 |     peer_connection.createOffer(
287 |       new_description_created, 
288 |       log_error
289 |     );
290 |   } else {
291 |     console.log("local stream has not been added yet - delaying creating offer");
292 |     setTimeout(function() {
293 |       create_offer();
294 |     }, 1000);
295 |   }
296 | }
297 | 
298 | // handle signals as a callee
299 | function callee_signal_handler(event) {
300 |   var signal = JSON.parse(event.data);
301 |   console.log(signal.type);
302 |   if (signal.type === "new_ice_candidate") {
303 |     peer_connection.addIceCandidate(
304 |       new rtc_ice_candidate(signal.candidate)
305 |     );
306 |   } else if (signal.type === "new_description") {
307 |     peer_connection.setRemoteDescription(
308 |       new rtc_session_description(signal.sdp), 
309 |       function () {
310 |         if (peer_connection.remoteDescription.type == "offer") {
311 |           create_answer();
312 |         }
313 |       },
314 |       log_error
315 |     );
316 |   } else if (signal.type === "new_chat_message") {
317 |     add_chat_message(signal);
318 |   } else if (signal.type === "new_file_thumbnail_part") {
319 |     store_file_part("thumbnail", signal.id, signal.part, signal.length, signal.data);
320 |     if (file_store[signal.id].thumbnail.parts.length == signal.length) {
321 |       document.getElementById("file_list").innerHTML = get_file_div(signal.id)+document.getElementById("file_list").innerHTML;
322 |       document.getElementById("file-img-"+signal.id).src = file_store[signal.id].thumbnail.parts.join(""); 
323 |     }
324 |   } else if (signal.type === "new_file_part") {
325 |     store_file_part("file", signal.id, signal.part, signal.length, signal.data);
326 |     update_file_progress(signal.id, file_store[signal.id].file.parts.length, signal.length);
327 |   } else {
328 |     // extend with your own signal types here
329 |   }
330 | }
331 | function create_answer() {
332 |   if (local_stream_added) {
333 |     console.log("creating answer");
334 |     peer_connection.createAnswer(new_description_created, log_error);
335 |   } else {
336 |     console.log("local stream has not been added yet - delaying creating answer");
337 |     setTimeout(function() {
338 |       create_answer();
339 |     }, 1000);
340 |   }
341 | }
342 | 
343 | // add new chat message to messages list
344 | function add_chat_message(signal) {
345 |   var messages = document.getElementById("messages");
346 |   var user = signal.user || "them"; 
347 |   messages.innerHTML = user+": "+signal.message+"<br/>\n"+messages.innerHTML;
348 | }
349 | 
350 | // send new chat message to the other browser
351 | function send_chat_message(e) {
352 |   if (e.keyCode == 13) {
353 |     var new_message = this.value;
354 |     this.value = ""; 
355 |     signaling_server.send(
356 |       JSON.stringify({
357 |         token:call_token,
358 |         type: "new_chat_message",
359 |         message: new_message 
360 |       })
361 |     );
362 |     add_chat_message({ user: "you", message: new_message }); 
363 |   }
364 | }
365 | 
366 | // setup stream from the local camera 
367 | function setup_video() {
368 |   console.log("setting up local video stream");
369 |   get_user_media(
370 |     { 
371 |       "audio": true, // request access to local microphone
372 |       "video": true  // request access to local camera
373 |     }, 
374 |     function (local_stream) { // success callback
375 |       // display preview from the local camera & microphone using local <video> MediaElement
376 |       console.log("new local stream added");
377 |       connect_stream_to_src(local_stream, document.getElementById("local_video"));
378 |       // mute local video to prevent feedback
379 |       document.getElementById("local_video").muted = true;
380 |       // add local camera stream to peer_connection ready to be sent to the remote peer
381 |       console.log("local stream added to peer_connection to send to remote peer");
382 |       peer_connection.addStream(local_stream);
383 |       local_stream_added = true;
384 |     },
385 |     log_error
386 |   );
387 | }
388 | 
389 | // file sharing html template 
390 | function get_file_div(id) {
391 |   return '<div id="file-'+id+'" class="file"><img class="file_img" id="file-img-'+id+'" onclick="display_file(event)" src="images/new_file_arriving.png" /><div id="file-progress-'+id+'" class="file_progress"></div></div>';
392 | }
393 | 
394 | // initiate manual file selection
395 | function click_file_input(event) {
396 |   document.getElementById('file_input').click();
397 | }
398 | 
399 | // prevent window from reloading when file dragged into it
400 | function drag_over(event) {
401 |   event.stopPropagation();
402 |   event.preventDefault();
403 | }
404 | 
405 | // handle manual file selection or drop event
406 | function file_input(event) {
407 |   event.stopPropagation();
408 |   event.preventDefault();
409 |   var files = undefined;
410 |   if (event.dataTransfer && event.dataTransfer.files !== undefined) {
411 |     files = event.dataTransfer.files;
412 |   } else if (event.target && event.target.files !== undefined) {
413 |     files = event.target.files;
414 |   }
415 |   if (files.length > 1) {
416 |     alert("Please only select one file at a time");
417 |   } else if (!files[0].type.match('image.*')) {
418 |     alert("This demo only supports sharing image files");
419 |   } else if (files.length == 1) {
420 |     var kb = (files[0].size/1024).toFixed(1);
421 |     var new_message = "Sending file...<br><strong>"+files[0].name+"</strong> ("+kb+"KB)";
422 |     signaling_server.send(
423 |       JSON.stringify({
424 |         token:call_token,
425 |         type: "new_chat_message",
426 |         message: new_message 
427 |       })
428 |     );
429 |     add_chat_message({ user: "you", message: new_message });
430 |     document.getElementById("file_list").innerHTML = get_file_div(file_store.length)+document.getElementById("file_list").innerHTML;
431 |     var reader = new FileReader();
432 |     reader.onload = (function(file, id) {
433 |       return function(event) {
434 |         send_file(file.name, id, event.target.result); 
435 |       }
436 |     })(files[0], file_store.length);
437 |     reader.readAsDataURL(files[0]);
438 |   }
439 | }
440 | 
441 | // send selected file
442 | function send_file(name, file_id, data) {
443 |   var default_width = 160;
444 |   var default_height = 120;
445 |   var img = document.getElementById("file_img_src");
446 |   img.onload = function() {
447 |     var image_width = this.width;
448 |     var target_width = default_width;
449 |     var image_height = this.height;
450 |     var target_height = default_height;
451 |     var top = 0;
452 |     var left = 0;
453 |     if (image_width > image_height) {
454 |       var ratio = target_width/image_width;
455 |       target_height = image_height*ratio;
456 |       top = (default_height-target_height)/2;
457 |     } else if (image_height > image_width) {
458 |       var ratio = target_height/image_height;
459 |       target_width = image_width*ratio;
460 |       left = (default_width-target_width)/2;
461 |     } else {
462 |       left = (default_width-default_height)/2;
463 |       target_width = target_height;
464 |     }
465 |     var canvas = document.getElementById("file_thumbnail_canvas");
466 |     canvas.width = default_width;
467 |     canvas.height = default_height;
468 |     var cc = canvas.getContext("2d");
469 |     cc.clearRect(0,0,default_width,default_height);
470 |     cc.drawImage(img, left, top, target_width, target_height);
471 |     var thumbnail_data = canvas.toDataURL("image/png");
472 |     document.getElementById("file-img-"+file_id).src = thumbnail_data; 
473 |     send_file_parts("thumbnail", file_id, thumbnail_data);
474 |     send_file_parts("file", file_id, data);
475 |   }
476 |   img.src = data;  
477 | }
478 | 
479 | // break file into parts and send each of them separately 
480 | function send_file_parts(type, id, data) {
481 |   var message_type = "new_file_part";
482 |   if (type == "thumbnail") {
483 |     message_type = "new_file_thumbnail_part";
484 |   }
485 |   var slice_size = 1024;
486 |   var parts = data.length/slice_size;
487 |   if (parts % 1 > 0) {
488 |     parts = Math.round(parts)+1;
489 |   }
490 |   for (var i = 0; i < parts; i++) { 
491 |     var from = i*slice_size;
492 |     var to = from+slice_size;
493 |     var data_slice = data.slice(from, to);
494 |     store_file_part(type, id, i, parts, data_slice);
495 |     signaling_server.send(
496 |       JSON.stringify({
497 |         token:call_token,
498 |         type: message_type, 
499 |         id: id,
500 |         part: i,
501 |         length: parts,
502 |         data: data_slice 
503 |       })
504 |     );
505 |   }
506 | }
507 | 
508 | // store individual file parts in the local file store
509 | function store_file_part(type, id, part, length, data) {
510 |   if (file_store[id] === undefined) {
511 |     file_store[id] = {};
512 |   }
513 |   if (file_store[id][type] === undefined) {
514 |     file_store[id][type] = {
515 |       parts: []
516 |     };
517 |   }
518 |   if (file_store[id][type].length === undefined) {
519 |     file_store[id][type].length = length;
520 |   }
521 |   file_store[id][type].parts[part] = data;
522 | }
523 | 
524 | // show the progress of a file transfer
525 | function update_file_progress(id, parts, length) {
526 |   var percentage = Math.round((parts/length)*100);
527 |   if (percentage < 100) {
528 |     document.getElementById("file-progress-"+id).innerHTML = percentage+"%";
529 |     document.getElementById("file-img-"+id).style.opacity = 0.25;
530 |   } else {
531 |     document.getElementById("file-progress-"+id).innerHTML = "";
532 |     document.getElementById("file-img-"+id).style.opacity = 1;
533 |   }
534 | }
535 | 
536 | // show the full file
537 | function display_file(event) {
538 |   var match = event.target.id.match("file-img-(.*)");
539 |   var file = file_store[match[1]].file;
540 |   if (file.parts.length < file.length) {
541 |     alert("Please wait - file still transfering");
542 |   } else { 
543 |     window.open(file.parts.join(""));
544 |   }
545 | }
546 | 
547 | // generic error handler
548 | function log_error(error) {
549 |   console.log(error);
550 | }
551 | 
552 | </script>
553 | <style>
554 | html, body {
555 |   padding: 0px;
556 |   margin: 0px;
557 |   font-family: "Arial","Helvetica",sans-serif;
558 | }
559 | #loading_state {
560 |   position: absolute;
561 |   top: 45%;
562 |   left: 0px;
563 |   width: 100%;
564 |   font-size: 20px;
565 |   text-align: center;
566 | }
567 | #open_call_state {
568 |   display: none;
569 | }
570 | #local_video {
571 |   position: absolute;
572 |   top: 10px;
573 |   left: 10px;
574 |   width: 160px;
575 |   height: 120px;
576 |   background: #333333;
577 | }
578 | #remote_video {
579 |   position: absolute;
580 |   top: 0px;
581 |   left: 0px;
582 |   width: 1024px;
583 |   height: 768px;
584 |   background: #999999;
585 | }
586 | #chat {
587 |   position: absolute;
588 |   top: 0px;
589 |   left: 1024px;
590 |   height: 768px;
591 |   width: 300px;
592 |   background: #CCCCCC;
593 | }
594 | #messages {
595 |   overflow: auto;
596 |   position: absolute;
597 |   top: 20px;
598 |   left: 0px;
599 |   height: 733px;
600 |   width: 295px;
601 |   padding-top: 15px;
602 |   padding-left: 5px;
603 |   font-size: 14px;
604 | }
605 | #message_input {
606 |   position: absolute;
607 |   top: 5px;
608 |   left: 5px;
609 |   height: 20px;
610 |   width: 280px;
611 |   padding-left: 5px;
612 |   background: #FFFFFF;
613 | }
614 | #file_sharing {
615 |   position: absolute;
616 |   top: 140px;
617 |   left: 10px;
618 |   height: 628px;
619 |   width: 160px;
620 | }
621 | #file_input {
622 |   display: none;
623 | }
624 | #file_add {
625 |   position: absolute;
626 |   padding: 0px;
627 |   height: 120px;
628 |   width: 160px;
629 |   text-align: center;
630 | }
631 | #file_list {
632 |   overflow: auto;
633 |   position: absolute;
634 |   padding: 0px;
635 |   top: 130px;
636 |   height: 488px;
637 |   width: 180px;
638 | }
639 | .file {
640 |   width: 160px;
641 |   height: 120px;
642 |   padding: 0px;
643 |   padding-bottom: 10px;
644 |   margin: 0px;
645 | }
646 | .file_img {
647 |   width: 160px;
648 |   height: 120px;
649 | }
650 | .file_progress {
651 |   color: #333333;
652 |   font-family: "Helvetica","Arial",sans-serif;
653 |   font-size: 30px;
654 |   font-weight: bold;
655 |   position: relative;
656 |   text-align: center;
657 |   top: -80px;
658 |   width: 160px;
659 | }
660 | #file_img_src {
661 |   display: none;
662 | }
663 | #file_thumbnail_canvas {
664 |   display: none;
665 |   width: 160px;
666 |   height: 120px;
667 | }
668 | </style>
669 | </head>
670 | <body onload="start()">
671 |   <div id="loading_state">
672 |     loading...
673 |   </div>
674 |   <div id="open_call_state">
675 |     <video id="remote_video"></video>
676 |     <video id="local_video"></video>
677 |     <div id="chat">
678 |       <div id="messages"></div>
679 |       <input type="text" id="message_input" value="Type here then hit enter..."></input>
680 |     </div>
681 |     <div id="file_sharing">
682 |       <input type="file" id="file_input"></input>
683 |       <div id="file_add">
684 |         <img src="images/share_new_file.png" />
685 |       </div>
686 |       <div id="file_list">
687 |       </div>
688 |       <img id="file_img_src" />
689 |       <canvas id="file_thumbnail_canvas"></canvas>
690 |     </div>
691 |   </div>
692 | </body>
693 | </html>
694 | 


--------------------------------------------------------------------------------
/webrtc_signal_server.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 |   webrtc_signal_server.js by Rob Manson (buildAR.com)
  4 | 
  5 |   The MIT License
  6 | 
  7 |   Copyright (c) 2013 Rob Manson, http://buildAR.com. All rights reserved.
  8 | 
  9 |   Permission is hereby granted, free of charge, to any person obtaining a copy
 10 |   of this software and associated documentation files (the "Software"), to deal
 11 |   in the Software without restriction, including without limitation the rights
 12 |   to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 13 |   copies of the Software, and to permit persons to whom the Software is
 14 |   furnished to do so, subject to the following conditions:
 15 | 
 16 |   The above copyright notice and this permission notice shall be included in
 17 |   all copies or substantial portions of the Software.
 18 | 
 19 |   THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 20 |   IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 21 |   FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 22 |   AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 23 |   LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 24 |   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 25 |   THE SOFTWARE.
 26 | 
 27 | */
 28 | 
 29 | // useful libs
 30 | var http = require("http");
 31 | var fs = require("fs");
 32 | var websocket = require("websocket").server;
 33 | 
 34 | // general variables
 35 | var port = 1234;
 36 | var webrtc_clients = [];
 37 | var webrtc_discussions = {};
 38 | 
 39 | // web server functions
 40 | var http_server = http.createServer(function(request, response) {
 41 |   var matches = undefined;
 42 |   if (matches = request.url.match("^/images/(.*)")) {
 43 |     var path = process.cwd()+"/images/"+matches[1];
 44 |     fs.readFile(path, function(error, data) {
 45 |       if (error) {
 46 |         log_error(error);
 47 |       } else {
 48 |         response.end(data);
 49 |       }
 50 |     });
 51 |   } else {
 52 |     response.end(page);
 53 |   }
 54 | });
 55 | http_server.listen(port, function() {
 56 |   log_comment("server listening (port "+port+")");
 57 | });
 58 | var page = undefined;
 59 | fs.readFile("video_call_with_chat_and_file_sharing.html", function(error, data) {
 60 |   if (error) {
 61 |     log_error(error);
 62 |   } else {
 63 |     page = data;
 64 |   }
 65 | });
 66 | 
 67 | // web socket functions
 68 | var websocket_server = new websocket({
 69 |   httpServer: http_server
 70 | });
 71 | websocket_server.on("request", function(request) {
 72 |   log_comment("new request ("+request.origin+")");
 73 | 
 74 |   var connection = request.accept(null, request.origin);
 75 |   log_comment("new connection ("+connection.remoteAddress+")");
 76 | 
 77 |   webrtc_clients.push(connection);
 78 |   connection.id = webrtc_clients.length-1;
 79 |   
 80 |   connection.on("message", function(message) {
 81 |     if (message.type === "utf8") {
 82 |       log_comment("got message "+message.utf8Data);
 83 | 
 84 |       var signal = undefined;
 85 |       try { signal = JSON.parse(message.utf8Data); } catch(e) { };
 86 |       if (signal) {
 87 |         if (signal.type === "join" && signal.token !== undefined) {
 88 |           try {
 89 |             if (webrtc_discussions[signal.token] === undefined) {
 90 |               webrtc_discussions[signal.token] = {};
 91 |             }
 92 |           } catch(e) { };
 93 |           try {
 94 |             webrtc_discussions[signal.token][connection.id] = true;
 95 |           } catch(e) { };
 96 |         } else if (signal.token !== undefined) {
 97 |           try {
 98 |             Object.keys(webrtc_discussions[signal.token]).forEach(function(id) {
 99 |               if (id != connection.id) {
100 |                 webrtc_clients[id].send(message.utf8Data, log_error);
101 |               }
102 |             });
103 |           } catch(e) { };
104 |         } else {
105 |           log_comment("invalid signal: "+message.utf8Data);
106 |         }
107 |       } else {
108 |         log_comment("invalid signal: "+message.utf8Data);
109 |       }
110 |     }
111 |   });
112 |   
113 |   connection.on("close", function(reason_code, description) {
114 |     log_comment("connection closed ("+this.remoteAddress+" - "+reason_code+" - "+description+")");
115 |     Object.keys(webrtc_discussions).forEach(function(token) {
116 |       Object.keys(webrtc_discussions[token]).forEach(function(id) {
117 |         if (id === connection.id) {
118 |           delete webrtc_discussions[token][id];
119 |         }
120 |       });
121 |     });
122 |   });
123 | });
124 | 
125 | // utility functions
126 | function log_error(error) {
127 |   if (error !== "Connection closed" && error !== undefined) {
128 |     log_comment("ERROR: "+error);
129 |   }
130 | }
131 | function log_comment(comment) {
132 |   console.log((new Date())+" "+comment);
133 | }
134 | 


--------------------------------------------------------------------------------