- commit
- 495db04cefe8c45ae7ebfa408d0b879b9bb41494
- parent
- c244fd563ad9f85ef7c48dafbe296f5b112c2227
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2020-04-03 19:35
split chat and controls into separate modules
Diffstat
| A | www/chat.js | 24 | ++++++++++++++++++++++++ |
| A | www/controls.js | 89 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| M | www/rtc.js | 125 | +++++-------------------------------------------------------- |
3 files changed, 123 insertions, 115 deletions
diff --git a/www/chat.js b/www/chat.js
@@ -0,0 +1,24 @@
-1 1 import * as signal from './signal.js';
-1 2
-1 3 var history = document.querySelector('.chat-history');
-1 4 var form = document.querySelector('.chat-form');
-1 5
-1 6 export var init = function(room, queue) {
-1 7 form.addEventListener('submit', function(event) {
-1 8 var input = event.target.msg;
-1 9 event.preventDefault();
-1 10 if (!input.value) {
-1 11 return;
-1 12 }
-1 13 signal.post(room, {sender: queue, type: 'chat', text: input.value}).then(function() {
-1 14 input.value = '';
-1 15 });
-1 16 });
-1 17 };
-1 18
-1 19 export var addMsg = function(sender, msg) {
-1 20 var li = document.createElement('li');
-1 21 li.textContent = msg;
-1 22 history.append(li);
-1 23 history.scrollTop = history.scrollHeight;
-1 24 };
diff --git a/www/controls.js b/www/controls.js
@@ -0,0 +1,89 @@
-1 1 export var init = function(localVideo, cons) {
-1 2 var controls = document.querySelector('.rtc-controls');
-1 3
-1 4 var updateConnections = function() {
-1 5 var sender;
-1 6 var tracks = localVideo.srcObject.getTracks();
-1 7
-1 8 for (sender in cons) {
-1 9 var con = cons[sender].con;
-1 10
-1 11 con.getSenders().forEach(s => {
-1 12 con.removeTrack(s);
-1 13 });
-1 14
-1 15 tracks.forEach(track => {
-1 16 con.addTrack(track, localVideo.srcObject);
-1 17 });
-1 18 }
-1 19 };
-1 20
-1 21 var updateStreams = async function(event) {
-1 22 var tracks = localVideo.srcObject.getTracks();
-1 23 var kind = event.target.name === 'audio' ? 'audio' : 'video';
-1 24
-1 25 if (!event.target.checked) {
-1 26 tracks.forEach(track => {
-1 27 if (track.kind === kind) {
-1 28 track.enabled = false;
-1 29 }
-1 30 });
-1 31 } else if (
-1 32 tracks.filter(t => t.kind === kind).length &&
-1 33 !(controls.video.checked && controls.screen.checked)
-1 34 ) {
-1 35 tracks.forEach(track => {
-1 36 if (track.kind === kind) {
-1 37 track.enabled = true;
-1 38 }
-1 39 });
-1 40 } else {
-1 41 var newStream = new MediaStream();
-1 42 var stream;
-1 43 try {
-1 44 if (event.target.name === 'screen') {
-1 45 stream = await navigator.mediaDevices.getDisplayMedia();
-1 46 } else {
-1 47 stream = await navigator.mediaDevices.getUserMedia({[kind]: true});
-1 48 }
-1 49 } catch (err) {
-1 50 event.target.checked = false;
-1 51 return;
-1 52 }
-1 53
-1 54 if (event.target.name === 'video') {
-1 55 controls.screen.checked = false;
-1 56 localVideo.classList.add('mirrored');
-1 57 } else if (event.target.name === 'screen') {
-1 58 controls.video.checked = false;
-1 59 localVideo.classList.remove('mirrored');
-1 60 }
-1 61
-1 62 tracks.forEach(track => {
-1 63 if (track.kind === kind) {
-1 64 track.stop();
-1 65 } else {
-1 66 newStream.addTrack(track);
-1 67 }
-1 68 });
-1 69 stream.getTracks().forEach(track => {
-1 70 newStream.addTrack(track);
-1 71 });
-1 72
-1 73 localVideo.srcObject = newStream;
-1 74 updateConnections();
-1 75 }
-1 76 };
-1 77
-1 78 controls.addEventListener('change', updateStreams);
-1 79
-1 80 navigator.mediaDevices.enumerateDevices().then(devices => {
-1 81 devices.forEach(device => {
-1 82 if (device.kind === 'audioinput') {
-1 83 controls.audio.disabled = false;
-1 84 } else if (device.kind === 'videoinput') {
-1 85 controls.video.disabled = false;
-1 86 }
-1 87 });
-1 88 });
-1 89 };
diff --git a/www/rtc.js b/www/rtc.js
@@ -1,6 +1,8 @@ 1 1 /* eslint no-console: "off" */ 2 2 3 3 import * as signal from './signal.js'; -1 4 import * as chat from './chat.js'; -1 5 import * as controls from './controls.js'; 4 6 5 7 // https://webrtc.github.io/samples/ 6 8 // https://www.html5rocks.com/en/tutorials/webrtc/basics/ @@ -115,115 +117,9 @@ signal.listen(queue + ':' + queuePassword, function(msg) { 115 117 } 116 118 }); 117 119118 -1 signal.post(room, {sender: queue, type: 'announce'});119 -1120 -1 window.addEventListener('beforeunload', function() {121 -1 signal.beacon(room, {sender: queue, type: 'leave'});122 -1 });123 -1124 -1 var updateConnections = function() {125 -1 var sender;126 -1 var tracks = localVideo.srcObject.getTracks();127 -1128 -1 for (sender in cons) {129 -1 var con = cons[sender].con;130 -1131 -1 con.getSenders().forEach(s => {132 -1 con.removeTrack(s);133 -1 });134 -1135 -1 tracks.forEach(track => {136 -1 con.addTrack(track, localVideo.srcObject);137 -1 });138 -1 }139 -1 };140 -1141 -1 var controls = document.querySelector('.rtc-controls');142 -1143 -1 var updateStreams = async function(event) {144 -1 var tracks = localVideo.srcObject.getTracks();145 -1 var kind = event.target.name === 'audio' ? 'audio' : 'video';146 -1147 -1 if (!event.target.checked) {148 -1 tracks.forEach(track => {149 -1 if (track.kind === kind) {150 -1 track.enabled = false;151 -1 }152 -1 });153 -1 } else if (154 -1 tracks.filter(t => t.kind === kind).length &&155 -1 !(controls.video.checked && controls.screen.checked)156 -1 ) {157 -1 tracks.forEach(track => {158 -1 if (track.kind === kind) {159 -1 track.enabled = true;160 -1 }161 -1 });162 -1 } else {163 -1 var newStream = new MediaStream();164 -1 var stream;165 -1 try {166 -1 if (event.target.name === 'screen') {167 -1 stream = await navigator.mediaDevices.getDisplayMedia();168 -1 } else {169 -1 stream = await navigator.mediaDevices.getUserMedia({[kind]: true});170 -1 }171 -1 } catch (err) {172 -1 event.target.checked = false;173 -1 return;174 -1 }175 -1176 -1 if (event.target.name === 'video') {177 -1 controls.screen.checked = false;178 -1 localVideo.classList.add('mirrored');179 -1 } else if (event.target.name === 'screen') {180 -1 controls.video.checked = false;181 -1 localVideo.classList.remove('mirrored');182 -1 }183 -1184 -1 tracks.forEach(track => {185 -1 if (track.kind === kind) {186 -1 track.stop();187 -1 } else {188 -1 newStream.addTrack(track);189 -1 }190 -1 });191 -1 stream.getTracks().forEach(track => {192 -1 newStream.addTrack(track);193 -1 });194 -1195 -1 localVideo.srcObject = newStream;196 -1 updateConnections();197 -1 }198 -1 };199 -1200 -1 document.querySelector('.rtc-controls').addEventListener('change', updateStreams);201 -1202 -1203 -1 var history = document.querySelector('.chat-history');204 -1 var form = document.querySelector('.chat-form');205 -1206 -1 form.addEventListener('submit', function(event) {207 -1 var input = event.target.msg;208 -1 event.preventDefault();209 -1 if (!input.value) {210 -1 return;211 -1 }212 -1 signal.post(room, {sender: queue, type: 'chat', text: input.value}).then(function() {213 -1 input.value = '';214 -1 });215 -1 });216 -1217 -1 var addChatMsg = function(sender, msg) {218 -1 var li = document.createElement('li');219 -1 li.textContent = msg;220 -1 history.append(li);221 -1 history.scrollTop = history.scrollHeight;222 -1 };223 -1224 120 signal.listen(room, function(msg) { 225 121 if (msg.type === 'chat') {226 -1 addChatMsg(msg.sender, msg.text);-1 122 chat.addMsg(msg.sender, msg.text); 227 123 } else if (msg.type === 'announce') { 228 124 makeOffer(msg.sender); 229 125 } else if (msg.type === 'leave') { @@ -233,12 +129,11 @@ signal.listen(room, function(msg) { 233 129 } 234 130 }); 235 131236 -1 navigator.mediaDevices.enumerateDevices().then(devices => {237 -1 devices.forEach(device => {238 -1 if (device.kind === 'audioinput') {239 -1 document.querySelector('.rtc-controls [name="audio"]').disabled = false;240 -1 } else if (device.kind === 'videoinput') {241 -1 document.querySelector('.rtc-controls [name="video"]').disabled = false;242 -1 }243 -1 });-1 132 window.addEventListener('beforeunload', function() { -1 133 signal.beacon(room, {sender: queue, type: 'leave'}); 244 134 }); -1 135 -1 136 chat.init(room, queue); -1 137 controls.init(localVideo, cons); -1 138 -1 139 signal.post(room, {sender: queue, type: 'announce'});