helloworldv.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3. <head>
  4. <title>PeerJS Hello World Code Example</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <meta http-equiv="Content-Language" content="en-us">
  7. <script>
  8. // Just for demo.
  9. console._log = console.log;
  10. console.error = console.log = function() {
  11. var copy = Array.prototype.slice.call(arguments).join(' ');
  12. $('.log').append(copy + '<br>');
  13. console._log(copy);
  14. };
  15. </script>
  16. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  17. <script type="text/javascript" src="../dist/peer.js"></script>
  18. <script>
  19. // This is a very simple code example. See chat.html for a more involved
  20. // example.
  21. $(document).ready(function() {
  22. navigator.webkitGetUserMedia({video: true}, function(s){
  23. // Create a new Peer with our demo API key, with debug set to true so we can
  24. // see what's going on.
  25. peer1 = new Peer({ key: 'lwjd5qra8257b9', debug: true });
  26. // Create another Peer with our demo API key to connect to.
  27. peer2 = new Peer('asdf', { key: 'lwjd5qra8257b9', debug: true });
  28. mc = peer1.call('asdf',s);
  29. mc.on('stream', function(){
  30. z = $('<video></video>', {src: URL.createObjectURL(s), autoplay: true}).appendTo('body');
  31. });
  32. peer2.on('call', function(c){
  33. c.answer(s);
  34. c.on('stream', function(s){
  35. window.s = s;
  36. z = $('<video></video>', {src: URL.createObjectURL(s), autoplay: true}).appendTo('body');
  37. });
  38. });
  39. }, function(){});
  40. });
  41. </script>
  42. <style>
  43. #helloworld {
  44. font-weight: 600;
  45. font-size: 30px;
  46. padding: 20px;
  47. background-color: #4dace2;
  48. border: 1px solid #0C6BA1;
  49. max-width: 600px;
  50. }
  51. #browsers {
  52. font-weight: 600;
  53. }
  54. .warning {
  55. max-width: 600px;
  56. padding: 20px;
  57. background-color: #eee;
  58. border: 1px solid #ccc;
  59. font-size: 18px;
  60. }
  61. .browserinfo {
  62. padding: 20px;
  63. border: 1px solid #ccc;
  64. background-color: #f8f8f8;
  65. }
  66. a {
  67. font-weight: 600;
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <a href="https://github.com/peers/peerjs"><img style="position: absolute; top: 0; right: 0; border: 0;"
  73. src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
  74. alt="Fork me on GitHub"></a>
  75. <div id="helloworld"></div>
  76. <div class="warning browser"><div class="important">
  77. Good news! If you can see the text in the blue box above, your Chrome is up to
  78. date (version 26) and you can now use WebRTC P2P
  79. DataChannels.
  80. <br>
  81. Open up your Chrome inspector to see what's going on under the hood.
  82. <br><br>
  83. Not cool enough? Try out <a
  84. href="http://cdn.peerjs.com/demo/chat.html">a chat demo</a>
  85. with a friend.
  86. <br>
  87. This demo was built with <a href="http://peerjs.com">PeerJS.</a><br><br>
  88. <div class="browserinfo">
  89. Your browser version: <span id="browsers"></span><br>
  90. Currently <strong>Firefox 22+ and Google Chrome 26.0.1403.0 or above</strong> is
  91. required.</strong></div><br>For more up to date compatibility
  92. information see <a href="http://peerjs.com/status">PeerJS WebRTC
  93. Status</a><br>Note that this demo may also fail if you are behind
  94. stringent firewalls.</div></div>
  95. <div class="log" style="color:#FF7500;text-shadow:none;padding:15px;"><strong>Connection status</strong>:<br></div>
  96. </body>
  97. </html>