|
|
@@ -0,0 +1,123 @@
|
|
|
+<!DOCTYPE HTML>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+<title>PeerJS Hello World Code Example</title>
|
|
|
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
+<meta http-equiv="Content-Language" content="en-us">
|
|
|
+
|
|
|
+<script>
|
|
|
+ // Just for demo.
|
|
|
+ console._log = console.log;
|
|
|
+ console.error = console.log = function() {
|
|
|
+ var copy = Array.prototype.slice.call(arguments).join(' ');
|
|
|
+ $('.log').append(copy + '<br>');
|
|
|
+ console._log(copy);
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
|
|
|
+<script type="text/javascript" src="../dist/peer.js"></script>
|
|
|
+<script>
|
|
|
+ // This is a very simple code example. See chat.html for a more involved
|
|
|
+ // example.
|
|
|
+
|
|
|
+ $(document).ready(function() {
|
|
|
+ navigator.webkitGetUserMedia({video: true}, function(s){
|
|
|
+
|
|
|
+ // Create a new Peer with our demo API key, with debug set to true so we can
|
|
|
+ // see what's going on.
|
|
|
+ peer1 = new Peer({ key: 'lwjd5qra8257b9', debug: true });
|
|
|
+ // Create another Peer with our demo API key to connect to.
|
|
|
+ peer2 = new Peer('asdf', { key: 'lwjd5qra8257b9', debug: true });
|
|
|
+
|
|
|
+ mc = peer1.call('asdf',s);
|
|
|
+ mc.on('stream', function(){
|
|
|
+ z = $('<video></video>', {src: URL.createObjectURL(s)}).appendTo('body');
|
|
|
+ });
|
|
|
+ peer2.on('call', function(c){
|
|
|
+ c.answer(s);
|
|
|
+ c.on('stream', function(s){
|
|
|
+ window.s = s;
|
|
|
+ z = $('<video></video>', {src: URL.createObjectURL(s)}).appendTo('body');
|
|
|
+ });
|
|
|
+ });
|
|
|
+ setTimeout(function(){
|
|
|
+
|
|
|
+ peer2.on('connection', function(conn){
|
|
|
+ conn.on('data', function(x){
|
|
|
+ console.log(x);
|
|
|
+ })
|
|
|
+ });
|
|
|
+ conn = peer1.connect('asdf');
|
|
|
+ console.log('connected');
|
|
|
+ conn.on('open', function(){
|
|
|
+ conn.send('hi');
|
|
|
+ });
|
|
|
+
|
|
|
+ }, 1000);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }, function(){});
|
|
|
+
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ #helloworld {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 30px;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #4dace2;
|
|
|
+ border: 1px solid #0C6BA1;
|
|
|
+ max-width: 600px;
|
|
|
+ }
|
|
|
+ #browsers {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .warning {
|
|
|
+ max-width: 600px;
|
|
|
+ padding: 20px;
|
|
|
+ background-color: #eee;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .browserinfo {
|
|
|
+ padding: 20px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <a href="https://github.com/peers/peerjs"><img style="position: absolute; top: 0; right: 0; border: 0;"
|
|
|
+ src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
|
|
|
+ alt="Fork me on GitHub"></a>
|
|
|
+ <div id="helloworld"></div>
|
|
|
+ <div class="warning browser"><div class="important">
|
|
|
+ Good news! If you can see the text in the blue box above, your Chrome is up to
|
|
|
+ date (version 26) and you can now use WebRTC P2P
|
|
|
+ DataChannels.
|
|
|
+ <br>
|
|
|
+ Open up your Chrome inspector to see what's going on under the hood.
|
|
|
+ <br><br>
|
|
|
+ Not cool enough? Try out <a
|
|
|
+ href="http://cdn.peerjs.com/demo/chat.html">a chat demo</a>
|
|
|
+ with a friend.
|
|
|
+ <br>
|
|
|
+ This demo was built with <a href="http://peerjs.com">PeerJS.</a><br><br>
|
|
|
+ <div class="browserinfo">
|
|
|
+ Your browser version: <span id="browsers"></span><br>
|
|
|
+ Currently <strong>Firefox 22+ and Google Chrome 26.0.1403.0 or above</strong> is
|
|
|
+ required.</strong></div><br>For more up to date compatibility
|
|
|
+information see <a href="http://peerjs.com/status">PeerJS WebRTC
|
|
|
+ Status</a><br>Note that this demo may also fail if you are behind
|
|
|
+stringent firewalls.</div></div>
|
|
|
+<div class="log" style="color:#FF7500;text-shadow:none;padding:15px;"><strong>Connection status</strong>:<br></div>
|
|
|
+</body>
|
|
|
+</html>
|
ericz