Untitled

<html>
  <head>
    <style>
      video {
        width: 200px;
        height: 150px;
        border: 1px solid gray;
      }
      .local {
      }

      .remote {
      }
    </style>
  </head>

  <body>
    <h2>Video</h2>
    <div id="log"></div>

  <!-- Video -->
  <h3>Local video</h3>
  <video autoplay id="local"></video>

  <h3>Remote video</h3>
  <video autoplay id="remote"></video>

    <script src="http://cdn.peerjs.com/0.3/peer.min.js"></script>

    <script>
    var myId = 'b';
    var otherId = 'a';
    var constraints = { video: true, audio: true };
    var peer = new Peer(myId, {host: '192.168.1.222', port: 9000, key: 'peerjs'});
    // var conn = peer.connect(otherId);
    var err = function(err) {
      console.log(err);
    }
    var $localVideo = document.getElementById('local');
    var $remoteVideo = document.getElementById('local');

    // // send 'hi'
    // conn.on('open', function(){
    //   conn.send('chao Cuong <3');
    // });

    // // print message
    // peer.on('connection', function(conn) {
    //   conn.on('data', function(data){
    //     // Will print 'hi!'
    //     console.log(data);
    //   });
    // });

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;


    // Call
    navigator.getUserMedia(
      constraints,

      function(localStream) {
        // render local stream in browser
        $localVideo.src = window.URL.createObjectURL(localStream);

        var call = peer.call(otherId, localStream);
        console.log("Calling peer..");
        console.log(call);
        call.on('stream', function(remoteStream) {
          // Show stream in some video/canvas element.
          console.log("Receiving remote stream");
          // console.log(remoteStream);
          $remoteStream.src = window.URL.createObjectURL(remoteStream);
        });
      },

      err
    )

    // Answer
    peer.on('call', function(call) {
      navigator.getUserMedia(
        constraints,

        function(stream) {
          console.log("Receiving a call..")
          call.answer(stream); // Answer the call with an A/V stream.
          call.on('stream', function(remoteStream) {
            // Show stream in some video/canvas element.
            console.log("Receiving remote stream");
            console.log("Inside receive");
            console.log(remoteStream);
          });
        },

        err
      );
    });

    </script>
  </body>
</html>