forked from miguelpdl/WebRTC-codelab
-
Notifications
You must be signed in to change notification settings - Fork 0
/
objectives.html
78 lines (64 loc) · 4.08 KB
/
objectives.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title> Set up a signaling server and exchange messages </title>
<link rel="stylesheet" href="./style/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./style/clarity.css" type="text/css">
<link rel="stylesheet" href="./style/highlight.css">
<script src="./style/highlight.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<div class="container-fluid">
<!----------------------------------------------------------------------------------------->
<style> body { padding-top: 60px; } </style> <div class="navbar navbar-fixed-top">
<p id="title">Set up a signaling server and exchange messages </p>
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="objectives.html">Objectives</a></li>
<li><a href="step01.html">01</a></li>
<li><a href="step02.html">02</a></li>
<li><a href="step03.html">03</a></li>
<li><a href="step04.html">04</a></li>
<li><a href="step05.html">05</a></li>
<li><a href="step06.html">06</a></li>
</ul>
<p class="navbar-text pull-right"> <a href="http://miguelpdl.github.io/WebRTC-codelab/"> WebRTC Code Lab</a> </p>
</div>
</div>
<!----------------------------------------------------------------------------------------->
<h2 id="set-up-a-signaling-server-and-exchange-messages">Set up a signaling server and exchange messages</h2>
<p>RTCPeerConnection instances need to exchange metadata in order to set up and maintain a WebRTC 'call':</p>
<ul>
<li>Candidate (network) information.</li>
<li><em>Offer</em> and <em>answer</em> messages providing information about media such as resolution and codecs.</li>
</ul>
<p>In other words, an exchange of metadata is required before peer-to-peer audio, video or data streaming can take place. This process is called <em>signaling</em>.</p>
<p>In the examples already completed, the 'sender' and 'receiver' RTCPeerConnection objects are on the same page, so signaling is simply a matter of passing objects between methods.</p>
<p>In a real world application, the sender and receiver RTCPeerConnections are not on the same page, and we need a way for them to communicate metadata.</p>
<p>For this, we use a signaling server: a server that can exchange messages between a WebRTC app (client) running in one browser and a client in another browser. The actual messages are stringified JavaScript objects.</p>
<p><strong>To reiterate: metadata exchange between WebRTC clients (via a signaling server) is required for RTCPeerConnection to to do audio, video and data streaming (peer to peer).</strong></p>
<p>In this session we'll build a simple Node.js signaling server, using the socket.io Node module and JavaScript library for messaging.</p>
<p>Experience of <a href="http://nodejs.org/">Node.js</a> and <a href="http://socket.io/">socket.io</a> will be useful, but not crucial -- the messaging components are very simple.</p>
<p>In this example, we will build</p>
<ul>
<li>build the server (the Node app) called <em>server.js</em></li>
<li>create the client web page called <em>index.html</em>.</li>
<li>create the client web app called <em>main.js</em>.</li>
<li>view the client page from the url location <em>localhost:2013</em>.</li>
<li>Carry out some bonus tasks for the session.</li>
</ul>
<!----------------------------------------------------------------------------------------->
<div id="footer">
<p id="footertext">
Prepared by Miguel Ponce de Leon ([email protected]). Except where otherwise noted, this content is licensed under a
<a class="externalLink" href="http://creativecommons.org/licenses/by-nc/3.0/"
title="External link to http://creativecommons.org/licenses/by-nc/3.0/"
target="_blank">Creative Commons Attribution-NonCommercial 3.0 License
</a>
</p>
</div>
</div>
</body>
</html>