+Please allow the camera or microphone +access to use this app. ++
π΄ REC 0s
-π΄ REC 0s
Share this meeting invite others to join.
-` + +
Share this meeting invite others to join.
+` + RoomURL + `
`, showDenyButton: true, @@ -323,12 +308,13 @@ async function shareRoom(useNavigator = false) { // #################################################### function makeRoomQR() { + let qrSize = DetectRTC.isMobileDevice ? 128 : 256; let qr = new QRious({ element: document.getElementById('qrRoom'), value: RoomURL, }); qr.set({ - size: 256, + size: qrSize, }); } @@ -359,9 +345,8 @@ function joinRoom(peer_name, room_id) { } else { console.log('05 ----> join to Room ' + room_id); rc = new RoomClient( - localMedia, - remoteVideos, remoteAudios, + videoMediaContainer, window.mediasoupClient, socket, room_id, @@ -379,7 +364,7 @@ function joinRoom(peer_name, room_id) { } function roomIsReady() { - control.className = ''; + show(openNavButton); show(exitButton); show(shareButton); show(recButton); @@ -402,10 +387,9 @@ function roomIsReady() { }; show(fullScreenButton); } - show(devicesButton); + show(settingsButton); if (isAudioAllowed) show(startAudioButton); if (isVideoAllowed) show(startVideoButton); - show(videoMedia); show(participantsButton); show(lockRoomButton); show(aboutButton); @@ -423,6 +407,10 @@ function show(elem) { elem.className = ''; } +function setColor(elem, color) { + elem.style.color = color; +} + // #################################################### // SET CHAT MOBILE // #################################################### @@ -441,7 +429,7 @@ function startSessionTimer() { let callStartTime = Date.now(); setInterval(function printTime() { let callElapsedTime = Date.now() - callStartTime; - sessionTime.innerHTML = getTimeToString(callElapsedTime); + sessionTime.innerHTML = ' ' + getTimeToString(callElapsedTime); }, 1000); } @@ -491,13 +479,19 @@ function stopRecordingTimer() { // #################################################### function handleButtons() { + openNavButton.onclick = () => { + openNav(); + }; + closeNavButton.onclick = () => { + closeNav(); + }; exitButton.onclick = () => { rc.exit(); }; shareButton.onclick = () => { shareRoom(true); }; - devicesButton.onclick = () => { + settingsButton.onclick = () => { rc.toggleDevices(); }; chatButton.onclick = () => { @@ -584,7 +578,7 @@ function handleSelects() { rc.closeThenProduce(RoomClient.mediaType.audio, microphoneSelect.value); }; speakerSelect.onchange = () => { - rc.attachSinkId(localMedia, speakerSelect.value); + rc.attachSinkId(rc.myVideoEl, speakerSelect.value); }; videoSelect.onchange = () => { rc.closeThenProduce(RoomClient.mediaType.video, videoSelect.value); @@ -614,20 +608,24 @@ function handleInputs() { function handleRoomClientEvents() { rc.on(RoomClient.EVENTS.startRec, () => { + console.log('Room Client start recoding'); hide(startRecButton); show(stopRecButton); show(pauseRecButton); startRecordingTimer(); }); rc.on(RoomClient.EVENTS.pauseRec, () => { + console.log('Room Client pause recoding'); hide(pauseRecButton); show(resumeRecButton); }); rc.on(RoomClient.EVENTS.resumeRec, () => { + console.log('Room Client resume recoding'); hide(resumeRecButton); show(pauseRecButton); }); rc.on(RoomClient.EVENTS.stopRec, () => { + console.log('Room Client stop recoding'); hide(stopRecButton); hide(pauseRecButton); hide(resumeRecButton); @@ -635,8 +633,10 @@ function handleRoomClientEvents() { stopRecordingTimer(); }); rc.on(RoomClient.EVENTS.startAudio, () => { + console.log('Room Client start audio'); hide(startAudioButton); show(stopAudioButton); + setColor(startAudioButton, 'red'); }); rc.on(RoomClient.EVENTS.pauseAudio, () => { console.log('Room Client pause audio'); @@ -649,12 +649,15 @@ function handleRoomClientEvents() { show(stopAudioButton); }); rc.on(RoomClient.EVENTS.stopAudio, () => { + console.log('Room Client stop audio'); hide(stopAudioButton); show(startAudioButton); }); rc.on(RoomClient.EVENTS.startVideo, () => { + console.log('Room Client start video'); hide(startVideoButton); show(stopVideoButton); + setColor(startVideoButton, 'red'); }); rc.on(RoomClient.EVENTS.pauseVideo, () => { console.log('Room Client pause video'); @@ -667,10 +670,12 @@ function handleRoomClientEvents() { show(stopVideoButton); }); rc.on(RoomClient.EVENTS.stopVideo, () => { + console.log('Room Client stop audio'); hide(stopVideoButton); show(startVideoButton); }); rc.on(RoomClient.EVENTS.startScreen, () => { + console.log('Room Client start screen'); hide(startScreenButton); show(stopScreenButton); }); @@ -681,22 +686,35 @@ function handleRoomClientEvents() { console.log('Room Client resume screen'); }); rc.on(RoomClient.EVENTS.stopScreen, () => { + console.log('Room Client stop screen'); hide(stopScreenButton); show(startScreenButton); }); rc.on(RoomClient.EVENTS.roomLock, () => { + console.log('Room Client lock room'); hide(lockRoomButton); show(unlockRoomButton); + setColor(unlockRoomButton, 'red'); }); rc.on(RoomClient.EVENTS.roomUnlock, () => { + console.log('Room Client unlock room'); hide(unlockRoomButton); show(lockRoomButton); }); rc.on(RoomClient.EVENTS.exitRoom, () => { + console.log('Room Client leave room'); window.location.href = '/newroom'; }); } +function openNav() { + control.classList.toggle('show'); +} + +function closeNav() { + control.classList.toggle('show'); +} + // #################################################### // SHOW LOG // #################################################### @@ -746,8 +764,14 @@ async function getRoomParticipants() { let peer_name = peer_info.peer_name; let peer_id = peer_info.peer_id; rc.peer_id === peer_id - ? (table += `