$ git clone http://ion.nu/git/webchat
commit 98a32602dc740690eedaf5f91529b1b206a36896
Author: Alicia <...>
Date:   Sun Jan 3 01:16:00 2016 +0100

    Scale down and/or wrap cams to fit

diff --git a/cams.js b/cams.js
index 597c548..94a46c9 100644
--- a/cams.js
+++ b/cams.js
@@ -87,6 +87,7 @@ function broadcast_success(stream)
   };
   mediarec.start();
   mycam.interval=setInterval(function(){mediarec.requestData();}, 100);
+  adjustcamsizes();
 }
 function opencam(user)
 {
@@ -131,6 +132,7 @@ function opencam(user)
   document.getElementById('cams').appendChild(cam.cambox);
   cams.push(cam);
   showcams();
+  adjustcamsizes();
 }
 function handlecamdata(user, data)
 {
@@ -156,6 +158,7 @@ function closecam(user)
   cams.splice(cams.indexOf(cam), 1);
   // TODO: check that a video isn't playing
   if(cams.length==0){hidecams();}
+  adjustcamsizes();
 }
 function showcams()
 {
@@ -175,6 +178,35 @@ function hidecams()
   div=document.getElementById('userlist');
   setheightcalc(div, '100% - 30px');
 }
+function adjustcamsizes()
+{
+  var maxwidth=document.body.clientWidth;
+  var maxheight=Math.floor(document.body.clientHeight*0.6)-30;
+  var height=maxheight;
+  var width=maxheight/3*4;
+  var rows=1;
+  while(Math.ceil(cams.length/rows)*width>maxwidth)
+  {
+    var scaledwidth=Math.floor(maxwidth/Math.ceil(cams.length/rows));
+    var scaledheight=scaledwidth/4*3;
+    if(scaledheight*rows<maxheight-scaledheight) // If scaling by width leaves as much as a whole row empty, go with rows instead
+    {
+      ++rows;
+      height=maxheight/rows;
+      width=height/3*4;
+    }else{
+      width=scaledwidth;
+      height=scaledheight;
+    }
+  }
+  var i=0;
+  while(i<cams.length)
+  {
+    cams[i].cambox.style.height=height+'px';
+    cams[i].cambox.style.width=width+'px';
+    ++i;
+  }
+}
 // Compatibility...
 if(navigator.getUserMedia){}
 else if(navigator.webkitGetUserMedia){navigator.getUserMedia=navigator.webkitGetUserMedia;}
diff --git a/chat.php b/chat.php
index 4d416af..80fdfd0 100644
--- a/chat.php
+++ b/chat.php
@@ -10,7 +10,7 @@
   <script src="cams.js"></script>
   <link rel="stylesheet" type="text/css" href="chat.css" />
 </head>
-<body onload="init(&quot;<?php print($_GET['c']); ?>&quot;);" onfocus="unseenmessages=0; document.title='Chat (work in progress)';">
+<body onload="init(&quot;<?php print($_GET['c']); ?>&quot;);" onfocus="unseenmessages=0; document.title='Chat (work in progress)';" onresize="adjustcamsizes();">
   <div style="display:block; height:100%; width:100%;" onclick="handleclick();">
     <div class="cams" id="cams">
       <div id="videoplayer">