From 6743aa376db086e23affc910b7c84658f86c886c Mon Sep 17 00:00:00 2001 From: Dhruv Jain Date: Thu, 12 Aug 2021 08:47:23 +0530 Subject: [PATCH 01/14] [NEW] Control Buttons - mic, cam, expand and end call --- app/webrtc/client/WebRTCClass.js | 64 +++++++++----------- client/views/meet/CallPage.css | 11 ++++ client/views/meet/CallPage.js | 70 ++++++++++++++++++++-- client/views/meet/MeetPage.js | 2 + packages/rocketchat-i18n/i18n/en.i18n.json | 9 ++- 5 files changed, 113 insertions(+), 43 deletions(-) create mode 100644 client/views/meet/CallPage.css diff --git a/app/webrtc/client/WebRTCClass.js b/app/webrtc/client/WebRTCClass.js index def834495a262..96e0012abd1d5 100644 --- a/app/webrtc/client/WebRTCClass.js +++ b/app/webrtc/client/WebRTCClass.js @@ -145,8 +145,8 @@ class WebRTCClass { this.remoteItems = new ReactiveVar([]); this.remoteItemsById = new ReactiveVar({}); this.callInProgress = new ReactiveVar(false); - this.audioEnabled = new ReactiveVar(true); - this.videoEnabled = new ReactiveVar(true); + this.audioEnabled = new ReactiveVar(false); + this.videoEnabled = new ReactiveVar(false); this.overlayEnabled = new ReactiveVar(false); this.screenShareEnabled = new ReactiveVar(false); this.localUrl = new ReactiveVar(); @@ -169,7 +169,7 @@ class WebRTCClass { this.screenShareAvailable = ['chrome', 'firefox', 'electron'].includes(this.navigator); this.media = { - video: false, + video: true, audio: true, }; this.transport = new this.TransportClass(this); @@ -498,9 +498,9 @@ class WebRTCClass { } const onSuccess = (stream) => { this.localStream = stream; + !this.audioEnabled.get() && this.disableAudio(); + !this.videoEnabled.get() && this.disableVideo(); this.localUrl.set(stream); - this.videoEnabled.set(this.media.video === true); - this.audioEnabled.set(this.media.audio === true); const { peerConnections } = this; Object.entries(peerConnections).forEach(([, peerConnection]) => peerConnection.addStream(stream)); document.querySelector('video#localVideo').srcObject = stream; @@ -538,19 +538,10 @@ class WebRTCClass { setAudioEnabled(enabled = true) { if (this.localStream != null) { - if (enabled === true && this.media.audio !== true) { - delete this.localStream; - this.media.audio = true; - this.getLocalUserMedia(() => { - this.stopAllPeerConnections(); - this.joinCall(); - }); - } else { - this.localStream.getAudioTracks().forEach(function(audio) { - audio.enabled = enabled; - }); - this.audioEnabled.set(enabled); - } + this.localStream.getAudioTracks().forEach(function(audio) { + audio.enabled = enabled; + }); + this.audioEnabled.set(enabled); } } @@ -562,21 +553,19 @@ class WebRTCClass { this.setAudioEnabled(true); } + toggleAudio() { + if (this.audioEnabled.get()) { + return this.disableAudio(); + } + return this.enableAudio(); + } + setVideoEnabled(enabled = true) { if (this.localStream != null) { - if (enabled === true && this.media.video !== true) { - delete this.localStream; - this.media.video = true; - this.getLocalUserMedia(() => { - this.stopAllPeerConnections(); - this.joinCall(); - }); - } else { - this.localStream.getVideoTracks().forEach(function(video) { - video.enabled = enabled; - }); - this.videoEnabled.set(enabled); - } + this.localStream.getVideoTracks().forEach(function(video) { + video.enabled = enabled; + }); + this.videoEnabled.set(enabled); } } @@ -611,6 +600,13 @@ class WebRTCClass { this.setVideoEnabled(true); } + toggleVideo() { + if (this.videoEnabled.get()) { + return this.disableVideo(); + } + return this.enableVideo(); + } + stop() { this.active = false; this.monitor = false; @@ -735,12 +731,6 @@ class WebRTCClass { */ joinCall(data = {}, ...args) { - if (data.media && data.media.audio) { - this.media.audio = data.media.audio; - } - if (data.media && data.media.video) { - this.media.video = data.media.video; - } data.media = this.media; this.log('joinCall', [data, ...args]); this.getLocalUserMedia(() => { diff --git a/client/views/meet/CallPage.css b/client/views/meet/CallPage.css new file mode 100644 index 0000000000000..a19cb17d28b6d --- /dev/null +++ b/client/views/meet/CallPage.css @@ -0,0 +1,11 @@ +.Off { + color: #ffffff !important; + border-color: #2f343d !important; + background-color: #2f343d !important; +} + +.On { + color: #000000 !important; + border-color: #ffffff !important; + background-color: #ffffff !important; +} diff --git a/client/views/meet/CallPage.js b/client/views/meet/CallPage.js index 00d2eab6bef3c..39094629e461f 100644 --- a/client/views/meet/CallPage.js +++ b/client/views/meet/CallPage.js @@ -1,13 +1,16 @@ -import { Box, Flex } from '@rocket.chat/fuselage'; +import { Box, Flex, ButtonGroup, Button, Icon } from '@rocket.chat/fuselage'; import React, { useEffect, useState } from 'react'; import { Notifications } from '../../../app/notifications/client'; import { WebRTC } from '../../../app/webrtc/client'; import { WEB_RTC_EVENTS } from '../../../app/webrtc/index'; import { useTranslation } from '../../contexts/TranslationContext'; +import './CallPage.css'; -function CallPage({ roomId, visitorToken, visitorId, status, setStatus }) { +function CallPage({ roomId, visitorToken, visitorId, status, setStatus, layout }) { const [isAgentActive, setIsAgentActive] = useState(false); + const [isMicOn, setIsMicOn] = useState(false); + const [isCameraOn, setIsCameraOn] = useState(false); const t = useTranslation(); useEffect(() => { if (visitorToken) { @@ -62,6 +65,22 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus }) { } }, [isAgentActive, status, setStatus, visitorId, roomId, visitorToken]); + const toggleButton = (control) => { + if (control === 'mic') { + WebRTC.getInstanceByRoomId(roomId, visitorToken).toggleAudio(); + return setIsMicOn(!isMicOn); + } + WebRTC.getInstanceByRoomId(roomId, visitorToken).toggleVideo(); + setIsCameraOn(!isCameraOn); + }; + + const closeWindow = () => { + if (layout === 'embedded') { + return parent.handleIframeClose(); + } + return window.close(); + }; + switch (status) { case 'ringing': // Todo Deepak @@ -89,7 +108,7 @@ function CallPage({ roomId, visitorToken, visitorId, status, setStatus }) { + + + + {layout === 'embedded' && ( + + )} + +