2013-02-28 00:22:10 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2013-04-08 23:23:58 +02:00
|
|
|
<title>PeerConnection PRANSWER Demo</title>
|
|
|
|
|
<!-- Load the polyfill to switch-hit between Chrome and Firefox -->
|
|
|
|
|
<script src="../../base/adapter.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
video {
|
|
|
|
|
border:5px solid black;
|
|
|
|
|
width:320px;
|
|
|
|
|
height:240px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<video id="vid1" autoplay="true" muted="true"></video>
|
|
|
|
|
<video id="vid2" autoplay></video>
|
|
|
|
|
<br>
|
|
|
|
|
<button id="btn1" onclick="start()">Call</button>
|
|
|
|
|
<button id="btn2" onclick="accept()">Accept</button>
|
|
|
|
|
<button id="btn3" onclick="stop()">Hang Up</button>
|
|
|
|
|
<script>
|
2013-02-28 00:22:10 +01:00
|
|
|
//var vid1 = document.getElementById("vid1");
|
|
|
|
|
//var vid2 = document.getElementById("vid2");
|
|
|
|
|
btn1.disabled = true;
|
|
|
|
|
btn2.disabled = true;
|
2013-04-08 23:23:58 +02:00
|
|
|
btn3.disabled = true;
|
2013-02-28 00:22:10 +01:00
|
|
|
var pc1,pc2;
|
|
|
|
|
var localstream;
|
2013-04-08 23:23:58 +02:00
|
|
|
var sdpConstraints = {'mandatory': {
|
|
|
|
|
'OfferToReceiveAudio':true,
|
|
|
|
|
'OfferToReceiveVideo':true }};
|
|
|
|
|
|
|
|
|
|
function gotStream(stream) {
|
2013-02-28 00:22:10 +01:00
|
|
|
trace("Received local stream");
|
2013-04-08 23:23:58 +02:00
|
|
|
// Call the polyfill wrapper to attach the media stream to this element.
|
|
|
|
|
attachMediaStream(vid1, stream);
|
2013-02-28 00:22:10 +01:00
|
|
|
localstream = stream;
|
|
|
|
|
btn1.disabled = false;
|
|
|
|
|
}
|
|
|
|
|
|
2013-04-08 23:23:58 +02:00
|
|
|
getUserMedia({audio:true, video:true}, gotStream, function() {});
|
2013-02-28 00:22:10 +01:00
|
|
|
|
|
|
|
|
function start() {
|
|
|
|
|
btn1.disabled = true;
|
|
|
|
|
btn2.disabled = false;
|
2013-04-08 23:23:58 +02:00
|
|
|
btn3.disabled = false;
|
2013-02-28 00:22:10 +01:00
|
|
|
trace("Starting Call");
|
2013-04-08 23:23:58 +02:00
|
|
|
videoTracks = localstream.getVideoTracks();
|
|
|
|
|
audioTracks = localstream.getAudioTracks();
|
|
|
|
|
if (videoTracks.length > 0)
|
|
|
|
|
trace('Using Video device: ' + videoTracks[0].label);
|
|
|
|
|
if (audioTracks.length > 0)
|
|
|
|
|
trace('Using Audio device: ' + audioTracks[0].label);
|
2013-02-28 00:22:10 +01:00
|
|
|
|
2013-04-08 23:23:58 +02:00
|
|
|
var servers = null;
|
|
|
|
|
pc1 = new RTCPeerConnection(servers);
|
|
|
|
|
trace("Created local peer connection object pc1");
|
|
|
|
|
pc1.onicecandidate = iceCallback1;
|
|
|
|
|
pc2 = new RTCPeerConnection(servers);
|
2013-02-28 00:22:10 +01:00
|
|
|
trace("Created remote peer connection object pc2");
|
2013-04-08 23:23:58 +02:00
|
|
|
pc2.onicecandidate = iceCallback2;
|
2013-02-28 00:22:10 +01:00
|
|
|
pc2.onaddstream = gotRemoteStream;
|
|
|
|
|
|
|
|
|
|
pc1.addStream(localstream);
|
|
|
|
|
trace("Adding Local Stream to peer connection");
|
2013-04-08 23:23:58 +02:00
|
|
|
|
|
|
|
|
pc1.createOffer(gotDescription1);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function gotDescription1(desc) {
|
|
|
|
|
pc1.setLocalDescription(desc);
|
|
|
|
|
trace("Offer from pc1 \n" + desc.sdp);
|
|
|
|
|
pc2.setRemoteDescription(desc);
|
|
|
|
|
// Since the "remote" side has no media stream we need
|
|
|
|
|
// to pass in the right constraints in order for it to
|
|
|
|
|
// accept the incoming offer of audio and video.
|
|
|
|
|
pc2.createAnswer(gotDescription2, null, sdpConstraints);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function gotDescription2(desc) {
|
|
|
|
|
// Provisional answer, set a=inactive & set sdp type to pranswer.
|
|
|
|
|
desc.sdp = desc.sdp.replace(/a=recvonly/g, "a=inactive");
|
|
|
|
|
desc.type = "pranswer";
|
|
|
|
|
pc2.setLocalDescription(desc);
|
|
|
|
|
trace("Pranswer from pc2 \n" + desc.sdp);
|
|
|
|
|
pc1.setRemoteDescription(desc);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function gotDescription3(desc) {
|
|
|
|
|
// Final answer, setting a=recvonly & sdp type to answer.
|
|
|
|
|
desc.sdp = desc.sdp.replace(/a=inactive/g, "a=recvonly");
|
|
|
|
|
desc.type = "answer";
|
|
|
|
|
pc2.setLocalDescription(desc);
|
|
|
|
|
trace("Answer from pc2 \n" + desc.sdp);
|
|
|
|
|
pc1.setRemoteDescription(desc);
|
2013-02-28 00:22:10 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function accept() {
|
2013-04-08 23:23:58 +02:00
|
|
|
pc2.createAnswer(gotDescription3, null, sdpConstraints);
|
|
|
|
|
btn2.disabled = true;
|
|
|
|
|
btn1.disabled = false;
|
2013-02-28 00:22:10 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function stop() {
|
|
|
|
|
trace("Ending Call" + "\n\n");
|
|
|
|
|
pc1.close();
|
|
|
|
|
pc2.close();
|
|
|
|
|
pc1=null;
|
|
|
|
|
pc2=null;
|
|
|
|
|
btn2.disabled = true;
|
|
|
|
|
btn1.disabled = false;
|
2013-04-08 23:23:58 +02:00
|
|
|
btn3.disabled = true;
|
2013-02-28 00:22:10 +01:00
|
|
|
}
|
|
|
|
|
|
2013-04-08 23:23:58 +02:00
|
|
|
function gotRemoteStream(e) {
|
2013-04-26 01:22:03 +02:00
|
|
|
// Call the polyfill wrapper to attach the media stream to this element.
|
|
|
|
|
attachMediaStream(vid2, e.stream);
|
2013-04-08 23:23:58 +02:00
|
|
|
trace("Received remote stream");
|
2013-02-28 00:22:10 +01:00
|
|
|
}
|
|
|
|
|
|
2013-04-08 23:23:58 +02:00
|
|
|
function iceCallback1(event) {
|
|
|
|
|
if (event.candidate) {
|
|
|
|
|
pc2.addIceCandidate(new RTCIceCandidate(event.candidate));
|
|
|
|
|
trace("Local ICE candidate: \n" + event.candidate.candidate);
|
2013-02-28 00:22:10 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2013-04-08 23:23:58 +02:00
|
|
|
function iceCallback2(event) {
|
|
|
|
|
if (event.candidate) {
|
|
|
|
|
pc1.addIceCandidate(new RTCIceCandidate(event.candidate));
|
|
|
|
|
trace("Remote ICE candidate: \n " + event.candidate.candidate);
|
2013-02-28 00:22:10 +01:00
|
|
|
}
|
2013-04-08 23:23:58 +02:00
|
|
|
}
|
2013-02-28 00:22:10 +01:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
|
