123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110 |
- <!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), autoplay: true}).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), autoplay: true}).appendTo('body');
- });
- });
-
-
-
-
- }, 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>
|