Peer.min.js code
Remember the “peer = new Peer(‘osama’,{host: …” has to be different for each person/device/peer to establish a connection.
With this code we were able to send a click alert from one peer to another. That is, if one peer clicks on their browser, another receives an alert “hello world” on their browser.
http://www.embeddedjs.com/
https://github.com/streamgao/mediamanagement
http://cloudinary.com/<html>
<head>
<script src="peer.min.js"></script>
<script type="text/javascript">
var mypeerid = null;
var peer = null;
var connection = null;
var init = function() {
peer = new Peer('osama',{host: 'liveweb.itp.io', port: 9001, path: '/'});
peer.on('open', function(id) {
console.log('My peer ID is: ' + id);
mypeerid = id;
});
peer.on('connection', function(conn) {
connection = conn;
connection.on('open', function() {
document.getElementById('chatlog').innerHTML += "Connection Established";
});
connection.on('data', function(data) {
if (data = "click"){
alert ("Hello World!");
}
//document.getElementById('chatlog').innerHTML += data;
// document.getElementById('other').style.top = data.y;
// document.getElementById('other').style.left = data.x;
});
});
document.body.addEventListener('click', function(evt) {
connection.send("click");
//connection.send({x: evt.clientX, y: evt.clientY});
//console.log("sending: " + {x: evt.clientX, y: evt.clientY})
});
};
var sendmessage = function() {
connection.send(document.getElementById('chat').value);
document.getElementById('chat').value = "";
};
var placecall = function() {
connection = peer.connect(document.getElementById('other_peer_id').value, {reliable: false});
connection.on('open', function(data) {
document.getElementById('chatlog').innerHTML += "Connection Established";
});
connection.on('data', function(data) {
//document.getElementById('chatlog').innerHTML += data;
document.getElementById('other') = click;
//document.getElementById('other').style.left = data.x;
});
};
window.addEventListener('load', init);
</script>
</head>
<body>
<div id="other" style="position:absolute; top: 0px; left: 0px; background: red; height: 10px; width: 10px;"></div>
<input type="text" id="other_peer_id" value="PeerID to Call">
<input type="button" value="Call" onclick="placecall()"><br />
<input type="text" id="chat">
<input type="button" value="Send" onclick="sendmessage()"><br />
<div id="chatlog"></div>
</body>
</html>Class Notes
WebRTC’s RTCDataChannel API doesn’t require a big server-in-the-middle to exchange data between browsers. It can do that with peer-peer setup called RTCPeerConnection (experimental technology). RTCDataChannel uses SCTP protocols (as opposed to UDC and TCP used by servers) and DOES require a basic server setup for signaling (the process of coordinating communication) and ICE (peers exchanging information about network connection) and NATs(network address translation) as well as firewall purposes.
This article explains more on why webRTC needs signalling and ICE/NATs (ICE tries to find the best path to connect peers. NATs provide a device with an IP address for use within a private local network, but this address can’t be used externally. Without a public address, there’s no way for WebRTC peers to communicate. To get around this problem WebRTC uses STUN.) STUN servers live on the public internet and have one simple task: check the IP:port address of an incoming request (from an application running behind a NAT) and send that address back as a response. TURN is used to relay audio/video/data streaming between peers, not signaling data! RTCPeerConnection tries to set up direct communication between peers over UDP. If that fails, RTCPeerConnection resorts to TCP. If that fails, TURN servers can be used as a fallback, relaying data between endpoints.
UDP and SCTP are “message oriented” protocols, TCP is “stream oriented”. Message Oriented protocols send data in distinct chunks or groups. The receiver of data can determine where one message ends and another begins. Stream protocols send a continuous flow of data. Here is an example with mobile phones. Text messages would be a message oriented protocol as each text message is distinct from the other messages. A phone call is stream oriented as there is a continuous flow of audio throughout the call. Common protocols used on the internet are UDP (message oriented) and TCP (stream oriented). Wikipedia these terms for more information.
