apprtc: add ctrl+i Info window showing gathered ICE candidate types
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
parent
6dc45a67ee
commit
5a035b4279
@ -1,88 +1,96 @@
|
||||
a:link { color: #ffffff; }
|
||||
a:visited {color: #ffffff; }
|
||||
html, body {
|
||||
background-color: #000000;
|
||||
height: 100%;
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#container {
|
||||
background-color: #000000;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0px auto;
|
||||
-webkit-perspective: 1000;
|
||||
}
|
||||
#card {
|
||||
-webkit-transition-duration: 2s;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
}
|
||||
#local {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transform: scale(-1, 1);
|
||||
-webkit-transform: scale(-1, 1);
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
#remote {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
-webkit-transform: rotateY(180deg);
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
#mini {
|
||||
position: absolute;
|
||||
height: 30%;
|
||||
width: 30%;
|
||||
bottom: 32px;
|
||||
right: 4px;
|
||||
opacity: 1.0;
|
||||
transform: scale(-1, 1);
|
||||
-webkit-transform: scale(-1, 1);
|
||||
}
|
||||
#localVideo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
-webkit-transition-property: opacity;
|
||||
-webkit-transition-duration: 2s;
|
||||
}
|
||||
#remoteVideo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
-webkit-transition-property: opacity;
|
||||
-webkit-transition-duration: 2s;
|
||||
}
|
||||
#miniVideo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
-webkit-transition-property: opacity;
|
||||
-webkit-transition-duration: 2s;
|
||||
}
|
||||
#footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
background-color: #3F3F3F;
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 13px; font-weight: bold;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
#hangup {
|
||||
font-size: 13px; font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
width: 128px;
|
||||
height: 24px;
|
||||
background-color: #808080;
|
||||
border-style: solid;
|
||||
border-color: #FFFFFF;
|
||||
margin: 2px;
|
||||
}
|
||||
a:link { color: #ffffff; }
|
||||
a:visited {color: #ffffff; }
|
||||
html, body {
|
||||
background-color: #000000;
|
||||
height: 100%;
|
||||
font-family: Verdana, Arial, Helvetica, sans-serif;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#container {
|
||||
background-color: #000000;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0px auto;
|
||||
-webkit-perspective: 1000;
|
||||
}
|
||||
#card {
|
||||
-webkit-transition-duration: 2s;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
}
|
||||
#local {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transform: scale(-1, 1);
|
||||
-webkit-transform: scale(-1, 1);
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
#remote {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
-webkit-transform: rotateY(180deg);
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
#mini {
|
||||
position: absolute;
|
||||
height: 30%;
|
||||
width: 30%;
|
||||
bottom: 32px;
|
||||
right: 4px;
|
||||
opacity: 1.0;
|
||||
transform: scale(-1, 1);
|
||||
-webkit-transform: scale(-1, 1);
|
||||
}
|
||||
#localVideo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
-webkit-transition-property: opacity;
|
||||
-webkit-transition-duration: 2s;
|
||||
}
|
||||
#remoteVideo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
-webkit-transition-property: opacity;
|
||||
-webkit-transition-duration: 2s;
|
||||
}
|
||||
#miniVideo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
-webkit-transition-property: opacity;
|
||||
-webkit-transition-duration: 2s;
|
||||
}
|
||||
#footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
background-color: #3F3F3F;
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 13px; font-weight: bold;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
#hangup {
|
||||
font-size: 13px; font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
width: 128px;
|
||||
height: 24px;
|
||||
background-color: #808080;
|
||||
border-style: solid;
|
||||
border-color: #FFFFFF;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
#infoDiv {
|
||||
position: absolute;
|
||||
float: right;
|
||||
background-color: grey;
|
||||
margin: 2px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -1,50 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>WebRTC Reference App</title>
|
||||
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
|
||||
|
||||
<link rel="canonical" href="{{ room_link }}"/>
|
||||
<link rel="stylesheet" href="css/main.css" />
|
||||
|
||||
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
|
||||
<script src="/js/main.js"></script>
|
||||
<!-- Load the polyfill to switch-hit between Chrome and Firefox -->
|
||||
<script src="/js/adapter.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
var channelToken = '{{ token }}';
|
||||
var me = '{{ me }}';
|
||||
var roomKey = '{{ room_key }}';
|
||||
var roomLink = '{{ room_link }}';
|
||||
var initiator = {{ initiator }};
|
||||
var pcConfig = {{ pc_config|safe }};
|
||||
var pcConstraints = {{ pc_constraints|safe }};
|
||||
var offerConstraints = {{ offer_constraints | safe }};
|
||||
var mediaConstraints = {{ media_constraints | safe }};
|
||||
var turnUrl = '{{ turn_url }}';
|
||||
var stereo = {{ stereo }};
|
||||
|
||||
setTimeout(initialize, 1);
|
||||
</script>
|
||||
<div id="container" ondblclick="enterFullScreen()">
|
||||
<div id="card">
|
||||
<div id="local">
|
||||
<video id="localVideo" autoplay="autoplay" muted="true"/>
|
||||
</div>
|
||||
<div id="remote">
|
||||
<video id="remoteVideo" autoplay="autoplay">
|
||||
</video>
|
||||
<div id="mini">
|
||||
<video id="miniVideo" autoplay="autoplay" muted="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer id="footer">
|
||||
</footer>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>WebRTC Reference App</title>
|
||||
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
|
||||
|
||||
<link rel="canonical" href="{{ room_link }}"/>
|
||||
<link rel="stylesheet" href="css/main.css" />
|
||||
|
||||
<script type="text/javascript" src="/_ah/channel/jsapi"></script>
|
||||
<script src="/js/main.js"></script>
|
||||
<!-- Load the polyfill to switch-hit between Chrome and Firefox -->
|
||||
<script src="/js/adapter.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript">
|
||||
var channelToken = '{{ token }}';
|
||||
var me = '{{ me }}';
|
||||
var roomKey = '{{ room_key }}';
|
||||
var roomLink = '{{ room_link }}';
|
||||
var initiator = {{ initiator }};
|
||||
var pcConfig = {{ pc_config|safe }};
|
||||
var pcConstraints = {{ pc_constraints|safe }};
|
||||
var offerConstraints = {{ offer_constraints | safe }};
|
||||
var mediaConstraints = {{ media_constraints | safe }};
|
||||
var turnUrl = '{{ turn_url }}';
|
||||
var stereo = {{ stereo }};
|
||||
|
||||
setTimeout(initialize, 1);
|
||||
</script>
|
||||
<div id="container" ondblclick="enterFullScreen()">
|
||||
<div id="card">
|
||||
<div id="local">
|
||||
<video id="localVideo" autoplay="autoplay" muted="true"/>
|
||||
</div>
|
||||
<div id="remote">
|
||||
<video id="remoteVideo" autoplay="autoplay">
|
||||
</video>
|
||||
<div id="mini">
|
||||
<video id="miniVideo" autoplay="autoplay" muted="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<footer id="footer">
|
||||
</footer>
|
||||
<div id="infoDiv"></div>
|
||||
</html>
|
||||
|
||||
@ -18,6 +18,8 @@
|
||||
'OfferToReceiveVideo': true }};
|
||||
var isVideoMuted = false;
|
||||
var isAudioMuted = false;
|
||||
// Types of gathered ICE Candidates.
|
||||
var gatheredIceCandidateTypes = { Local: {}, Remote: {} };
|
||||
|
||||
function initialize() {
|
||||
console.log('Initializing; room=' + roomKey + '.');
|
||||
@ -230,6 +232,7 @@
|
||||
} else if (message.type === 'candidate') {
|
||||
var candidate = new RTCIceCandidate({sdpMLineIndex: message.label,
|
||||
candidate: message.candidate});
|
||||
noteIceCandidate("Remote", iceCandidateType(message.candidate));
|
||||
pc.addIceCandidate(candidate);
|
||||
} else if (message.type === 'bye') {
|
||||
onRemoteHangup();
|
||||
@ -286,12 +289,23 @@
|
||||
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) {
|
||||
if (event.candidate) {
|
||||
sendMessage({type: 'candidate',
|
||||
label: event.candidate.sdpMLineIndex,
|
||||
id: event.candidate.sdpMid,
|
||||
candidate: event.candidate.candidate});
|
||||
noteIceCandidate("Local", iceCandidateType(event.candidate.candidate));
|
||||
} else {
|
||||
console.log('End of candidates.');
|
||||
}
|
||||
@ -379,6 +393,37 @@
|
||||
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() {
|
||||
// Call the getVideoTracks method via adapter.js.
|
||||
videoTracks = localStream.getVideoTracks();
|
||||
@ -427,28 +472,30 @@
|
||||
isAudioMuted = !isAudioMuted;
|
||||
}
|
||||
|
||||
// Ctrl-D: toggle audio mute; Ctrl-E: toggle video mute.
|
||||
// On Mac, Command key is instead of Ctrl.
|
||||
// Mac: hotkey is Command.
|
||||
// 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.
|
||||
document.onkeydown = function(event) {
|
||||
if (navigator.appVersion.indexOf('Mac') != -1) {
|
||||
if (event.metaKey && event.keyCode === 68) {
|
||||
var hotkey = event.ctrlKey;
|
||||
if (navigator.appVersion.indexOf('Mac') != -1)
|
||||
hotkey = event.metaKey;
|
||||
if (!hotkey)
|
||||
return;
|
||||
switch (event.keyCode) {
|
||||
case 68:
|
||||
toggleAudioMute();
|
||||
return false;
|
||||
}
|
||||
if (event.metaKey && event.keyCode === 69) {
|
||||
case 69:
|
||||
toggleVideoMute();
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
if (event.ctrlKey && event.keyCode === 68) {
|
||||
toggleAudioMute();
|
||||
case 73:
|
||||
toggleInfoDivDisplay();
|
||||
return false;
|
||||
}
|
||||
if (event.ctrlKey && event.keyCode === 69) {
|
||||
toggleVideoMute();
|
||||
return false;
|
||||
}
|
||||
default:
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user