index.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <html>
  2. <head>
  3. <title>PeerJS - Video chat example</title>
  4. <link rel="stylesheet" href="style.css">
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  6. <script type="text/javascript" src="/dist/peer.js"></script>
  7. <script>
  8. // Compatibility shim
  9. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  10. // PeerJS object
  11. var peer = new Peer({ key: 'lwjd5qra8257b9', debug: 3});
  12. peer.on('open', function(){
  13. $('#my-id').text(peer.id);
  14. });
  15. // Receiving a call
  16. peer.on('call', function(call){
  17. // Answer the call automatically (instead of prompting user) for demo purposes
  18. call.answer(window.localStream);
  19. step3(call);
  20. });
  21. peer.on('error', function(err){
  22. alert(err.message);
  23. // Return to step 2 if error occurs
  24. step2();
  25. });
  26. // Click handlers setup
  27. $(function(){
  28. $('#make-call').click(function(){
  29. // Initiate a call!
  30. var call = peer.call($('#callto-id').val(), window.localStream);
  31. step3(call);
  32. });
  33. $('#end-call').click(function(){
  34. window.existingCall.close();
  35. step2();
  36. });
  37. // Retry if getUserMedia fails
  38. $('#step1-retry').click(function(){
  39. $('#step1-error').hide();
  40. step1();
  41. });
  42. // Get things started
  43. step1();
  44. });
  45. function step1 () {
  46. // Get audio/video stream
  47. navigator.getUserMedia({audio: true, video: true}, function(stream){
  48. // Set your video displays
  49. $('#my-video').prop('src', URL.createObjectURL(stream));
  50. window.localStream = stream;
  51. step2();
  52. }, function(){ $('#step1-error').show(); });
  53. }
  54. function step2 () {
  55. $('#step1, #step3').hide();
  56. $('#step2').show();
  57. }
  58. function step3 (call) {
  59. // Hang up on an existing call if present
  60. if (window.existingCall) {
  61. window.existingCall.close();
  62. }
  63. // Wait for stream on the call, then set peer video display
  64. call.on('stream', function(stream){
  65. $('#their-video').prop('src', URL.createObjectURL(stream));
  66. });
  67. // UI stuff
  68. window.existingCall = call;
  69. $('#their-id').text(call.peer);
  70. call.on('close', step2);
  71. $('#step1, #step2').hide();
  72. $('#step3').show();
  73. }
  74. </script>
  75. </head>
  76. <body>
  77. <div class="pure-g">
  78. <!-- Video area -->
  79. <div class="pure-u-2-3" id="video-container">
  80. <video id="their-video" autoplay></video>
  81. <video id="my-video" muted="true" autoplay></video>
  82. </div>
  83. <!-- Steps -->
  84. <div class="pure-u-1-3">
  85. <h2>PeerJS Video Chat</h2>
  86. <!-- Get local audio/video stream -->
  87. <div id="step1">
  88. <p>Please click `allow` on the top of the screen so we can access your webcam and microphone for calls.</p>
  89. <div id="step1-error">
  90. <p>Failed to access the webcam and microphone. Make sure to run this demo on an http server and click allow when asked for permission by the browser.</p>
  91. <a href="#" class="pure-button pure-button-error" id="step1-retry">Try again</a>
  92. </div>
  93. </div>
  94. <!-- Make calls to others -->
  95. <div id="step2">
  96. <p>Your id: <span id="my-id">...</span></p>
  97. <p>Share this id with others so they can call you.</p>
  98. <h3>Make a call</h3>
  99. <div class="pure-form">
  100. <input type="text" placeholder="Call user id..." id="callto-id">
  101. <a href="#" class="pure-button pure-button-success" id="make-call">Call</a>
  102. </div>
  103. </div>
  104. <!-- Call in progress -->
  105. <div id="step3">
  106. <p>Currently in call with <span id="their-id">...</span></p>
  107. <p><a href="#" class="pure-button pure-button-error" id="end-call">End call</a></p>
  108. </div>
  109. </div>
  110. </div>
  111. </body>
  112. </html>