oleg
/
peerjs


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
							<!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);
    $('.log').append(copy.join(' ') + '<br>');
    console._log.apply(console, 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({audio: true, video: true}, function(s){
      window.ls = 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(window.location.hash.substr(1), { key: 'lwjd5qra8257b9', debug: 3});
      peer1.on('error', console.log);
      peer1.on('close', function(){
        console.log('peer closed')
      });
      peer1.on('call', function(c){
        window.c = c;
        c.answer(s);
        c.on('stream', function(s){
          window.s = s;
          z = $('<video></video>', {src: URL.createObjectURL(s), autoplay: true}).appendTo('body');
        });
        c.on('close', function(){
          console.log('call closed')
        });
      });


    }, function(){});

  });
  function call (name) {
      mc = peer1.call(name, ls, {constraints: {
    mandatory: {
        OfferToReceiveAudio: false,
        OfferToReceiveVideo: false
    }
}});
      mc.on('stream', function(s){
        window.remote = s;
          z = $('<video></video>', {src: URL.createObjectURL(s), autoplay: true}).appendTo('body');
      });
      mc.on('close', function(){
        console.log('my call closed');
      });
  }


</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>