rtc: minimal webrtc client - merge chat into rtc

commit: 573a072cb78c0d438d0534914a37a3191cc43242
parent: 6d3a016de7ada4eb291bb326f40e97763922fc7b
Author: Tobias Bengfort <tobias.bengfort@posteo.de>
Date: 2020-03-26 10:14

merge chat into rtc

Diffstat

D	www/chat/chat.css	36	------------------------------------
D	www/chat/chat.js	29	-----------------------------
D	www/chat/index.html	23	-----------------------
M	www/rtc/index.html	13	++++++++++---
M	www/rtc/rtc.css	58	+++++++++++++++++++++++++++++++++++++++++++++++++++++-----
M	www/rtc/rtc.js	64	+++++++++++++++++++++++++++++++++++++++++++++---------------

6 files changed, 111 insertions, 112 deletions

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

@@ -1,36 +0,0 @@
    1    -1 body {
    2    -1 	max-width: 30em;
    3    -1 }
    4    -1 
    5    -1 .chat {
    6    -1 	display: grid;
    7    -1 	grid-template-rows: 1fr min-content;
    8    -1 	grid-gap: 1em;
    9    -1 	min-height: calc(100vh - 2em);
   10    -1 }
   11    -1 
   12    -1 .history {
   13    -1 	flex-grow: 1;
   14    -1 	width: 100%;
   15    -1 	overflow: auto;
   16    -1 	margin: 0;
   17    -1 	padding: 0;
   18    -1 }
   19    -1 
   20    -1 .history li {
   21    -1 	display: block;
   22    -1 	margin: 1em 0;
   23    -1 }
   24    -1 
   25    -1 .form {
   26    -1 	display: grid;
   27    -1 	grid-template-columns: 1fr min-content;
   28    -1 	grid-gap: 1em;
   29    -1 }
   30    -1 
   31    -1 @media (min-width: 30em) {
   32    -1 	.chat {
   33    -1 		padding: 1em;
   34    -1 		border: 1px solid #aaa;
   35    -1 	}
   36    -1 }

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

@@ -1,29 +0,0 @@
    1    -1 (function() {
    2    -1 	// TODO: nicks
    3    -1 
    4    -1 	var url = location.hash.substr(1);
    5    -1 
    6    -1 	var history = document.querySelector('.history');
    7    -1 	var form = document.querySelector('.form');
    8    -1 	var input = document.querySelector('.form input');
    9    -1 
   10    -1 	form.addEventListener('submit', function(event) {
   11    -1 		event.preventDefault();
   12    -1 		if (!input.value) {
   13    -1 			return;
   14    -1 		}
   15    -1 		patch.post(url, input.value).then(function() {
   16    -1 			input.value = '';
   17    -1 		});
   18    -1 	});
   19    -1 
   20    -1 	patch.listen(url, function(data) {
   21    -1 		var li = document.createElement('li');
   22    -1 		li.textContent = data;
   23    -1 		var scrolledToBottom = history.scrollTop + history.offsetHeight === history.scrollHeight;
   24    -1 		history.append(li);
   25    -1 		if (scrolledToBottom) {
   26    -1 			history.scrollTop = history.scrollHeight;
   27    -1 		}
   28    -1 	});
   29    -1 })();

diff --git a/www/chat/index.html b/www/chat/index.html

@@ -1,23 +0,0 @@
    1    -1 <!DOCTYPE html>
    2    -1 <html>
    3    -1 <head>
    4    -1 	<meta charset="utf-8" />
    5    -1 	<title>duct chat</title>
    6    -1 	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src https://patchbay.pub">
    7    -1 	<link rel="stylesheet" href="../common.css">
    8    -1 	<link rel="stylesheet" href="chat.css">
    9    -1 </head>
   10    -1 <body>
   11    -1 	<div class="chat">
   12    -1 		<ul class="history">
   13    -1 		</ul>
   14    -1 		<form method="get" class="form">
   15    -1 			<input autofocus>
   16    -1 			<button>Send</button>
   17    -1 		</form>
   18    -1 	</div>
   19    -1 	<script src="../patch.js"></script>
   20    -1 	<script src="chat.js"></script>
   21    -1 </body>
   22    -1 </html>
   23    -1

diff --git a/www/rtc/index.html b/www/rtc/index.html

@@ -9,10 +9,10 @@
    9     9 </head>
   10    10 <body>
   11    11 	<div class="rtc">
   12    -1 		<div class="videos">
   -1    12 		<div class="rtc-videos">
   13    13 			<video class="local" autoplay muted></video>
   14    14 		</div>
   15    -1 		<div class="controls">
   -1    15 		<div class="rtc-controls">
   16    16 			<label class="toggle">
   17    17 				<input type="checkbox" name="audio" autocomplete="off">
   18    18 				<span class="btn">Audio</span>
@@ -27,8 +27,15 @@
   27    27 			</label>
   28    28 		</div>
   29    29 	</div>
   -1    30 	<div class="chat">
   -1    31 		<ul class="chat-history">
   -1    32 		</ul>
   -1    33 		<form method="get" class="chat-form">
   -1    34 			<input name="msg" autocomplete="off">
   -1    35 			<button>Send</button>
   -1    36 		</form>
   -1    37 	</div>
   30    38 	<script src="../patch.js"></script>
   31    39 	<script src="rtc.js"></script>
   32    40 </body>
   33    41 </html>
   34    -1

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

@@ -1,26 +1,74 @@
    1     1 body {
    2    -1 	text-align: center;
   -1     2 	display: grid;
   -1     3 	grid-template-rows: 12em minmax(12em, auto);
   -1     4 	grid-gap: 1em;
   -1     5 	height: 100vh;
    3     6 }
    4     7 
    5     8 .rtc {
    6     9 	display: grid;
    7    10 	grid-template-rows: 1fr min-content;
    8    11 	grid-gap: 1em;
    9    -1 	min-height: calc(100vh - 2em);
   10    12 }
   11    13 
   12    -1 .videos {
   -1    14 .rtc-controls {
   -1    15 	text-align: center;
   -1    16 }
   -1    17 
   -1    18 .rtc-videos {
   13    19 	display: grid;
   14    20 	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   15    21 	align-content: center;
   -1    22 	justify-items: center;
   16    23 	grid-gap: 1em;
   -1    24 	flex-grow: 1;
   -1    25 	flex-shrink: 1;
   -1    26 	/* video may overflow */
   -1    27 	/* overflow: hidden; */
   -1    28 	min-height: 5em;
   17    29 }
   18    30 
   19    -1 video {
   -1    31 .rtc-videos video {
   20    32 	background-color: black;
   21    33 	width: 100%;
   22    -1 	max-height: 80vh;
   23    34 }
   -1    35 
   24    36 video.mirrored {
   25    37 	transform: scale(-1, 1);
   26    38 }
   -1    39 
   -1    40 .chat {
   -1    41 	display: grid;
   -1    42 	grid-template-rows: 1fr min-content;
   -1    43 	grid-gap: 1em;
   -1    44 	padding: 1em;
   -1    45 	border: 1px solid #aaa;
   -1    46 	min-width: 18em;
   -1    47 }
   -1    48 
   -1    49 .chat-history {
   -1    50 	width: 100%;
   -1    51 	overflow: auto;
   -1    52 	margin: 0;
   -1    53 	padding: 0;
   -1    54 	margin-bottom: 1em;
   -1    55 	min-height: 8em;
   -1    56 }
   -1    57 
   -1    58 .chat-history li {
   -1    59 	display: block;
   -1    60 	margin: 1em 0;
   -1    61 }
   -1    62 
   -1    63 .chat-form {
   -1    64 	display: grid;
   -1    65 	grid-template-columns: 1fr min-content;
   -1    66 	grid-gap: 1em;
   -1    67 }
   -1    68 
   -1    69 @media (min-width: 40em) {
   -1    70 	body {
   -1    71 		grid-template-columns: 3fr minmax(min-content, 1fr);
   -1    72 		grid-template-rows: calc(100vh - 2em);
   -1    73 	}
   -1    74 }

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

@@ -9,10 +9,10 @@
    9     9 	var queue = patch.randomString(10);
   10    10 	console.log('own queue', queue);
   11    11 
   12    -1 	var container = document.querySelector('.videos');
   -1    12 	var container = document.querySelector('.rtc-videos');
   13    13 	var cons = {};
   14    14 
   15    -1 	var localVideo = document.querySelector('video.local');
   -1    15 	var localVideo = document.querySelector('.rtc-videos video.local');
   16    16 	localVideo.srcObject = new MediaStream();
   17    17 
   18    18 	var getConnection = function(sender) {
@@ -91,10 +91,6 @@
   91    91 		con.addIceCandidate(candidate);
   92    92 	};
   93    93 
   94    -1 	patch.listen(room, function(data) {
   95    -1 		makeOffer(data);
   96    -1 	});
   97    -1 
   98    94 	patch.listen(queue, function(data) {
   99    95 		var sender = data.sender;
  100    96 		var data = data.data;
@@ -110,7 +106,7 @@
  110   106 		console.log('unknown message', data);
  111   107 	});
  112   108 
  113    -1 	patch.post(room, queue);
   -1   109 	patch.post(room, {type: 'announce', key: queue});
  114   110 
  115   111 	var updateConnections = function() {
  116   112 		var sender, c;
@@ -144,16 +140,9 @@
  144   140 			getStream = () => navigator.mediaDevices.getDisplayMedia();
  145   141 		}
  146   142 
  147    -1 		localVideo.srcObject.getTracks().forEach(track => {
  148    -1 			if (track.kind === kind) {
  149    -1 				track.stop();
  150    -1 			} else {
  151    -1 				newStream.addTrack(track);
  152    -1 			}
  153    -1 		});
  154    -1 
  155   143 		if (event.target.checked) {
  156   144 			try {
   -1   145 				// try this first thing so it can fail without breaking anything
  157   146 				var stream = await getStream();
  158   147 			} catch {
  159   148 				event.target.checked = false;
@@ -164,6 +153,14 @@
  164   153 			});
  165   154 		}
  166   155 
   -1   156 		localVideo.srcObject.getTracks().forEach(track => {
   -1   157 			if (track.kind === kind) {
   -1   158 				track.stop();
   -1   159 			} else {
   -1   160 				newStream.addTrack(track);
   -1   161 			}
   -1   162 		});
   -1   163 
  167   164 		if (event.target.name === 'video') {
  168   165 			localVideo.classList.add('mirrored');
  169   166 			document.querySelector('[name="screen"]').checked = false;
@@ -176,5 +173,40 @@
  176   173 		updateConnections();
  177   174 	};
  178   175 
  179    -1 	document.addEventListener('change', updateStreams);
   -1   176 	document.querySelector('.rtc-controls').addEventListener('change', updateStreams);
   -1   177 
   -1   178 
   -1   179 	var history = document.querySelector('.chat-history');
   -1   180 	var form = document.querySelector('.chat-form');
   -1   181 
   -1   182 	form.addEventListener('submit', function(event) {
   -1   183 		var input = event.target.msg;
   -1   184 		event.preventDefault();
   -1   185 		if (!input.value) {
   -1   186 			return;
   -1   187 		}
   -1   188 		patch.post(room, {type: 'chat', msg: input.value}).then(function() {
   -1   189 			input.value = '';
   -1   190 		});
   -1   191 	});
   -1   192 
   -1   193 	var addChatMsg = function(msg) {
   -1   194 		var li = document.createElement('li');
   -1   195 		li.textContent = msg;
   -1   196 		var scrolledToBottom = history.scrollTop + history.offsetHeight === history.scrollHeight;
   -1   197 		history.append(li);
   -1   198 		if (scrolledToBottom) {
   -1   199 			history.scrollTop = history.scrollHeight;
   -1   200 		}
   -1   201 	};
   -1   202 
   -1   203 	patch.listen(room, function(data) {
   -1   204 		if (data.type === 'chat') {
   -1   205 			addChatMsg(data.msg);
   -1   206 		} else if (data.type === 'announce') {
   -1   207 			makeOffer(data.key);
   -1   208 		} else {
   -1   209 			console.log('unknown message', data);
   -1   210 		}
   -1   211 	});
  180   212 })();