Permalink
Browse files

Modified website layout and disabled video audio by default to preven…

…t echo during local testing. Videos need a hover control for the audio.
  • Loading branch information...
1 parent 79b1a15 commit cab9299a9148665c4933fd720db6fa56f175694e @ajbogh committed Mar 26, 2014
Showing with 70 additions and 59 deletions.
  1. +14 −12 site/index.html
  2. +17 −12 site/script.js
  3. +39 −35 site/style.css
View
@@ -6,21 +6,23 @@
<script src="/webrtc.io.js"></script>
</head>
<body onload="init()">
- <div id="videos">
- <a href="https://github.com/webRTC"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
- <video id="you" class="flip" autoplay width="263" height="200" style="position: absolute; left: 0px; bottom: 0px;"></video>
- </div>
- <div id="chatbox">
- <div id="hideShowMessages" class="button">toggle chat</div>
- <div id="messages">
+
+ <div id="sidebar">
+ <div class="buttonBox">
+ <div id="fullscreen" class="button">Enter Full Screen</div>
+ <div id="newRoom" class="button">Create A New Room</div>
+ </div>
+ <video id="you" class="flip" autoplay></video>
+ <div id="chatbox">
+ <!--<div id="hideShowMessages" class="button">toggle chat</div>-->
+ <div id="messages">
+ </div>
+ <input id="chatinput" type="text" placeholder="Message:"/>
</div>
- <input id="chatinput" type="text" placeholder="Message:"/>
</div>
- <div class="buttonBox">
- <div id="fullscreen" class="button">Enter Full Screen</div>
- <div id="newRoom" class="button">Create A New Room</div>
- </div>
+
+ <div id="videos" class="clearfix"></div>
<script src="/script.js"></script>
</body>
View
@@ -3,6 +3,7 @@ var PeerConnection = window.PeerConnection || window.webkitPeerConnection00 || w
function getNumPerRow() {
var len = videos.length;
+ console.log("len", len);
var biggest;
// Ensure length is even for better division.
@@ -19,24 +20,24 @@ function getNumPerRow() {
function subdivideVideos() {
var perRow = getNumPerRow();
+ console.log("perRow", perRow);
var numInRow = 0;
for(var i = 0, len = videos.length; i < len; i++) {
var video = videos[i];
- setWH(video, i);
+ setWH(video, i, perRow);
numInRow = (numInRow + 1) % perRow;
}
}
-function setWH(video, i) {
- var perRow = getNumPerRow();
+function setWH(video, i, perRow) {
+ //var perRow = getNumPerRow();
var perColumn = Math.ceil(videos.length / perRow);
- var width = Math.floor((window.innerWidth) / perRow);
- var height = Math.floor((window.innerHeight - 190) / perColumn);
- video.width = width;
- video.height = height;
- video.style.position = "absolute";
- video.style.left = (i % perRow) * width + "px";
- video.style.top = Math.floor(i / perRow) * height + "px";
+ console.log("perColumn", perColumn);
+ var container = document.getElementById("videos");
+ console.log("container", container, container.clientWidth);
+ var width = Math.floor((container.clientWidth) / perRow);
+ var height = Math.floor((container.clientHeight) / perColumn);
+ video.style.width = width - (videos.length*2);
}
function cloneVideo(domId, socketId) {
@@ -49,10 +50,12 @@ function cloneVideo(domId, socketId) {
}
function removeVideo(socketId) {
+ console.log("Removing video");
var video = document.getElementById('remote' + socketId);
if(video) {
videos.splice(videos.indexOf(video), 1);
video.parentNode.removeChild(video);
+ subdivideVideos();
}
}
@@ -139,7 +142,7 @@ function initChat() {
var room = window.location.hash.slice(1);
var color = "#" + ((1 << 24) * Math.random() | 0).toString(16);
- toggleHideShow.addEventListener('click', function() {
+ /*toggleHideShow.addEventListener('click', function() {
var element = document.getElementById("messages");
if(element.style.display === "block") {
@@ -149,7 +152,7 @@ function initChat() {
element.style.display = "block";
}
- });
+ });*/
input.addEventListener('keydown', function(event) {
var key = event.which || event.keyCode;
@@ -181,6 +184,7 @@ function init() {
"audio": true
}, function(stream) {
document.getElementById('you').src = URL.createObjectURL(stream);
+ document.getElementById('you').muted = true; //prevent echo locally
document.getElementById('you').play();
//videos.push(document.getElementById('you'));
//rtc.attachStream(stream, 'you');
@@ -199,6 +203,7 @@ function init() {
console.log("ADDING REMOTE STREAM...");
var clone = cloneVideo('you', socketId);
document.getElementById(clone.id).setAttribute("class", "");
+ document.getElementById(clone.id).muted = true;
rtc.attachStream(stream, clone.id);
subdivideVideos();
});
View
@@ -1,3 +1,6 @@
+* {
+ box-sizing: border-box;
+}
html, body {
height: 100%;
}
@@ -9,31 +12,31 @@ html {
body {
padding: 0;
margin: 0;
- background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(238,238,238,0) 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(238,238,238,0)));
- background: -webkit-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,0) 100%);
- background: -o-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,0) 100%);
- background: -ms-linear-gradient(top, rgba(238,238,238,1) 0%,rgba(238,238,238,0) 100%);
- background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,0) 100%);
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#00eeeeee',GradientType=0 );
+ background: #000;
}
#videos {
- position: absolute;
- top: 0px;
- left: 0px;
- right: 0px;
- bottom: 0px;
- z-index: 0;
+ width: calc(100% - 400px);
}
-
-#chatbox {
- position: absolute;
- right: 20px;
- bottom: 0px;
- z-index: 1;
+#videos video {
+ float:left;
+}
+video {
+ margin: 2px;
+}
+#sidebar {
+ float:right;
+ width: 400px;
+}
+#you {
+ margin-left:auto;
+ margin-right:auto;
+ display:block;
+ height: 200px;
}
+#chatbox {}
+
#chatinput {
background: none repeat scroll 0 0 #F9F9F9;
border: 1px solid #CCCCCC;
@@ -43,7 +46,7 @@ body {
letter-spacing: 1px;
margin-bottom: 0px;
padding: 5px 10px;
- width: 277px;
+ width: 100%;
}
#messages {
@@ -52,33 +55,36 @@ body {
border: 1px solid #CCCCCC;
border-radius: 5px 5px 0px 0px;
font: 300 18px/40px 'light','Helvetica Neue',Arial,Helvetica,sans-serif;
- height: 400px;
letter-spacing: 1px;
margin-bottom: 0px;
padding: 5px 10px;
- width: 255px;
+ width: 395px;
+ height: calc(100% - 290px);
}
.flip {
--webkit-transform: rotateY(180deg);
+ -webkit-transform: rotateY(180deg);
+}
+
+.clearfix:after {
+ visibility: hidden;
+ display: block;
+ font-size: 0;
+ content: "";
+ clear: both;
+ height: 0;
}
.buttonBox {
- position: absolute;
- top: 2px;
- left: 2px;
- z-index: 1;
+ height: 40px;
+ padding-top: 4px;
+ padding-bottom: 4px;
}
.button {
- -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
- -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
- background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
+ background:linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
background-color:#ededed;
- -moz-border-radius:6px;
- -webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
@@ -90,11 +96,9 @@ body {
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
-
.button:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.button:active {

0 comments on commit cab9299

Please sign in to comment.