endpointjs
Version:
Endpoint.js enables modules within a web application to discover and use each other, whether that be on the same web page, other browser windows and tabs, iframes, servers and web workers in a reactive way by providing robust discovery, execution and stre
100 lines (71 loc) • 3.68 kB
HTML
<html>
<head>
<title>Endpoint.js WebRTC Chat</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<script type="text/javascript">
window.endpointLogLevel = 'trace';
</script>
<script src="https://cdn.socket.io/socket.io-1.3.7.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.12/HTMLImports.min.js" type="text/javascript"></script>
<script src="../build/endpoint.demo.js" type="text/javascript"></script>
<script src="../build/endpoint-webrtc.demo.js" type="text/javascript"></script>
<link rel="import" href="webrtc-chat-api/webrtc-chat-api.html">
<p style="padding: 10px;">
<b>Open another window to the same URL to create the chat window.</b> <br><br>
This example will create a WebRTC data channel to any other window opened to the same URL.<br><br>
<B>NOTE:</B> It may take a few seconds for Endpoint to connect to the Server and download peer information.<br><br>
It first uses socket.io to connect to the Node.js server. It will then use the rtc.io switchboard
hosted there to find other peers. Once it finds one, it will download the IP address, and create
a WebRTC connection directly to that IP address.<br><br>
Once connected, it will then broadcast a request for the chat-api hosted on that browser.<br><br>
</p>
<!-- Chat windows go here -->
<p id='chat'>
</p>
<script type="text/javascript">
var endpoint = window.endpoint;
// Connect to the local API for webrtc chat.
var localChatFacade = endpoint.manageFacades(['webrtc-chat-local-api', '1.0']);
var config = endpoint.getConfiguration();
var sock = io();
var link = config.addLink({
linkId: 'server-connection',
type: 'server',
settings: {
channel: 'endpointjs-default'
}
});
link.addSocket(sock);
// And listen for other people to join!
var rtc = window.endpointWebRTC({
settings: {
neighborhood: 'universal'
}
});
localChatFacade.on('ready', function() {
// When the RTC is ready, add the conference to the link.
rtc.on('ready', function(conference) {
// Add the webrtc link
var link = endpoint.getConfiguration().addLink({
linkId: 'webrtc-' + conference.id,
type: 'webrtc',
settings: {
channel: 'endpoint-chat'
}
});
link.addConference(conference);
var bridge = endpoint.getConfiguration().createBridge(['webrtc-' + conference.id]);
// Tell chat api to connect to this guy
link.on('connection', function(link, edgeId, streams, instanceId) {
localChatFacade.getApi('webrtc-chat-local-api').reportConnection(bridge.getId(), instanceId);
});
});
});
</script>
</body>
</html>