7 |
8 | {user.name.substring(0, 1)}
9 |
10 | {user.name}
11 |
12 |
14 | Get Started
15 |
16 | -
7 |
-
8 | 21 | 22 |24 |
Settings
23 |
25 |
10 | 
11 |
12 |
11 | 17 | "For 50 years, WWF has been protecting the future of nature. The world's leading conservation 18 | organization, WWF works in 100 countries and is supported by 1.2 million members in the United 19 | States and close to 5 million globally." 20 |21 | Jessica - company.com 22 |
10 |
14 |
15 | 11 | {message.user} 12 |
13 |
27 | {message.text}
28 |
29 |
35 |
36 | {title}
37 |
38 |
41 |
43 |
44 |
45 |
49 | );
50 | };
51 |
52 | export default Dasboard;
53 |
--------------------------------------------------------------------------------
/client/src/components/Room-video/RoomVideo.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { useEffect } from 'react';
3 | import Draggable from 'react-draggable';
4 | import { useAuth } from '../../context/AuthContext';
5 | import ChatBar from '../chatbar/ChatBar';
6 | import { socket } from '../constant/socket';
7 | import RoomMenu from '../RoomMenu/RoomMenu';
8 | import Users from '../users/UsersList';
9 | import VideoGrid from '../videoGrid/videoGrid';
10 | import { RoomVideoContainer } from './RoomVideo.styles';
11 | const RoomVideo = ({
12 | userVideo,
13 | peers,
14 | stream,
15 | roomMenu,
16 | setRoomMenu,
17 | menuUser,
18 | setUserMenu,
19 | handleShareScreen,
20 | peersRef,
21 | }) => {
22 | const { users, setUsers } = useAuth();
23 | useEffect(() => {
24 | socket.on('roomData', ({ users }) => {
25 | setUsers(users);
26 | });
27 | }, []);
28 |
29 | console.log('users', users);
30 | console.log('peerss', peers);
31 | return (
32 | JOIN ROOM
46 | 47 | 48 |LOADING .......
30 | 31 | } 32 | > 33 |
23 |
24 |
25 | {messages.map((message, i) => (
26 |
29 |
30 |
50 |
51 |
9 | 
10 |
14 |
10 | 11 | Wesee is is a video call service that ensures everyone can be connected with just one click 12 |
13 |
15 | Link
16 |
22 | -
17 |
- About 18 |
- Feature 19 |
- Review 20 |
23 | Service
24 |
30 | -
25 |
- About 26 |
- Feature 27 |
- Review 28 |
31 | Contact
32 |
38 | -
33 |
- About 34 |
- Feature 35 |
- Review 36 |
39 | Assets
40 |
49 | -
41 |
- 42 | storyset.com 43 | 44 |
- 45 | unplash 46 | 47 |
51 | © 2020 Wesee. All rights reserved
52 |
53 |
43 |
44 |
52 |
59 |
45 |
46 | Settings
47 |
48 |
51 |
53 |
58 |
55 |
57 |
37 |
42 |
50 |
51 |
56 | 
57 |
58 |
59 |
60 |
61 |
62 | )}
63 |
57 |
46 | {error && 'error'}
47 | {step1 ? (
48 |
66 | ) : (
67 |
77 | )}
78 |
79 |
80 | );
81 | };
82 |
83 | export default Register;
84 |
--------------------------------------------------------------------------------
/client/src/components/Whiteboard/WhiteBoard.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 |
3 | import { useState, useEffect } from 'react';
4 | import Draggable from 'react-draggable';
5 | import Modal from 'react-modal';
6 | import { SettingNav } from './settings.styles';
7 | import SettingSideBar from './sidebar/Setting-sidebar';
8 | import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
9 | import Prepare from '../../pages/preparePages/prepare';
10 | import AudioSetting from '../Audio-setting/Audio-setting';
11 | import { socket } from '../constant/socket';
12 |
13 | const WhiteBoard = ({ children, RoomCode }) => {
14 | const [isOpen, setIsOpen] = useState(false);
15 | function Whiteboard() {
16 | window.open(`https://wesee-board.tegar.me/#${RoomCode}`);
17 | socket.emit(
18 | 'sendMessage',
19 | `Hi I'm starting the whiteboard, let's join by opening the link : https://wesee-board.tegar.me/#${RoomCode}`,
20 | () => '',
21 | );
22 | socket.emit('isOpenWhiteboard', `https://wesee-board.tegar.me/#${RoomCode}`);
23 | }
24 | return (
25 | <>
26 |
27 |
28 |
51 |
70 |
52 | WhiteBoard
53 |
56 |
57 |
58 |
69 |
62 |
63 |
65 |
66 | Participants in the room will automatically get a whiteboard link via message{' '}
67 |
68 | Start Whiteboard
64 |
6 |
42 |
57 |
58 | );
59 | }
60 |
61 | export default RoomNavbarMobile;
62 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | const express = require('express')
2 | const socketIo = require('socket.io')
3 | const designer = require('canvas-designer')
4 | const http = require('http');
5 | const cors = require('cors');
6 | const { addUser ,removeUser,getUser,getUsersinRoom} = require('./users');
7 | const app = express();
8 | const server = http.createServer(app);
9 |
10 | require('dotenv').config()
11 |
12 | const io = socketIo(server,{
13 | cors:{
14 | origin: '*',
15 | methods: ["GET", "POST"],
16 | credentials: true
17 | }
18 | })
19 |
20 | const usersId = {};
21 |
22 | const socketToRoom = {};
23 | io.on('connection',(socket) =>{
24 | // socket.on('drawing', (data) => socket.broadcast.emit('drawing', data));
25 | // socket.on('drawing', function(data) {
26 | // designer.syncData( data );
27 | // });
28 |
29 | socket.on('join',({name,room},callback) => {
30 | const {error,user} = addUser({id : socket.id,name,room})
31 | if(error) return callback(error)
32 |
33 | // ADD ID FOR PEER
34 | if (usersId[room]) {
35 | const length = usersId[room].length;
36 | if (length === 4) {
37 | socket.emit("room full");
38 | return;
39 | }
40 | usersId[room].push(socket.id);
41 |
42 | } else {
43 | console.log(usersId[room])
44 |
45 | usersId[room] = [socket.id]
46 |
47 | }
48 | console.log(usersId[room])
49 |
50 | socketToRoom[socket.id] = room;
51 |
52 | const usersInThisRoom = usersId[room].filter(id => id !== socket.id);
53 |
54 |
55 |
56 | // const users = getUsersinRoom(user.room).filter(user => user.id !== socket.id)
57 |
58 | // console.log('users in room',usersInThisRoom)
59 |
60 |
61 | socket.emit("all users", usersInThisRoom);
62 |
63 |
64 | socket.emit('message',{user: 'system',text: `${user.name},welcome to the room`})
65 | socket.broadcast.to(user.room).emit('message',{user : 'system',text : `${user.name},has joined!`})
66 | socket.join(user.room);
67 | io.to(user.room).emit('roomData',{room: user.room,users: getUsersinRoom(user.room)})
68 |
69 |
70 |
71 |
72 |
73 | callback()
74 | });
75 | socket.on('sendMessage', (message, callback) => {
76 | const user = getUser(socket.id);
77 |
78 | io.to(user.room).emit('message', { user: user.name, text: message });
79 |
80 | callback();
81 | });
82 | socket.on('isOpenWhiteboard',link => {
83 | const user = getUser(socket.id);
84 | console.log(link)
85 |
86 | io.to(user.room).emit('ShareWhiteboard',{user: user.name,text: `${user.name} share the whiteboard file link to the meeting : ${link}`} );
87 |
88 | })
89 | socket.on("sending signal", payload => {
90 | io.to(payload.userToSignal).emit('user joined', { signal: payload.signal, callerID: payload.callerID });
91 | });
92 |
93 | socket.on("returning signal", payload => {
94 | io.to(payload.callerID).emit('receiving returned signal', { signal: payload.signal, id: socket.id });
95 | });
96 |
97 | socket.on('shareScreen',shareScreen => {
98 | const user = getUser(socket.id);
99 | console.log(shareScreen)
100 | const isShareScreenActive = shareScreen
101 |
102 | io.to(user.room).emit('isShareScreenActive', isShareScreenActive );
103 | })
104 |
105 | socket.on('disconnect', () => {
106 | const user = removeUser(socket.id)
107 | console.log(user)
108 | if(user) {
109 | io.to(user.room).emit('message',{user: 'system',text: `${user.name} has left`})
110 | io.to(user.room).emit('roomData', { room: user.room, users: getUsersinRoom(user.room)});
111 |
112 | }
113 | const roomID = socketToRoom[socket.id];
114 | let room = usersId[roomID];
115 | if (room) {
116 | room = room.filter(id => id !== socket.id);
117 |
118 | usersId[roomID] = room;
119 | console.log(usersId)
120 |
121 | }
122 |
123 | socket.broadcast.emit('user left',socket.id);
124 |
125 | });
126 | })
127 | app.get('/',(req,res) => {
128 | res.send(' leaveMeeting()}
8 | className="flex items-center justify-center w-12 h-12 text-white bg-red-700 rounded-full cursor-pointer hover:bg-red-500"
9 | >
10 |
11 |
12 | toggleMuteVideo()}
16 | >
17 |
25 |
26 | muteAudio()}
30 | >
31 |
40 |
41 |
46 |
55 |
56 | Hello World
') 129 | }) 130 | 131 | app.use(cors()) 132 | 133 | const PORT = process.env.PORT || 5000 134 | 135 | server.listen(PORT,() =>{ 136 | console.log('SERVER') 137 | }) -------------------------------------------------------------------------------- /client/src/components/Audio-level/Audio-level.tsx: -------------------------------------------------------------------------------- 1 | //@ts-nocheck 2 | import React, { useEffect } from 'react'; 3 | import { AudiSettingText } from '../Audio-setting/Audio-setting.styles'; 4 | import { SoundMeter } from './soundmeters'; 5 | 6 | function Audiolevel({ stream }) { 7 | useEffect(() => { 8 | const startButton = document.getElementById('startButton'); 9 | const stopBotton = document.getElementById('stopButton'); 10 | const audiotest = document.getElementById('audiotest'); 11 | stopBotton.style.display = 'none'; 12 | 13 | startButton.onclick = start; 14 | stopBotton.onclick = stop; 15 | 16 | const instantMeter = document.querySelector('#instant meter'); 17 | 18 | const instantValueDisplay = document.querySelector('#instant .value'); 19 | 20 | // Put variables in global scope to make them available to the browser console. 21 | const constraints = (window.constraints = { 22 | audio: true, 23 | video: false, 24 | }); 25 | 26 | let meterRefresh = null; 27 | 28 | function handleSuccess(stream) { 29 | // Put variables in global scope to make them available to the 30 | // browser console. 31 | console.log('0', stream); 32 | console.log('1', window.audioContext); 33 | 34 | audiotest.srcObject = stream; 35 | console.log('trigger'); 36 | const soundMeter = (audiotest.soundMeter = new SoundMeter(window.audioContext)); 37 | soundMeter.connectToSource(stream, function (e) { 38 | if (e) { 39 | alert(e); 40 | return; 41 | } 42 | meterRefresh = setInterval(() => { 43 | instantMeter.value = instantValueDisplay.innerText = soundMeter.instant.toFixed(2); 44 | }, 200); 45 | }); 46 | } 47 | 48 | function handleError(error) { 49 | console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name); 50 | } 51 | 52 | function start() { 53 | console.log('Requesting local stream'); 54 | startButton.style.display = 'none'; 55 | stopBotton.style.display = 'inline-block'; 56 | 57 | try { 58 | window.AudioContext = window.AudioContext || window.webkitAudioContext; 59 | window.audioContext = new AudioContext(); 60 | } catch (e) { 61 | alert('Web Audio API not supported.'); 62 | } 63 | handleSuccess(stream); 64 | } 65 | 66 | function stop() { 67 | console.log('Stopping local stream'); 68 | startButton.style.display = 'inline-block'; 69 | stopBotton.style.display = 'none'; 70 | 71 | audiotest.srcObject.getTracks().forEach((track) => track.stop()); 72 | audiotest.soundMeter.stop(); 73 | 74 | clearInterval(meterRefresh); 75 | instantMeter.value = instantValueDisplay.innerText = ''; 76 | } 77 | }, [stream]); 78 | return ( 79 |
80 | Mic Test
81 |
117 | );
118 | }
119 |
120 | export default Audiolevel;
121 |
--------------------------------------------------------------------------------
/client/src/components/navbar/navbar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from 'react';
2 | import { HeroButton } from '../Hero/Hero.styles';
3 | import {
4 | NavbarContainer,
5 | NavbarListContainer,
6 | NavbarList,
7 | HamburgerMenu,
8 | SidePanel,
9 | CloseBtn,
10 | UserName,
11 | } from './Navbar.styles';
12 | import { Link } from 'react-scroll';
13 | import { Link as Href } from 'react-router-dom';
14 | import { useMediaQuery } from 'react-responsive';
15 | import { useAuth } from '../../context/AuthContext';
16 |
17 | function Navbar() {
18 | const [active, seteActive] = useState(false);
19 | const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' });
20 | const [NavMobileActive, setNavMobileActive] = useState(false);
21 | const { currentUser, logout }: any = useAuth();
22 | console.log(NavMobileActive);
23 | useEffect(() => {
24 | window.addEventListener('scroll', changeBackground);
25 | }, []);
26 | const changeBackground = () => {
27 | if (window.scrollY > 80) {
28 | seteActive(true);
29 | } else {
30 | seteActive(false);
31 | }
32 | };
33 | return (
34 |
82 |
97 |
112 |
116 | 
36 |
37 | {!isTabletOrMobile ? (
38 |
62 | {currentUser ? (
63 |
70 | Login
71 |
72 |
73 | SignUp
74 |
75 |
76 | )}
77 |
78 |
64 | logout()}>Logout
65 | {currentUser.displayName}
66 |
67 | ) : (
68 | <>
69 |
63 |
64 |
65 | {isTabletOrMobile ? (
66 |
67 | STAY CONNECTED TO EVERYONE
68 |
69 | ) : (
70 |
71 |
72 |
76 |
77 | )}
78 |
79 |
80 |
81 | Wesee is is a video call service that ensures everyone can be connected with just one click
82 |
83 |
84 | {}
85 |
86 |
111 |
112 | {isTabletOrMobile ? (
113 |
114 |
115 | 
116 |
117 |
118 | ) : (
119 |
120 |
121 | 
122 |
123 |
124 | )}
125 |
126 |
127 | );
128 | }
129 |
130 | export default Hero;
131 |
--------------------------------------------------------------------------------
/client/src/components/Section-Features/SectionFeatures.styles.ts:
--------------------------------------------------------------------------------
1 | //@ts-nocheck
2 |
3 | import styled,{keyframes} from 'styled-components';
4 |
5 | export const SectionFeatureContainer = styled.section`
6 | background-color: #000;
7 |
8 | width: 100%;
9 | clip-path: polygon(0 0, 100% 9%, 100% 100%, 0% 100%);
10 | height: 200rem;
11 | padding: 5rem 2rem;
12 | margin-top: -29rem;
13 | position: relative;
14 |
15 |
16 | @media only screen and (max-width: 768px) {
17 | clip-path: none;
18 | margin-top: -4rem;
19 | padding: 2rem 2rem;
20 | height: 160rem;
21 |
22 | clip-path: polygon(0 0, 100% 2%, 100% 100%, 0% 100%);
23 |
24 |
25 |
26 |
27 | }
28 |
29 | `;
30 |
31 | export const FeatureText = styled.h1`
32 | font-style: normal;
33 | font-weight: bold;
34 | font-size: 55px;
35 | line-height: 67px;
36 | text-align: center;
37 |
38 | color: rgba(14, 120, 249, 0.96);
39 |
40 | text-shadow: 0px 10px 50px #0E78F9;
41 | transition: .5s all;
42 | cursor: pointer;
43 | &:hover{
44 | transform: skewY(2deg) skewX(10deg) scale(1);
45 | text-shadow: 0px 20px 50px #0E78F9;
46 |
47 | }
48 | @media only screen and (max-width: 768px) {
49 | font-size: 2rem;
50 | line-height: 1.7;
51 |
52 |
53 | }
54 | `
55 |
56 | export const FeatureContainer = styled.div`
57 | display: grid;
58 | grid-template-columns: repeat(3, minmax(0, 1fr));
59 | text-align: center;
60 | margin-top: 10rem/* 160px */;
61 | width: 100% !important;
62 | height: 100% !important ;
63 | max-height: 630px !important ;
64 | color: #fff;
65 | @media only screen and (max-width: 768px) {
66 | grid-template-columns: repeat(1, minmax(0, 1fr));
67 | margin-top: 0/* 160px */;
68 |
69 | }
70 |
71 |
72 |
73 | `
74 | export const FeatureScrollBar = styled.div`
75 | direction: rtl;
76 | overflow:auto;
77 | height: 100%;
78 | width: 100%;
79 | text-align: left;
80 |
81 | `
82 |
83 | export const FeatureItemContainer = styled.div`
84 | display: flex;
85 | flex-direction: column;
86 | justify-content: space-between;
87 | `
88 |
89 | export const FeatureItemText = styled.div`
90 | margin-left: 1rem;
91 | display: flex;
92 | flex-direction: column;
93 | text-align: left;
94 | @media only screen and (max-width: 768px) {
95 | text-align: center;
96 | margin-top: 1rem;
97 |
98 |
99 | }
100 |
101 | `
102 |
103 | export const FeatureItemTextMain = styled.p`
104 | font-size: 22px;
105 | font-style: normal;
106 | font-weight: bold;
107 | line-height: 27px;
108 | color: rgba(14, 120, 249, 0.96);
109 | text-shadow: 0px 4px 50px #0E78F9;
110 |
111 | `
112 |
113 | export const FeatureItemTextPrimary = styled.p`
114 | font-weight: bold;
115 | font-size: 13px;
116 | line-height: 16px;
117 |
118 | color: #7D7D7D;
119 | margin-top: .5rem;
120 | transition : .8s all
121 | `
122 |
123 | export const FeatureItem = styled.div`
124 | display: flex;
125 | justify-content: center;
126 | align-items: center;
127 | position: relative;
128 | transition : 1s all;
129 | cursor: pointer;
130 |
131 | &:hover{
132 | transform: skewY(3deg) skewX(2deg) scale(1);
133 |
134 | }
135 |
136 | &:hover i {
137 | color: #0E78F9;
138 | transform: scale(1.2)
139 | }
140 | &:hover p {
141 | color: #0E78F9;
142 |
143 | }
144 |
145 | @media only screen and (max-width: 768px) {
146 | margin-top: 2rem;
147 | flex-direction: column;
148 | padding: 1rem 0;
149 |
150 | }
151 | `
152 |
153 |
154 | export const FeatureIcon = styled.i`
155 | color: #fff;
156 | font-size: 3.5rem;
157 | filter: drop-shadow(0px 10px 50px #0E78F9);
158 | transition: 1s all;
159 |
160 |
161 | `
162 |
163 | const LineAnimation = keyframes`
164 | 0% {border: 2px solid #0E78F9;opacity: 20%}
165 | 25% {border: 2px solid #0E78F9;opacity: 40%}
166 | 50% {border: 2px solid #0E78F9;opacity: 60%}
167 | 100% {border: 2px solid #0E78F9;opacity: 100%}
168 |
169 | @-webkit-keyframes LineAnimation {
170 | 0% {border: 2px solid #0E78F9}
171 | 25% {border: 2px solid #0E78F9}
172 | 50% {border: 2px solid #0E78F9}
173 | 100% {border: 2px solid #0E78F9}
174 | `;
175 | export const LineContainer = styled.div`
176 | position: absolute;
177 | /* box-shadow: 5px 5px 10px #0E78F9; */
178 | animation: ${LineAnimation} 1.5s ;
179 |
180 |
181 |
182 |
183 |
184 |
185 | `
186 |
187 | export const LineContainerVertical = styled.div`
188 | position: absolute;
189 | /* box-shadow: 5px 5px 10px #0E78F9; */
190 | animation: ${LineAnimation} 1.5s ;
191 | border-left: 2px solid #0E78F9;
192 | height: ${props => props.height};
193 | z-index: 100;
194 | right: ${props => props.right}; ;
195 | top: ${props => props.top};
196 | left: ${props => props.left}; ;
197 |
198 | transform: rotate(${props => props.rotate});
199 | @media only screen and (max-width: 1200px) {
200 | display: none;
201 |
202 | }
203 |
204 |
205 |
206 |
207 |
208 |
209 | `
210 | export const LineContainerHorizontal = styled.div`
211 | position: absolute;
212 | /* box-shadow: 5px 5px 10px #0E78F9; */
213 | animation: ${LineAnimation} 2s ;
214 | width: ${props => props.width};;
215 | border: 1px solid #0E78F9;
216 | right: ${props => props.right}; ;
217 | left: ${props => props.left}; ;
218 | top: ${props => props.top};
219 | @media only screen and (max-width: 1200px) {
220 | display: none;
221 |
222 | }
223 |
224 |
225 |
226 |
227 |
228 |
229 | `
230 | const bounce = keyframes`
231 | from {
232 | transform: translateY(0px);
233 |
234 | }
235 | to {
236 | transform: translateY(-8px);
237 | filter: drop-shadow(0px 5px 40px #0E78F9)
238 | }
239 | }
240 | @-webkit-keyframes bounce {
241 | from {
242 | transform: translateY(0px);
243 | }
244 | to {
245 | transform: translateY(-15px);
246 | filter: drop-shadow(0px 5px 40px #0E78F9)
247 |
248 | }
249 | `;
250 | export const RoomPhoto = styled.img`
251 | cursor: pointer;
252 | /* transition: 1s all !important;
253 |
254 | &:hover{
255 | filter: drop-shadow(0px 5px 140px #0E78F9) !important;
256 |
257 | } */
258 |
259 | `
260 |
261 | export const FeatureImage = styled.div`
262 | display: flex;
263 | align-self: center;
264 | @media only screen and (max-width: 768px) {
265 | grid-row: 1 / 2;
266 | margin-top: 4rem;
267 | width: 90%;
268 | justify-self: center;
269 |
270 | }
271 | `
272 |
273 | export const MarginContainer = styled.div`
274 | margin-top: 55rem;
275 | @media only screen and (max-width: 768px) {
276 | margin-top: 4rem;
277 |
278 | }
279 | `
280 |
281 |
282 |
--------------------------------------------------------------------------------
/client/src/components/Audio-setting/Audio-setting.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 |
3 | import React, { useEffect } from 'react';
4 | import Audiolevel from '../Audio-level/Audio-level';
5 | import { AudioSettingContainer, AudiSettingText, Select } from './Audio-setting.styles';
6 | function AudioSetting({ stream, peers, userVideo }) {
7 | useEffect(() => {
8 | const videoElement = document.querySelector('#video2');
9 | const audioInputSelect = document.querySelector('select#audioSource');
10 | const audioOutputSelect = document.querySelector('select#audioOutput');
11 | const videoSelect = document.querySelector('select#videoSource');
12 | const selectors = [audioInputSelect, audioOutputSelect, videoSelect];
13 |
14 | audioOutputSelect.disabled = !('sinkId' in HTMLMediaElement.prototype);
15 |
16 | function gotDevices(deviceInfos) {
17 | // Handles being called several times to update labels. Preserve values.
18 | const values = selectors.map((select) => select.value);
19 | selectors.forEach((select) => {
20 | while (select.firstChild) {
21 | select.removeChild(select.firstChild);
22 | }
23 | });
24 | for (let i = 0; i !== deviceInfos.length; ++i) {
25 | const deviceInfo = deviceInfos[i];
26 | const option = document.createElement('option');
27 | option.value = deviceInfo.deviceId;
28 | if (deviceInfo.kind === 'audioinput') {
29 | option.text = deviceInfo.label || `microphone ${audioInputSelect.length + 1}`;
30 | audioInputSelect.appendChild(option);
31 | } else if (deviceInfo.kind === 'audiooutput') {
32 | option.text = deviceInfo.label || `speaker ${audioOutputSelect.length + 1}`;
33 | audioOutputSelect.appendChild(option);
34 | } else if (deviceInfo.kind === 'videoinput') {
35 | option.text = deviceInfo.label || `camera ${videoSelect.length + 1}`;
36 | videoSelect.appendChild(option);
37 | } else {
38 | console.log('Some other kind of source/device: ', deviceInfo);
39 | }
40 | }
41 | selectors.forEach((select, selectorIndex) => {
42 | if (Array.prototype.slice.call(select.childNodes).some((n) => n.value === values[selectorIndex])) {
43 | select.value = values[selectorIndex];
44 | }
45 | });
46 | }
47 |
48 | navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
49 |
50 | // Attach audio output device to video element using device/sink ID.
51 | function attachSinkId(element, sinkId) {
52 | if (typeof element.sinkId !== 'undefined') {
53 | element
54 | .setSinkId(sinkId)
55 | .then(() => {
56 | console.log(`Success, audio output device attached: ${sinkId}`);
57 | })
58 | .catch((error) => {
59 | let errorMessage = error;
60 | if (error.name === 'SecurityError') {
61 | errorMessage = `You need to use HTTPS for selecting audio output device: ${error}`;
62 | }
63 | console.error(errorMessage);
64 | // Jump back to first output device in the list as it's the default.
65 | audioOutputSelect.selectedIndex = 0;
66 | });
67 | } else {
68 | console.warn('Browser does not support output device selection.');
69 | }
70 | }
71 |
72 | function changeAudioDestination() {
73 | const audioDestination = audioOutputSelect.value;
74 | attachSinkId(videoElement, audioDestination);
75 | }
76 |
77 | function gotStream(screenStream) {
78 | window.stream = screenStream; // make stream available to console
79 | userVideo.current.srcObject = screenStream;
80 | peers.current[0].peer.replaceTrack(stream.getVideoTracks()[0], screenStream.getVideoTracks()[0], stream);
81 | videoElement.srcObject = screenStream;
82 |
83 | return navigator.mediaDevices.enumerateDevices();
84 | }
85 |
86 | function handleError(error) {
87 | console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
88 | }
89 |
90 | function start() {
91 | if (window.stream) {
92 | window.stream.getTracks().forEach((track) => {
93 | track.stop();
94 | });
95 | }
96 | const audioSource = audioInputSelect.value;
97 | const videoSource = videoSelect.value;
98 | const constraints = {
99 | audio: { deviceId: audioSource ? { exact: audioSource } : undefined },
100 | video: { deviceId: videoSource ? { exact: videoSource } : undefined },
101 | };
102 | navigator.mediaDevices.getUserMedia(constraints).then(gotStream).then(gotDevices).catch(handleError);
103 | }
104 |
105 | audioInputSelect.onchange = start;
106 | audioOutputSelect.onchange = changeAudioDestination;
107 |
108 | videoSelect.onchange = start;
109 |
110 | start();
111 | }, [stream]);
112 | return (
113 |
87 | createRoom()}>Create Room
88 |
110 |
89 | setRoomCode(e.target.value)}
92 | className="ml-5"
93 | placeholder="Enter Room Code"
94 | />
95 |
109 | joinRoom()} 101 | style={{ color: '#0e78f9', marginLeft: '1rem' }} 102 | > 103 | Join Now 104 |
105 | ) : ( 106 | '' 107 | )} 108 |
116 |
122 |
115 |
143 |
116 | Camera
117 |
129 |
125 |
126 |
127 |
128 |
130 | Mikrofon
131 |
136 |
132 |
133 |
134 |
137 | Speaker
138 |
142 |
139 |
140 |
141 |
48 |
161 | );
162 | };
163 |
164 | export default Login;
165 |
--------------------------------------------------------------------------------
/client/src/components/room-menu-android/room-menu-android.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 |
3 | import { useState, useRef } from 'react';
4 | import Modal from 'react-modal';
5 | import { useMessage } from '../../context/chatMessage';
6 | import { socket } from '../constant/socket';
7 | import ScrollToBottom from 'react-scroll-to-bottom';
8 |
9 | const RoomMenuMobile = ({ children, isDekstop }) => {
10 | const messageRef = useRef(null);
11 | const { messages }: any = useMessage();
12 |
13 | const [isOpen, setIsOpen] = useState(false);
14 | const sendMessage = (event) => {
15 | event.preventDefault();
16 |
17 | if (messageRef.current.value) {
18 | socket.emit('sendMessage', messageRef.current.value, () => (messageRef.current.value = ''));
19 | }
20 | };
21 | return (
22 | <>
23 |
24 |
25 |
52 |
57 | Welcome Back
53 |
54 | To keep connect with us
please login with personal info
55 |
58 |
160 | 59 | Sign In To Wesee 60 |
61 |
62 |
75 |
88 |
89 | {error && {error}}
90 |
91 |
158 |
159 |
49 |
149 |
53 |
69 |
54 |
65 |
66 | Group Chat
67 |
68 |
70 |
71 |
118 |
119 |
72 |
73 | This chat can only be read by people in this room and can only be seen while on a
74 | call{' '}
75 |
76 |
77 | {messages.map((m, i) => (
78 | <>
79 | {m.user === 'system' ? (
80 | ''
81 | ) : (
82 |
83 |
114 | )}
115 |
116 | ))}
117 |
84 |
113 |
93 | {m.user.substring(0, 1)}
94 |
95 |
96 |
100 | {m.user}
101 |
102 |
109 | {m.text}
110 |
111 |
112 |
120 |
148 |
121 |
132 |
133 |
147 |
134 |
145 |
146 |