helloworldv.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  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);
  12. $('.log').append(copy.join(' ') + '<br>');
  13. console._log.apply(console, 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({audio: true, video: true}, function(s){
  23. window.ls = s;
  24. // Create a new Peer with our demo API key, with debug set to true so we can
  25. // see what's going on.
  26. peer1 = new Peer(window.location.hash.substr(1), { key: 'lwjd5qra8257b9', debug: 3});
  27. peer1.on('error', console.log);
  28. peer1.on('close', function(){
  29. console.log('peer closed')
  30. });
  31. peer1.on('call', function(c){
  32. window.c = 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. c.on('close', function(){
  39. console.log('call closed')
  40. });
  41. });
  42. }, function(){});
  43. });
  44. function call (name) {
  45. mc = peer1.call(name, ls);
  46. mc.on('stream', function(s){
  47. window.remote = s;
  48. z = $('<video></video>', {src: URL.createObjectURL(s), autoplay: true}).appendTo('body');
  49. });
  50. mc.on('close', function(){
  51. console.log('my call closed');
  52. });
  53. }
  54. </script>
  55. <style>
  56. #helloworld {
  57. font-weight: 600;
  58. font-size: 30px;
  59. padding: 20px;
  60. background-color: #4dace2;
  61. border: 1px solid #0C6BA1;
  62. max-width: 600px;
  63. }
  64. #browsers {
  65. font-weight: 600;
  66. }
  67. .warning {
  68. max-width: 600px;
  69. padding: 20px;
  70. background-color: #eee;
  71. border: 1px solid #ccc;
  72. font-size: 18px;
  73. }
  74. .browserinfo {
  75. padding: 20px;
  76. border: 1px solid #ccc;
  77. background-color: #f8f8f8;
  78. }
  79. a {
  80. font-weight: 600;
  81. }
  82. </style>
  83. </head>
  84. <body>
  85. <a href="https://github.com/peers/peerjs"><img style="position: absolute; top: 0; right: 0; border: 0;"
  86. src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
  87. alt="Fork me on GitHub"></a>
  88. <div id="helloworld"></div>
  89. <div class="warning browser"><div class="important">
  90. Good news! If you can see the text in the blue box above, your Chrome is up to
  91. date (version 26) and you can now use WebRTC P2P
  92. DataChannels.
  93. <br>
  94. Open up your Chrome inspector to see what's going on under the hood.
  95. <br><br>
  96. Not cool enough? Try out <a
  97. href="http://cdn.peerjs.com/demo/chat.html">a chat demo</a>
  98. with a friend.
  99. <br>
  100. This demo was built with <a href="http://peerjs.com">PeerJS.</a><br><br>
  101. <div class="browserinfo">
  102. Your browser version: <span id="browsers"></span><br>
  103. Currently <strong>Firefox 22+ and Google Chrome 26.0.1403.0 or above</strong> is
  104. required.</strong></div><br>For more up to date compatibility
  105. information see <a href="http://peerjs.com/status">PeerJS WebRTC
  106. Status</a><br>Note that this demo may also fail if you are behind
  107. stringent firewalls.</div></div>
  108. <div class="log" style="color:#FF7500;text-shadow:none;padding:15px;"><strong>Connection status</strong>:<br></div>
  109. </body>
  110. </html>