123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139 |
- <html>
- <head>
- <title>PeerJS - Video chat example</title>
- <link rel="stylesheet" href="style.css">
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
- <script type="text/javascript" src="/dist/peer.js"></script>
- <script>
- // Compatibility shim
- navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
- // PeerJS object
- var peer = new Peer({ key: 'lwjd5qra8257b9', debug: 3});
- peer.on('open', function(){
- $('#my-id').text(peer.id);
- });
- // Receiving a call
- peer.on('call', function(call){
- // Answer the call automatically (instead of prompting user) for demo purposes
- call.answer(window.localStream);
- step3(call);
- });
- peer.on('error', function(err){
- alert(err.message);
- // Return to step 2 if error occurs
- step2();
- });
- // Click handlers setup
- $(function(){
- $('#make-call').click(function(){
- // Initiate a call!
- var call = peer.call($('#callto-id').val(), window.localStream);
- step3(call);
- });
- $('#end-call').click(function(){
- window.existingCall.close();
- step2();
- });
- // Retry if getUserMedia fails
- $('#step1-retry').click(function(){
- $('#step1-error').hide();
- step1();
- });
- // Get things started
- step1();
- });
- function step1 () {
- // Get audio/video stream
- navigator.getUserMedia({audio: true, video: true}, function(stream){
- // Set your video displays
- $('#my-video').prop('src', URL.createObjectURL(stream));
- window.localStream = stream;
- step2();
- }, function(){ $('#step1-error').show(); });
- }
- function step2 () {
- $('#step1, #step3').hide();
- $('#step2').show();
- }
- function step3 (call) {
- // Hang up on an existing call if present
- if (window.existingCall) {
- window.existingCall.close();
- }
- // Wait for stream on the call, then set peer video display
- call.on('stream', function(stream){
- $('#their-video').prop('src', URL.createObjectURL(stream));
- });
- // UI stuff
- window.existingCall = call;
- $('#their-id').text(call.peer);
- call.on('close', step2);
- $('#step1, #step2').hide();
- $('#step3').show();
- }
- </script>
- </head>
- <body>
- <div class="pure-g">
- <!-- Video area -->
- <div class="pure-u-2-3" id="video-container">
- <video id="their-video" autoplay></video>
- <video id="my-video" muted="true" autoplay></video>
- </div>
- <!-- Steps -->
- <div class="pure-u-1-3">
- <h2>PeerJS Video Chat</h2>
- <!-- Get local audio/video stream -->
- <div id="step1">
- <p>Please click `allow` on the top of the screen so we can access your webcam and microphone for calls.</p>
- <div id="step1-error">
- <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>
- <a href="#" class="pure-button pure-button-error" id="step1-retry">Try again</a>
- </div>
- </div>
- <!-- Make calls to others -->
- <div id="step2">
- <p>Your id: <span id="my-id">...</span></p>
- <p>Share this id with others so they can call you.</p>
- <h3>Make a call</h3>
- <div class="pure-form">
- <input type="text" placeholder="Call user id..." id="callto-id">
- <a href="#" class="pure-button pure-button-success" id="make-call">Call</a>
- </div>
- </div>
- <!-- Call in progress -->
- <div id="step3">
- <p>Currently in call with <span id="their-id">...</span></p>
- <p><a href="#" class="pure-button pure-button-error" id="end-call">End call</a></p>
- </div>
- </div>
- </div>
- </body>
- </html>
|