rtc

commit

6ee6ad92613b1acd073a3b00e2add2220e4f104e

parent

573a072cb78c0d438d0534914a37a3191cc43242

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2020-03-26 10:15

ideal columns

Diffstat

2 files changed, 15 insertions, 1 deletions

diff --git a/www/rtc/rtc.css b/www/rtc/rtc.css

@@ -17,7 +17,7 @@ body {
   17    17 
   18    18 .rtc-videos {
   19    19 	display: grid;
   20    -1 	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   -1    20 	grid-template-columns: repeat(auto-fit, minmax(var(--video-width), 1fr));
   21    21 	align-content: center;
   22    22 	justify-items: center;
   23    23 	grid-gap: 1em;

diff --git a/www/rtc/rtc.js b/www/rtc/rtc.js

@@ -15,6 +15,16 @@
   15    15 	var localVideo = document.querySelector('.rtc-videos video.local');
   16    16 	localVideo.srcObject = new MediaStream();
   17    17 
   -1    18 	var updateIdealColumns = function() {
   -1    19 		// FIXME: container.clientHeight depends on content (on mobile) -> circular
   -1    20 		var items = container.children.length;
   -1    21 		var contentRatio = 6 / 4;
   -1    22 		var screenWidth = container.clientWidth;
   -1    23 		var screenHeight = container.clientHeight;
   -1    24 		var width = Math.sqrt(screenWidth * screenHeight / contentRatio / items);
   -1    25 		container.style.setProperty('--video-width', width + 'px');
   -1    26 	}
   -1    27 
   18    28 	var getConnection = function(sender) {
   19    29 		if (sender in cons) {
   20    30 			return cons[sender].con;
@@ -23,6 +33,7 @@
   23    33 		var video = document.createElement('video');
   24    34 		video.autoplay = true;
   25    35 		container.append(video);
   -1    36 		updateIdealColumns();
   26    37 
   27    38 		var con = new RTCPeerConnection({
   28    39 			iceServers: [{urls: 'stun:stun.l.google.com:19302'}]
@@ -209,4 +220,7 @@
  209   220 			console.log('unknown message', data);
  210   221 		}
  211   222 	});
   -1   223 
   -1   224 	updateIdealColumns();
   -1   225 	window.addEventListener('resize', updateIdealColumns);
  212   226 })();