simonlast · March 29, 2014 06:32
diff --git a/jsbin.daniz.html b/jsbin.daniz.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="http://cdn.peerjs.com/0.3/peer.min.js"></script>
 </head>
 <body>
  
  <h1>My peer Id:</h1>
  
  <span class="my-peer-id"></span>
  
  <br>
  <br>
  
  <input type="text" class="peer-id" placeholder="Other Peer Id"></input>
  <button class="call">Call</button>
  
  <h1>Self</h1>
  <video class="self" autoplay></video>

  <h1>Other</h1>
  <video class="other" autoplay></video>
  
  
  <script>
    
    //video
    var errorCallback = function(e) {
      console.log('Reeeejected!', e);
    };

    //peerjs
    
    var peer = new Peer({key: 'lwjd5qra8257b9'});
    
    console.log(peer);
    
    peer.on('open', function(id) {
      console.log('My peer ID is: ' + id);
      document.querySelector(".my-peer-id").textContent = id;
    });

    
    // Not showing vendor prefixes.
    navigator.webkitGetUserMedia({video: true, audio: true}, function(localMediaStream) {
      var video = document.querySelector('.self');
      video.src = window.URL.createObjectURL(localMediaStream);
      
          
      var button = document.querySelector(".call");
      button.addEventListener("click", function(){
        peerId = document.querySelector(".peer-id").value;
        
        console.log("calling peer: ", peerId);

        // Call a peer, providing our mediaStream
        var call = peer.call(peerId, localMediaStream);
        
        call.on('stream', function(stream) {
          // `stream` is the MediaStream of the remote peer.
          // Here you'd add it to an HTML video/canvas element.
          var other = document.querySelector('.other');
          other.src = window.URL.createObjectURL(stream);
        });
      });
      
      peer.on('call', function(call) {
        console.log("got call: ", call);
        // Answer the call, providing our mediaStream
        call.answer(localMediaStream);
        
        call.on('stream', function(stream) {
          // `stream` is the MediaStream of the remote peer.
          // Here you'd add it to an HTML video/canvas element.
          var other = document.querySelector('.other');
          other.src = window.URL.createObjectURL(stream);
        });
      });

      video.onloadedmetadata = function(e) {
        // Ready to go. Do some stuff.
      };
    }, errorCallback);
    

    

    
  </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<script src="http://cdn.peerjs.com/0.3/peer.min.js"></script>
	</head>
	<body>

	<h1>My peer Id:</h1>

	<span class="my-peer-id"></span>

	<br>
	<br>

	<input type="text" class="peer-id" placeholder="Other Peer Id"></input>
	<button class="call">Call</button>

	<h1>Self</h1>
	<video class="self" autoplay></video>

	<h1>Other</h1>
	<video class="other" autoplay></video>


	<script>

	//video
	var errorCallback = function(e) {
	console.log('Reeeejected!', e);
	};

	//peerjs

	var peer = new Peer({key: 'lwjd5qra8257b9'});

	console.log(peer);

	peer.on('open', function(id) {
	console.log('My peer ID is: ' + id);
	document.querySelector(".my-peer-id").textContent = id;
	});


	// Not showing vendor prefixes.
	navigator.webkitGetUserMedia({video: true, audio: true}, function(localMediaStream) {
	var video = document.querySelector('.self');
	video.src = window.URL.createObjectURL(localMediaStream);


	var button = document.querySelector(".call");
	button.addEventListener("click", function(){
	peerId = document.querySelector(".peer-id").value;

	console.log("calling peer: ", peerId);

	// Call a peer, providing our mediaStream
	var call = peer.call(peerId, localMediaStream);

	call.on('stream', function(stream) {
	// `stream` is the MediaStream of the remote peer.
	// Here you'd add it to an HTML video/canvas element.
	var other = document.querySelector('.other');
	other.src = window.URL.createObjectURL(stream);
	});
	});

	peer.on('call', function(call) {
	console.log("got call: ", call);
	// Answer the call, providing our mediaStream
	call.answer(localMediaStream);

	call.on('stream', function(stream) {
	// `stream` is the MediaStream of the remote peer.
	// Here you'd add it to an HTML video/canvas element.
	var other = document.querySelector('.other');
	other.src = window.URL.createObjectURL(stream);
	});
	});

	video.onloadedmetadata = function(e) {
	// Ready to go. Do some stuff.
	};
	}, errorCallback);





	</script>

	</body>
	</html>