generic-library/webrtc
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

apprtc: add ctrl+i Info window showing gathered ICE candidate types

Browse Source 
R=vikasmarwaha@webrtc.org

Review URL: https://webrtc-codereview.appspot.com/2109004

git-svn-id: http://webrtc.googlecode.com/svn/trunk@4617 4adac7df-926f-26a2-2b94-8c16560cd09d
This commit is contained in:
fischman@webrtc.org 2013-08-26 17:44:38 +00:00
parent 6dc45a67ee
commit 5a035b4279
3 changed files with 209 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
samples/js/apprtc/css/main.css
View File

@ -1,88 +1,96 @@
a:link { color: #ffffff; } a:link { color: #ffffff; }
a:visited {color: #ffffff; } a:visited {color: #ffffff; }
html, body { html, body {
background-color: #000000; background-color: #000000;
height: 100%; height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif; font-family: Verdana, Arial, Helvetica, sans-serif;
} }
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
#container { #container {
background-color: #000000; background-color: #000000;
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;
margin: 0px auto; margin: 0px auto;
-webkit-perspective: 1000; -webkit-perspective: 1000;
} }
#card { #card {
-webkit-transition-duration: 2s; -webkit-transition-duration: 2s;
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
} }
#local { #local {
position: absolute; position: absolute;
width: 100%; width: 100%;
transform: scale(-1, 1); transform: scale(-1, 1);
-webkit-transform: scale(-1, 1); -webkit-transform: scale(-1, 1);
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
} }
#remote { #remote {
position: absolute; position: absolute;
width: 100%; width: 100%;
-webkit-transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
} }
#mini { #mini {
position: absolute; position: absolute;
height: 30%; height: 30%;
width: 30%; width: 30%;
bottom: 32px; bottom: 32px;
right: 4px; right: 4px;
opacity: 1.0; opacity: 1.0;
transform: scale(-1, 1); transform: scale(-1, 1);
-webkit-transform: scale(-1, 1); -webkit-transform: scale(-1, 1);
} }
#localVideo { #localVideo {
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; opacity: 0;
-webkit-transition-property: opacity; -webkit-transition-property: opacity;
-webkit-transition-duration: 2s; -webkit-transition-duration: 2s;
} }
#remoteVideo { #remoteVideo {
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; opacity: 0;
-webkit-transition-property: opacity; -webkit-transition-property: opacity;
-webkit-transition-duration: 2s; -webkit-transition-duration: 2s;
} }
#miniVideo { #miniVideo {
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; opacity: 0;
-webkit-transition-property: opacity; -webkit-transition-property: opacity;
-webkit-transition-duration: 2s; -webkit-transition-duration: 2s;
} }
#footer { #footer {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 28px; height: 28px;
background-color: #3F3F3F; background-color: #3F3F3F;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 13px; font-weight: bold; font-size: 13px; font-weight: bold;
line-height: 28px; line-height: 28px;
text-align: center; text-align: center;
} }
#hangup { #hangup {
font-size: 13px; font-weight: bold; font-size: 13px; font-weight: bold;
color: #FFFFFF; color: #FFFFFF;
width: 128px; width: 128px;
height: 24px; height: 24px;
background-color: #808080; background-color: #808080;
border-style: solid; border-style: solid;
border-color: #FFFFFF; border-color: #FFFFFF;
margin: 2px; margin: 2px;
} }
#infoDiv {
position: absolute;
float: right;
background-color: grey;
margin: 2px;
display: none;
}

1
samples/js/apprtc/index.html
View File

@ -47,4 +47,5 @@
</body> </body>
<footer id="footer"> <footer id="footer">
</footer> </footer>
<div id="infoDiv"></div>
</html> </html>

77
samples/js/apprtc/js/main.js
View File

@ -18,6 +18,8 @@
'OfferToReceiveVideo': true }}; 'OfferToReceiveVideo': true }};
var isVideoMuted = false; var isVideoMuted = false;
var isAudioMuted = false; var isAudioMuted = false;
// Types of gathered ICE Candidates.
var gatheredIceCandidateTypes = { Local: {}, Remote: {} };
function initialize() { function initialize() {
console.log('Initializing; room=' + roomKey + '.'); console.log('Initializing; room=' + roomKey + '.');
@ -230,6 +232,7 @@
} else if (message.type === 'candidate') { } else if (message.type === 'candidate') {
var candidate = new RTCIceCandidate({sdpMLineIndex: message.label, var candidate = new RTCIceCandidate({sdpMLineIndex: message.label,
candidate: message.candidate}); candidate: message.candidate});
noteIceCandidate("Remote", iceCandidateType(message.candidate));
pc.addIceCandidate(candidate); pc.addIceCandidate(candidate);
} else if (message.type === 'bye') { } else if (message.type === 'bye') {
onRemoteHangup(); onRemoteHangup();
@ -286,12 +289,23 @@
error.code + '.'); error.code + '.');
} }
function iceCandidateType(candidateSDP) {
if (candidateSDP.indexOf("typ relay ") >= 0)
return "TURN";
if (candidateSDP.indexOf("typ srflx ") >= 0)
return "STUN";
if (candidateSDP.indexOf("typ host ") >= 0)
return "HOST";
return "UNKNOWN";
}
function onIceCandidate(event) { function onIceCandidate(event) {
if (event.candidate) { if (event.candidate) {
sendMessage({type: 'candidate', sendMessage({type: 'candidate',
label: event.candidate.sdpMLineIndex, label: event.candidate.sdpMLineIndex,
id: event.candidate.sdpMid, id: event.candidate.sdpMid,
candidate: event.candidate.candidate}); candidate: event.candidate.candidate});
noteIceCandidate("Local", iceCandidateType(event.candidate.candidate));
} else { } else {
console.log('End of candidates.'); console.log('End of candidates.');
} }
@ -379,6 +393,37 @@
container.webkitRequestFullScreen(); container.webkitRequestFullScreen();
} }
function noteIceCandidate(location, type) {
if (gatheredIceCandidateTypes[location][type])
return;
gatheredIceCandidateTypes[location][type] = 1;
updateInfoDiv();
}
function getInfoDiv() {
return document.getElementById("infoDiv");
}
function updateInfoDiv() {
var contents = "<pre>Gathered ICE Candidates\n";
for (var endpoint in gatheredIceCandidateTypes) {
contents += endpoint + ":\n";
for (var type in gatheredIceCandidateTypes[endpoint])
contents += " " + type + "\n";
}
var div = getInfoDiv();
div.innerHTML = contents + "</pre>";
}
function toggleInfoDivDisplay() {
var div = getInfoDiv();
if (div.style.display == "block") {
div.style.display = "none";
} else {
div.style.display = "block";
}
}
function toggleVideoMute() { function toggleVideoMute() {
// Call the getVideoTracks method via adapter.js. // Call the getVideoTracks method via adapter.js.
videoTracks = localStream.getVideoTracks(); videoTracks = localStream.getVideoTracks();
@ -427,28 +472,30 @@
isAudioMuted = !isAudioMuted; isAudioMuted = !isAudioMuted;
} }
// Ctrl-D: toggle audio mute; Ctrl-E: toggle video mute. // Mac: hotkey is Command.
// On Mac, Command key is instead of Ctrl. // Non-Mac: hotkey is Control.
// <hotkey>-D: toggle audio mute.
// <hotkey>-E: toggle video mute.
// <hotkey>-I: toggle Info box.
// Return false to screen out original Chrome shortcuts. // Return false to screen out original Chrome shortcuts.
document.onkeydown = function(event) { document.onkeydown = function(event) {
if (navigator.appVersion.indexOf('Mac') != -1) { var hotkey = event.ctrlKey;
if (event.metaKey && event.keyCode === 68) { if (navigator.appVersion.indexOf('Mac') != -1)
hotkey = event.metaKey;
if (!hotkey)
return;
switch (event.keyCode) {
case 68:
toggleAudioMute(); toggleAudioMute();
return false; return false;
} case 69:
if (event.metaKey && event.keyCode === 69) {
toggleVideoMute(); toggleVideoMute();
return false; return false;
} case 73:
} else { toggleInfoDivDisplay();
if (event.ctrlKey && event.keyCode === 68) {
toggleAudioMute();
return false; return false;
} default:
if (event.ctrlKey && event.keyCode === 69) { return;
toggleVideoMute();
return false;
}
} }
} }