piyushranjan/client.html

## client.html
<html>
<head>
  <script src="http://cdn.peerjs.com/0.3/peer.js"></script>
  <title>Client</title>
</head>
<body>
  <div class="error"></div>
  <div id="container"></div>
  <script type="text/javascript" src="/webrtc/client.js"></script>
</body>
</html>

## client.js
var peer = null;
(function() {
  navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;

  var stream = null;
  var button = document.querySelector('button');
  var container = document.querySelector('#container');
  var id = Math.random().toString(36).substring(7);
  peer = new Peer(id, {
    key: '<--key-->',
    debug: 3,
  });

  if (!(navigator.userAgent.match('Chrome') && parseInt(navigator.userAgent.match(/Chrome\/(.*) /)[1]) >= 26)) {
    //showErrorMsg('You need Chrome 26+ to run this demo properly.');
  }

  var video = document.createElement('video');
  peer.on('connection', function(e){
    console.log('connection');
    console.log(e);
  })
  peer.on('call', function(call) {
    console.log("called");
    call.answer();
    call.on('stream', function(stream){
      console.log("got stream");
      video.src = window.URL.createObjectURL(stream);
    });
  });
  video.autoplay = true;
  container.innerHTML = '';
  container.appendChild(video);
  console.log("calling");
  var dataConn = peer.connect('bsserver');
  dataConn.on('open', function(){
    console.log("opened");
    dataConn.send({h: window.innerHeight, w: window.innerWidth})
  });
  //
})();
window.onunload = function(){
  console.log("disconnecting");
  peer.disconnect();
}

## server.html
<html>
<head>
  <script src="http://cdn.peerjs.com/0.3/peer.js"></script>
  <title>Server</title>
</head>
<body>
  <div class="error"></div>
  <div id="container"></div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <script type="text/javascript" src="/webrtc/server.js"></script>
  <div id="log"></div>
</body>
</html>

## server.js
function log(message){
  var logWindow = document.getElementById("log");
  logWindow.innerHTML+="<br>";
  logWindow.innerHTML+=message;
}

(function() {
  navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia;

  var stream = null;
  var server = null;
  var button = document.querySelector('button');
  var container = document.querySelector('#container');

  if (!(navigator.userAgent.match('Chrome') && parseInt(navigator.userAgent.match(/Chrome\/(.*) /)[1]) >= 26)) {
    showErrorMsg('You need Chrome 26+ to run this demo properly.');
  }

  function showErrorMsg(msg) {
    var error = document.querySelector('.error');
    console.log(error);
    error.textContent = msg;
    error.classList.add('show');
  }

  function start(e) {
    console.log("running");
    log("Started");

    navigator.getUserMedia({
      video: {
        mandatory: {
          chromeMediaSource: 'screen',
          maxWidth: 1280,
          maxHeight: 720,
          minWidth: 960,
          minHeight: 720
        }
      }
    }, function(s) {
      log("stream started");
      stream = s;
      server = new Peer('bsserver', {
        key: 'browserstack',
        debug: 3
      });

      server.on('error', function(e){
        log("error");
        log(e);
      });

      server.on('connection', function(e){
        log("connection");
        console.log(e);
        e.on('data', function(m){
          console.log(m);
          server.call(e.peer, stream);
        });
      });

      server.on('call', function(e){
        log("call");
        log(e);
      });

      server.on('close', function(e){
        ("closed");
        log(e);
      })
    }, function(e) {
      if (e.code == e.PERMISSION_DENIED) {
        log(e);
        showErrorMsg('PERMISSION_DENIED. Are you no SSL?');
      }
    });
  }

  function stop() {
    stream.stop();
    server.destroy();
    button.addEventListener('click', start);
  }
  var button = document.querySelector('button#start');
  button.addEventListener('click', start);

  var button = document.querySelector('button#stop');
  button.addEventListener('click', stop);
})();
	<html>
	<head>
	<script src="http://cdn.peerjs.com/0.3/peer.js"></script>
	<title>Client</title>
	</head>
	<body>
	<div class="error"></div>
	<div id="container"></div>
	<script type="text/javascript" src="/webrtc/client.js"></script>
	</body>
	</html>
	var peer = null;
	(function() {
	navigator.getUserMedia = navigator.webkitGetUserMedia \|\| navigator.mozGetUserMedia \|\| navigator.getUserMedia;

	var stream = null;
	var button = document.querySelector('button');
	var container = document.querySelector('#container');
	var id = Math.random().toString(36).substring(7);
	peer = new Peer(id, {
	key: '<--key-->',
	debug: 3,
	});

	if (!(navigator.userAgent.match('Chrome') && parseInt(navigator.userAgent.match(/Chrome\/(.*) /)[1]) >= 26)) {
	//showErrorMsg('You need Chrome 26+ to run this demo properly.');
	}

	var video = document.createElement('video');
	peer.on('connection', function(e){
	console.log('connection');
	console.log(e);
	})
	peer.on('call', function(call) {
	console.log("called");
	call.answer();
	call.on('stream', function(stream){
	console.log("got stream");
	video.src = window.URL.createObjectURL(stream);
	});
	});
	video.autoplay = true;
	container.innerHTML = '';
	container.appendChild(video);
	console.log("calling");
	var dataConn = peer.connect('bsserver');
	dataConn.on('open', function(){
	console.log("opened");
	dataConn.send({h: window.innerHeight, w: window.innerWidth})
	});
	//
	})();
	window.onunload = function(){
	console.log("disconnecting");
	peer.disconnect();
	}
	function log(message){
	var logWindow = document.getElementById("log");
	logWindow.innerHTML+="<br>";
	logWindow.innerHTML+=message;
	}

	(function() {
	navigator.getUserMedia = navigator.webkitGetUserMedia \|\| navigator.mozGetUserMedia \|\| navigator.getUserMedia;

	var stream = null;
	var server = null;
	var button = document.querySelector('button');
	var container = document.querySelector('#container');

	if (!(navigator.userAgent.match('Chrome') && parseInt(navigator.userAgent.match(/Chrome\/(.*) /)[1]) >= 26)) {
	showErrorMsg('You need Chrome 26+ to run this demo properly.');
	}

	function showErrorMsg(msg) {
	var error = document.querySelector('.error');
	console.log(error);
	error.textContent = msg;
	error.classList.add('show');
	}

	function start(e) {
	console.log("running");
	log("Started");

	navigator.getUserMedia({
	video: {
	mandatory: {
	chromeMediaSource: 'screen',
	maxWidth: 1280,
	maxHeight: 720,
	minWidth: 960,
	minHeight: 720
	}
	}
	}, function(s) {
	log("stream started");
	stream = s;
	server = new Peer('bsserver', {
	key: 'browserstack',
	debug: 3
	});

	server.on('error', function(e){
	log("error");
	log(e);
	});

	server.on('connection', function(e){
	log("connection");
	console.log(e);
	e.on('data', function(m){
	console.log(m);
	server.call(e.peer, stream);
	});
	});

	server.on('call', function(e){
	log("call");
	log(e);
	});

	server.on('close', function(e){
	("closed");
	log(e);
	})
	}, function(e) {
	if (e.code == e.PERMISSION_DENIED) {
	log(e);
	showErrorMsg('PERMISSION_DENIED. Are you no SSL?');
	}
	});
	}

	function stop() {
	stream.stop();
	server.destroy();
	button.addEventListener('click', start);
	}
	var button = document.querySelector('button#start');
	button.addEventListener('click', start);

	var button = document.querySelector('button#stop');
	button.addEventListener('click', stop);
	})();