rimagahwa/index.html

## index.html
<html>
<head>
    <title>Rima's Website</title>

    <script src="//cdn.temasys.com.sg/skylink/skylinkjs/0.6.x/skylink.complete.min.js"></script>
</head>
<body>

  <video id="myvideo" style="transform: rotateY(-180deg);" width="160px" height="120px" autoplay muted></video>
  <!--  rotate to so the video is mirrored  -->


  </br>
  <button id="takePic">Take picture</button>
        <div style="position:fixed;">
  </div>
  </br>
 </br>
  <canvas id="myphoto" style="display: none;"width="160px" height="120px"></canvas>

  <input id="message" value="Type a message" ></input>


</body>
</html>

## qdJyxN.markdown

      
    Raw
  

              qdJyxN.markdown
            
          
    qdJyxN

Forked from Captain Anonymous's Pen PqyJpZ.
A Pen by Rima on CodePen.
License.

  
## script.js
//Sample API key: cd7819c8-8513-4c3f-8ed1-bc1a35bc13ba
//Permission  to access webcam
//skylink.getUserMedia();

var skylink = new Skylink();
//var userName=prompt("Enter a username");
//Ask for permission to use camera & mic
skylink.on("mediaAccessSuccess", function(stream) {
  var video = document.querySelector("#myvideo");
  //Pass access to the stream function from above...
  attachMediaStream(video, stream);
});

//Display peer's name once after joining the room
skylink.on("peerJoined", function(peerId, peerInfo) {

  var div = document.createElement("div");
  div.id = peerId;
  div.textContent = peerInfo.userData.name + " joined..";
  document.body.appendChild(div);
  document.body.scrollTop =document.body.scrollHeight;
});

//Display peer's name after leaving the room
skylink.on("peerLeft", function(peerId, peerInfo) {
  var divLeft = document.createElement("div");
  divLeft.textContent = peerInfo.userData.name + " left..";
  document.body.appendChild(divLeft);
});

//Handle any incoming chat messages.
skylink.on("incomingMessage", function(message, peerId, peerInfo) {
  var divMessage = document.createElement("div");
  divMessage.textContent = peerInfo.userData.name + ": " + message.content;
  divMessage.style.color = "blue";
  divMessage.style.fontWeight = "bold";
  document.body.appendChild(divMessage);
  document.body.scrollTop = document.body.scrollHeight;
});

document.getElementById("message").onclick=
  function(event){
  event.target.value = "";
}

document.getElementById("message").onkeypress = function(event) {
  if(event.keyCode === 13) {
    skylink.sendP2PMessage(event.target.value);
    //Clear the input box.
    event.target.value = "";
  }
}

//Grab picture from webcam and then append it as an image tag.
document.getElementById("takePic").onclick = function() {
  var canvas = document.getElementById("myphoto");
  var myvideo = document.getElementById("myvideo");
  var context = canvas.getContext("2d");
  context.drawImage(myvideo, 0,0,160,120);
  var mypic = canvas.toDataURL('image/jpeg', 0.8);
  var image = document.createElement("img");
  image.src = mypic;
  skylink.sendP2PMessage(mypic)
  document.body.appendChild(image);
}

//api is used to identify differnt apps
//A room needs to know its unique identifier
//Initiate  a shared space

skylink.init({
  apiKey: "cd7819c8-8513-4c3f-8ed1-bc1a35bc13ba",
  defaultRoom: "meer"
}, function() {
  skylink.setUserData({name: "Rima"});
  skylink.joinRoom({video: true, audio: false});
});
	<html>
	<head>
	<title>Rima's Website</title>

	<script src="//cdn.temasys.com.sg/skylink/skylinkjs/0.6.x/skylink.complete.min.js"></script>
	</head>
	<body>

	<video id="myvideo" style="transform: rotateY(-180deg);" width="160px" height="120px" autoplay muted></video>
	<!-- rotate to so the video is mirrored -->


	</br>
	<button id="takePic">Take picture</button>
	<div style="position:fixed;">
	</div>
	</br>
	</br>
	<canvas id="myphoto" style="display: none;"width="160px" height="120px"></canvas>

	<input id="message" value="Type a message" ></input>


	</body>
	</html>
	//Sample API key: cd7819c8-8513-4c3f-8ed1-bc1a35bc13ba
	//Permission to access webcam
	//skylink.getUserMedia();

	var skylink = new Skylink();
	//var userName=prompt("Enter a username");
	//Ask for permission to use camera & mic
	skylink.on("mediaAccessSuccess", function(stream) {
	var video = document.querySelector("#myvideo");
	//Pass access to the stream function from above...
	attachMediaStream(video, stream);
	});

	//Display peer's name once after joining the room
	skylink.on("peerJoined", function(peerId, peerInfo) {

	var div = document.createElement("div");
	div.id = peerId;
	div.textContent = peerInfo.userData.name + " joined..";
	document.body.appendChild(div);
	document.body.scrollTop =document.body.scrollHeight;
	});

	//Display peer's name after leaving the room
	skylink.on("peerLeft", function(peerId, peerInfo) {
	var divLeft = document.createElement("div");
	divLeft.textContent = peerInfo.userData.name + " left..";
	document.body.appendChild(divLeft);
	});

	//Handle any incoming chat messages.
	skylink.on("incomingMessage", function(message, peerId, peerInfo) {
	var divMessage = document.createElement("div");
	divMessage.textContent = peerInfo.userData.name + ": " + message.content;
	divMessage.style.color = "blue";
	divMessage.style.fontWeight = "bold";
	document.body.appendChild(divMessage);
	document.body.scrollTop = document.body.scrollHeight;
	});

	document.getElementById("message").onclick=
	function(event){
	event.target.value = "";
	}

	document.getElementById("message").onkeypress = function(event) {
	if(event.keyCode === 13) {
	skylink.sendP2PMessage(event.target.value);
	//Clear the input box.
	event.target.value = "";
	}
	}

	//Grab picture from webcam and then append it as an image tag.
	document.getElementById("takePic").onclick = function() {
	var canvas = document.getElementById("myphoto");
	var myvideo = document.getElementById("myvideo");
	var context = canvas.getContext("2d");
	context.drawImage(myvideo, 0,0,160,120);
	var mypic = canvas.toDataURL('image/jpeg', 0.8);
	var image = document.createElement("img");
	image.src = mypic;
	skylink.sendP2PMessage(mypic)
	document.body.appendChild(image);
	}

	//api is used to identify differnt apps
	//A room needs to know its unique identifier
	//Initiate a shared space

	skylink.init({
	apiKey: "cd7819c8-8513-4c3f-8ed1-bc1a35bc13ba",
	defaultRoom: "meer"
	}, function() {
	skylink.setUserData({name: "Rima"});
	skylink.joinRoom({video: true, audio: false});
	});