Skip to content

Instantly share code, notes, and snippets.

@peterhpchen
Last active June 29, 2016 10:13
Show Gist options
  • Save peterhpchen/11031349 to your computer and use it in GitHub Desktop.
Save peterhpchen/11031349 to your computer and use it in GitHub Desktop.
RTCPeerConnection simple demo
//Make a peer to peer connection
function call() {
trace("Call remote peer.");
//1.Set Connection handler
SetLocalPeerConnection(iceServer);
SetRemotePeerConnection(iceServer);
//2.Add local stream to connection
peerLocalConnection.addStream(localStream);
//3.Create Offer by local peer
peerLocalConnection.createOffer(getLocalDescription, descriptionError);
//Set button
callBtn.disabled = true;
hangUpBtn.disabled = false;
}
function hangUp() {
trace("Stop a call.");
peerLocalConnection.close();
peerRemoteConnection.close();
peerLocalConnection = null;
peerRemoteConnection = null;
//Set button
callBtn.disabled = false;
hangUpBtn.disabled = true;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RTCPeerConnection API Demo</title>
</head>
<body>
<div>
<button id="startBtn">Start</button>
<button id="callBtn">Call</button>
<button id="hangUpBtn">Hang Up</button>
</div>
<div>
<video id="videoLocal" autoplay></video>
<video id="videoRemote" autoplay></video>
</div>
<script src="adapter.js"></script>
<script src="RTCPeerConnectionDemo.js"></script>
</body>
</html>
//Initial peer connection
var peerLocalConnection, peerRemoteConnection, localStream;
var iceServer = "";
//get evry button element by dom
var startBtn = document.getElementById("startBtn");
var callBtn = document.getElementById("callBtn");
var hangUpBtn = document.getElementById("hangUpBtn");
//Set onclick handler
startBtn.onclick = start; //start()
callBtn.onclick = call; //call()
hangUpBtn.onclick = hangUp; //hangUp()
//disable button
callBtn.disabled = true;
hangUpBtn.disabled = true;
function SetLocalPeerConnection() {
peerLocalConnection = new RTCPeerConnection();
function localIceCallBack(event) {
if (event.candidate) {
//send local peer candidate to remote
peerRemoteConnection.addIceCandidate(new RTCIceCandidate(event.candidate),
addIceCandidateSuccess, addIceCandidateError);
trace("Local peer send local candidate : " + event.candidate.candidate + " to remote peer");
}
}
peerLocalConnection.onicecandidate = localIceCallBack;
}
function SetRemotePeerConnection() {
peerRemoteConnection = new RTCPeerConnection();
var id = document.getElementById("videoRemote");
function remoteIceCallBack(event) {
if (event.candidate) {
//send remote peer candidate to local
peerLocalConnection.addIceCandidate(new RTCIceCandidate(event.candidate),
addIceCandidateSuccess, addIceCandidateError);
trace("Remote peer send remote candidate : " + event.candidate.candidate + " to local peer");
}
}
function getStream(e) {
trace("Remote get local media stream.");
attachMediaStream(id, e.stream);
}
peerRemoteConnection.onicecandidate = remoteIceCallBack;
peerRemoteConnection.onaddstream = getStream;
}
function addIceCandidateSuccess() {
trace('AddIceCandidate success.');
}
function addIceCandidateError(error) {
trace('Failed to add ICE Candidate: ' + error.toString());
}
function getLocalDescription(desc) {
//local peer set local description
peerLocalConnection.setLocalDescription(desc);
trace("Remote peer get offer from local peer. \n" + desc.sdp);
//remote peer set remote description
peerRemoteConnection.setRemoteDescription(desc);
peerRemoteConnection.createAnswer(getRemoteDescription, descriptionError);
}
function getRemoteDescription(desc) {
//remote peer set local description
peerRemoteConnection.setLocalDescription(desc);
trace("Local peer get offer from remote peer. \n" + desc.sdp);
//local peer set remote description
peerLocalConnection.setRemoteDescription(desc);
}
function descriptionError(error) {
trace("Failed to create description : " + error.toString());
}
//start getUserMedia
function start() {
trace("Get audio or video by webcam.");
//Set attribute
var id = "videoLocal";
var isAudio = false;
var isVideo = true;
//Set constraints
var constraints =
{
video: isVideo,
audio: isAudio
};
//Set success handler
function success(mediaStream) {
trace("GetUserMedia Successful");
localStream = mediaStream;
video = document.getElementById(id);
//output video on videoLocal
attachMediaStream(video, mediaStream);
}
//Set error handler
function error(e) {
trace("Error by getUserMedia: " + e);
}
//Start getUserMedia
getUserMedia(constraints, success, error);
//Set button
startBtn.disabled = true;
callBtn.disabled = false;
hangUpBtn.disabled = false;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment