rtc

minimal webrtc client
git clone https://git.ce9e.org/rtc.git

commit
59abee892ace482053660c49fe69758faf6d19e8
parent
94492af9105b9296fc7e45355a9469dc304caf30
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2020-04-01 06:39
do not require consent to mute

Diffstat

M www/rtc/index.html 4 ++--
M www/rtc/rtc.js 70 +++++++++++++++++++++++++++++++++++++------------------------

2 files changed, 45 insertions, 29 deletions


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

@@ -13,7 +13,7 @@
   13    13 		<div class="rtc-videos">
   14    14 			<video class="local" autoplay muted></video>
   15    15 		</div>
   16    -1 		<div class="rtc-controls">
   -1    16 		<form class="rtc-controls">
   17    17 			<label class="toggle">
   18    18 				<input type="checkbox" name="audio" autocomplete="off" disabled>
   19    19 				<span class="btn">Audio</span>
@@ -26,7 +26,7 @@
   26    26 				<input type="checkbox" name="screen" autocomplete="off">
   27    27 				<span class="btn">Screen</span>
   28    28 			</label>
   29    -1 		</div>
   -1    29 		</form>
   30    30 	</div>
   31    31 	<div class="chat">
   32    32 		<ul class="chat-history">

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

@@ -138,50 +138,66 @@
  138   138 		}
  139   139 	};
  140   140 
   -1   141 	var controls = document.querySelector('.rtc-controls');
   -1   142 
  141   143 	var updateStreams = async function(event) {
  142   144 		var newStream = new MediaStream();
  143    -1 		var kind;
  144    -1 		var getStream;
  145    -1 
  146    -1 		if (event.target.name === 'audio') {
  147    -1 			kind = 'audio';
  148    -1 			getStream = () => navigator.mediaDevices.getUserMedia({audio: true});
  149    -1 		} else if (event.target.name === 'video') {
  150    -1 			kind = 'video';
  151    -1 			getStream = () => navigator.mediaDevices.getUserMedia({video: true});
  152    -1 		} else {
  153    -1 			kind = 'video';
  154    -1 			getStream = () => navigator.mediaDevices.getDisplayMedia();
  155    -1 		}
   -1   145 		var kind = event.target.name === 'screen' ? 'video' : event.target.name;
   -1   146 		var stream;
  156   147 
  157    -1 		if (event.target.checked) {
  158    -1 			var stream;
   -1   148 		if (controls.video.checked && controls.screen.checked) {
  159   149 			try {
  160    -1 				// try this first thing so it can fail without breaking anything
  161    -1 				stream = await getStream();
   -1   150 				if (event.target.name === 'screen') {
   -1   151 					stream = await navigator.mediaDevices.getDisplayMedia();
   -1   152 					controls.video.checked = false;
   -1   153 				} else {
   -1   154 					stream = await navigator.mediaDevices.getUserMedia({video: true});
   -1   155 					controls.screen.checked = false;
   -1   156 				}
  162   157 			} catch (err) {
  163   158 				event.target.checked = false;
  164   159 				return;
  165   160 			}
  166    -1 			stream.getTracks().forEach(track => {
  167    -1 				newStream.addTrack(track);
  168    -1 			});
  169    -1 		}
  170   161 
  171    -1 		localVideo.srcObject.getTracks().forEach(track => {
  172    -1 			if (track.kind === kind) {
   -1   162 			localVideo.srcObject.getVideoTracks().forEach(track => {
  173   163 				track.stop();
  174    -1 			} else {
   -1   164 			});
   -1   165 			localVideo.srcObject.getAudioTracks().forEach(track => {
  175   166 				newStream.addTrack(track);
   -1   167 			});
   -1   168 			stream.getVideoTracks().forEach(track => {
   -1   169 				newStream.addTrack(track);
   -1   170 			});
   -1   171 		} else {
   -1   172 			var exists = false;
   -1   173 			localVideo.srcObject.getTracks().forEach(track => {
   -1   174 				newStream.addTrack(track);
   -1   175 				if (track.kind === kind) {
   -1   176 					track.enabled = event.target.checked;
   -1   177 					exists = true;
   -1   178 				}
   -1   179 			});
   -1   180 			if (!exists && event.target.checked) {
   -1   181 				try {
   -1   182 					if (event.target.name === 'screen') {
   -1   183 						stream = await navigator.mediaDevices.getDisplayMedia();
   -1   184 					} else {
   -1   185 						stream = await navigator.mediaDevices.getUserMedia({[kind]: true});
   -1   186 					}
   -1   187 				} catch (err) {
   -1   188 					event.target.checked = false;
   -1   189 					return;
   -1   190 				}
   -1   191 				stream.getTracks().forEach(track => {
   -1   192 					newStream.addTrack(track);
   -1   193 				});
  176   194 			}
  177    -1 		});
   -1   195 		}
  178   196 
  179   197 		if (event.target.name === 'video') {
  180   198 			localVideo.classList.add('mirrored');
  181    -1 			document.querySelector('[name="screen"]').checked = false;
  182   199 		} else if (event.target.name === 'screen') {
  183   200 			localVideo.classList.remove('mirrored');
  184    -1 			document.querySelector('[name="video"]').checked = false;
  185   201 		}
  186   202 
  187   203 		localVideo.srcObject = newStream;