lmangani/index.html

## index.html
<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gun/lib/unset.js"></script>
    <style>
      video {
        background-color: #ddd;
        border-radius: 7px;
        margin: 10px 0px 0px 10px;
        width: 320px;
        height: 240px;
      }
      button {
        margin: 5px 0px 0px 10px !important;
        width: 654px;
      }
    </style>
  </head>
  <body onload="showMyFace()">
    <video id="yourVideo" autoplay muted playsinline></video>
    <video id="friendsVideo" autoplay playsinline></video>
    <br />
    <button onclick="showFriendsFace()" type="button" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span> Call</button>
    <script>
      var peers = ['https://livecodestream-us.herokuapp.com/gun', 'https://livecodestream-eu.herokuapp.com/gun'];
      var opt = { peers: peers, localStorage: false, radisk: false };
      var gun = Gun(opt);

      var database = gun.get('piperchat');
      var yourVideo = document.getElementById("yourVideo");
      var friendsVideo = document.getElementById("friendsVideo");
      var yourId = Math.floor(Math.random()*1000000000);

      var servers = {'iceServers': [{'urls': 'stun:stun.services.mozilla.com'}, {'urls': 'stun:stun.l.google.com:19302'}]};
      var pc = new RTCPeerConnection(servers);
      pc.onicecandidate = (event => event.candidate?sendMessage(yourId, JSON.stringify({'ice': event.candidate})):console.log("Sent All Ice",yourId) );
      pc.onaddstream = (event => friendsVideo.srcObject = event.stream);

      function sendMessage(senderId, data) {
          var msg = database.put({ sender: senderId, message: data });
      }

      function readMessage(data) {
          var msg = JSON.parse(data.message);
          var sender = data.sender;
          if (sender != yourId) {
              if (msg.ice != undefined)
                  pc.addIceCandidate(new RTCIceCandidate(msg.ice));
              else if (msg.sdp.type == "offer")
                  pc.setRemoteDescription(new RTCSessionDescription(msg.sdp))
                    .then(() => pc.createAnswer())
                    .then(answer => pc.setLocalDescription(answer))
                    .then(() => sendMessage(yourId, JSON.stringify({'sdp': pc.localDescription})));
              else if (msg.sdp.type == "answer")
                  pc.setRemoteDescription(new RTCSessionDescription(msg.sdp));
          } else { console.log('discard self id');}
      };

      database.on(function(data, key) {
              console.log('got data',data)
              readMessage(data)
            })

      function showMyFace() {
        navigator.mediaDevices.getUserMedia({audio:true, video:true})
          .then(stream => yourVideo.srcObject = stream)
          .then(stream => pc.addStream(stream));
      }

      function showFriendsFace() {
        pc.createOffer()
          .then(offer => pc.setLocalDescription(offer) )
          .then(() => sendMessage(yourId, JSON.stringify({'sdp': pc.localDescription})) );
      }
    </script>
  </body>
</html>
	<html>
	<head>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/gun/lib/unset.js"></script>
	<style>
	video {
	background-color: #ddd;
	border-radius: 7px;
	margin: 10px 0px 0px 10px;
	width: 320px;
	height: 240px;
	}
	button {
	margin: 5px 0px 0px 10px !important;
	width: 654px;
	}
	</style>
	</head>
	<body onload="showMyFace()">
	<video id="yourVideo" autoplay muted playsinline></video>
	<video id="friendsVideo" autoplay playsinline></video>
	<br />
	<button onclick="showFriendsFace()" type="button" class="btn btn-primary btn-lg"><span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span> Call</button>
	<script>
	var peers = ['https://livecodestream-us.herokuapp.com/gun', 'https://livecodestream-eu.herokuapp.com/gun'];
	var opt = { peers: peers, localStorage: false, radisk: false };
	var gun = Gun(opt);

	var database = gun.get('piperchat');
	var yourVideo = document.getElementById("yourVideo");
	var friendsVideo = document.getElementById("friendsVideo");
	var yourId = Math.floor(Math.random()*1000000000);

	var servers = {'iceServers': [{'urls': 'stun:stun.services.mozilla.com'}, {'urls': 'stun:stun.l.google.com:19302'}]};
	var pc = new RTCPeerConnection(servers);
	pc.onicecandidate = (event => event.candidate?sendMessage(yourId, JSON.stringify({'ice': event.candidate})):console.log("Sent All Ice",yourId) );
	pc.onaddstream = (event => friendsVideo.srcObject = event.stream);

	function sendMessage(senderId, data) {
	var msg = database.put({ sender: senderId, message: data });
	}

	function readMessage(data) {
	var msg = JSON.parse(data.message);
	var sender = data.sender;
	if (sender != yourId) {
	if (msg.ice != undefined)
	pc.addIceCandidate(new RTCIceCandidate(msg.ice));
	else if (msg.sdp.type == "offer")
	pc.setRemoteDescription(new RTCSessionDescription(msg.sdp))
	.then(() => pc.createAnswer())
	.then(answer => pc.setLocalDescription(answer))
	.then(() => sendMessage(yourId, JSON.stringify({'sdp': pc.localDescription})));
	else if (msg.sdp.type == "answer")
	pc.setRemoteDescription(new RTCSessionDescription(msg.sdp));
	} else { console.log('discard self id');}
	};

	database.on(function(data, key) {
	console.log('got data',data)
	readMessage(data)
	})

	function showMyFace() {
	navigator.mediaDevices.getUserMedia({audio:true, video:true})
	.then(stream => yourVideo.srcObject = stream)
	.then(stream => pc.addStream(stream));
	}

	function showFriendsFace() {
	pc.createOffer()
	.then(offer => pc.setLocalDescription(offer) )
	.then(() => sendMessage(yourId, JSON.stringify({'sdp': pc.localDescription})) );
	}
	</script>
	</body>
	</html>