25 |
26 | When a user creates a session he'll receive a unique hashed URL whereas he can share with others to join the meeting (upon credentials are validated).
27 |
28 | ## Examples
29 |
30 | 
31 | 
32 | 
33 |
34 | ## Contributing
35 | Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
36 |
37 | ## License
38 | [MIT](https://choosealicense.com/licenses/mit/)
39 |
--------------------------------------------------------------------------------
/meetjs-react/.Dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/meetjs-react/.env:
--------------------------------------------------------------------------------
1 | REACT_APP_SERVER=${SERVER_URL}
2 | REACT_APP_WS_URL=${WS_URL}
--------------------------------------------------------------------------------
/meetjs-react/.env.development:
--------------------------------------------------------------------------------
1 | REACT_APP_WS_URL = 'ws://localhost:9000/ws'
2 | REACT_APP_SERVER = 'http://localhost:9000'
--------------------------------------------------------------------------------
/meetjs-react/.netlify/state.json:
--------------------------------------------------------------------------------
1 | {
2 | "siteId": "3fab6827-60bb-4548-b465-9e86b62150cf"
3 | }
--------------------------------------------------------------------------------
/meetjs-react/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "compile-hero.disable-compile-files-on-did-save-code": false
3 | }
--------------------------------------------------------------------------------
/meetjs-react/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:14.1-alpine AS builder
2 |
3 | WORKDIR /opt/web
4 | COPY package.json package-lock.json ./
5 | RUN npm install
6 |
7 | ENV PATH="./node_modules/.bin:$PATH"
8 |
9 | COPY . ./
10 |
11 | RUN npm run build
12 |
13 | FROM nginx:1.17-alpine
14 |
15 | RUN apk --no-cache add curl
16 |
17 | RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`uname -s`-`uname -m` -o envsubst && \
18 | chmod +x envsubst && \
19 | mv envsubst /usr/local/bin
20 |
21 | COPY nginx.conf /etc/nginx/nginx.tmpl
22 |
23 | CMD ["/bin/sh", "-c", "envsubst < /etc/nginx/nginx.tmpl > /etc/nginx/nginx.conf && nginx -g 'daemon off;'"]
24 |
25 | COPY --from=builder /opt/web/build /usr/share/nginx/html
--------------------------------------------------------------------------------
/meetjs-react/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `yarn start`
8 |
9 | Runs the app in the development mode.\n
\n )\n}\n","export enum State {\n VALID_URL = 1,\n INVALID,\n LOGGED,\n JOINED\n}","import React, { useState } from 'react'\nimport './modal.scss';\n\ninterface Props {\n connect: (host: string, password: string) => void;\n error: boolean;\n}\n\nexport const SessionCredentials = (props: Props) => {\n const [host, setHost] = useState\n
\n \n 
\n MeetJS\n
\n \n Github\n
\n \n Do you want a free video chat platform?\n Get you own URL and share it with others to join you.\n \n
\n \n
\n )\n}\n","import { SocketEvent } from \"../interfaces/socket-data\";\n\nexport class ConnectionSocket {\n private connection: WebSocket;\n\n constructor(url: string) {\n this.connection = new WebSocket(url);\n }\n\n /**\n * Disconnect\n */\n disconnect() {\n this.connection.close();\n }\n \n /**\n * On open connection event.\n * @param callback handles on connection ready.\n */\n onOpen(callback: () => void) {\n this.connection.onopen = callback;\n }\n\n /**\n * Sends message through web sockets.\n * @param data data to send\n * @param type event type\n * @param userID user id\n * @param offer RTC offer\n */\n send(type: string, userID: string) {\n this.connection.send(JSON.stringify({\n type,\n userID\n }));\n }\n\n sendDescription(type: string, description: RTCSessionDescriptionInit, userID: string, to: string) {\n this.connection.send(JSON.stringify({\n type,\n userID,\n description: JSON.stringify(description),\n to\n }));\n }\n\n candidate(candidate: RTCIceCandidate, userID: string) {\n this.connection.send(JSON.stringify({\n candidate: JSON.stringify(candidate),\n userID,\n type: 'ice'\n }));\n }\n\n /**\n * On message received.\n * @param callback method to handle on message function.\n */\n onMessage(callback: (event: Event & SocketEvent) => void) {\n this.connection.onmessage = callback;\n }\n\n /**\n * Checks if connection is ready.\n */\n isReady(): boolean {\n return this.connection.readyState === this.connection.OPEN;\n }\n}","export function byteToHex(byte) {\n return ('0' + byte.toString(16)).slice(-2);\n}\n\nexport function generateId(len = 40) {\n var arr = new Uint8Array(len / 2);\n window.crypto.getRandomValues(arr);\n return Array.from(arr, byteToHex).join(\"\");\n}","export const STUN_SERVERS = {\n iceServers: [\n { urls: 'stun:stun3.l.google.com:19302' },\n { urls: 'stun:stun4.l.google.com:19302' },\n ],\n}","import { StunServers } from \"../interfaces/stun-servers\";\n\nexport class EasyRTC {\n servers: StunServers;\n stream: MediaStream;\n peerConnection: RTCPeerConnection;\n\n constructor(servers: StunServers, stream: MediaStream) {\n this.servers = servers;\n this.stream = stream;\n\n this.peerConnection = new RTCPeerConnection(servers);\n\n this.stream.getTracks().forEach((track: MediaStreamTrack) => {\n this.peerConnection.addTrack(track);\n });\n }\n\n /**\n * Creates offer to send to remote peers.\n */\n async createOffer() {\n let sessionDescription: RTCSessionDescriptionInit;\n sessionDescription = await this.peerConnection.createOffer();\n this.peerConnection.setLocalDescription(sessionDescription);\n \n return sessionDescription;\n }\n\n /**\n * Creates answer when offer is received.\n */\n async createAnswer() {\n let sessionDescription: RTCSessionDescriptionInit;\n sessionDescription = await this.peerConnection.createAnswer();\n this.peerConnection.setLocalDescription(sessionDescription)\n\n return sessionDescription;\n }\n\n /**\n * Receives answer from remote peers.\n */\n async receiveAnswer(event: RTCSessionDescriptionInit | undefined) {\n if (event) {\n await this.peerConnection.setRemoteDescription(new RTCSessionDescription(event))\n }\n }\n\n /**\n * \n * @param candidate \n */\n async addCandidate(candidate: RTCIceCandidate) {\n await this.peerConnection.addIceCandidate(candidate);\n }\n\n onTrack(callback: (event: RTCTrackEvent) => void) {\n this.peerConnection.ontrack = callback ;\n }\n\n onIceCandidate(callback: (event: RTCPeerConnectionIceEvent) => void) {\n this.peerConnection.onicecandidate = callback ;\n }\n\n async setRemoteDescription(description: RTCSessionDescriptionInit) {\n await this.peerConnection.setRemoteDescription(description);\n }\n\n addIceCandidate(candidate: RTCIceCandidate) {\n this.peerConnection.addIceCandidate(candidate);\n }\n\n disconnect() {\n this.peerConnection.close();\n }\n}","import React, { useEffect, useState, useRef } from 'react'\nimport { useLocation } from \"react-router-dom\";\nimport { verifySocket, connectSession } from '../../services/api.services';\nimport logo from '../../assets/images/logo.svg';\nimport micOn from '../../assets/images/mic-on.svg';\nimport micOff from '../../assets/images/mic-off.svg';\nimport camOn from '../../assets/images/cam-on.svg';\nimport camOff from '../../assets/images/cam-off.svg';\nimport view from '../../assets/images/view.svg';\nimport { SessionCredentials } from '../session-modal/modal';\nimport './meeting.scss';\nimport { ResponseData } from '../../interfaces/response-data';\nimport { ConnectionSocket } from '../../services/web-socket.services';\nimport { generateId } from '../../utils/identifier.utils';\nimport { SocketEvent, SocketResponse } from '../../interfaces/socket-data';\nimport { State } from '../state-machine/state-machine';\nimport { STUN_SERVERS } from '../../constants/stun-servers';\nimport { EasyRTC } from '../../utils/easy-rtc';\nimport { useBeforeunload } from 'react-beforeunload';\n\nexport const Meeting = () => {\n const location = useLocation();\n const [state, setState] = useState\n
\n \n \n
\n \n
\n )\n}","import React from 'react';\nimport './App.scss';\nimport { Router, Redirect, Route, Switch } from \"react-router\";\nimport { Home } from './components/home/home';\nimport { Meeting } from './components/meeting/meeting';\nimport { createBrowserHistory } from \"history\";\n\nfunction App() {\n const history = createBrowserHistory();\n\n return (\n \n
\n \n \n MeetJS\n
\n \n Github\n
\n \n {state <= 2 &&
\n Join the meeting to communicate with others.
\n )\n }\n {state === State.JOINED && (\n \n {\n users.map((user, index) => {\n return (\n \n )\n })\n }\n
\n )}\n {state > 2 &&\n (\n \n
\n )\n }\n \n \n
\n \n
\n \n {state === State.JOINED ? 'Leave' : 'Join'}\n
\n {title}\n \n {\n state === State.JOINED &&\n {users.length} online users\n }\n 
setViewMode(!viewMode)} />\n 
setAudio(!audio)} />\n 
setVideo(!video)} />\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\ntype Config = {\n onSuccess?: (registration: ServiceWorkerRegistration) => void;\n onUpdate?: (registration: ServiceWorkerRegistration) => void;\n};\n\nexport function register(config?: Config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(\n process.env.PUBLIC_URL,\n window.location.href\n );\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl: string, config?: Config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl: string, config?: Config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' }\n })\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then(registration => {\n registration.unregister();\n })\n .catch(error => {\n console.error(error.message);\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n
13 |
14 |
15 |
16 |
18 |
19 |
21 |
22 |
24 |
25 |
26 |
27 | );
28 | }
29 |
30 | export default App;
31 |
--------------------------------------------------------------------------------
/meetjs-react/src/assets/fonts/Quicksand_Bold.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thealmarques/meetjs-webrtc-golang/79205d205bdb4624ef664ba6630f53ff19999b77/meetjs-react/src/assets/fonts/Quicksand_Bold.otf
--------------------------------------------------------------------------------
/meetjs-react/src/assets/fonts/Quicksand_Book.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thealmarques/meetjs-webrtc-golang/79205d205bdb4624ef664ba6630f53ff19999b77/meetjs-react/src/assets/fonts/Quicksand_Book.otf
--------------------------------------------------------------------------------
/meetjs-react/src/assets/images/cam-off.svg:
--------------------------------------------------------------------------------
1 |
12 |
--------------------------------------------------------------------------------
/meetjs-react/src/assets/images/cam-on.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/meetjs-react/src/assets/images/close.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/meetjs-react/src/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thealmarques/meetjs-webrtc-golang/79205d205bdb4624ef664ba6630f53ff19999b77/meetjs-react/src/assets/images/logo.png
--------------------------------------------------------------------------------
/meetjs-react/src/assets/images/logo.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/meetjs-react/src/assets/images/mic-off.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/meetjs-react/src/assets/images/mic-on.svg:
--------------------------------------------------------------------------------
1 |
8 |
--------------------------------------------------------------------------------
/meetjs-react/src/assets/images/video-off.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
48 |
--------------------------------------------------------------------------------
/meetjs-react/src/assets/images/video-on.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
45 |
--------------------------------------------------------------------------------
/meetjs-react/src/assets/images/view.svg:
--------------------------------------------------------------------------------
1 |
20 |
--------------------------------------------------------------------------------
/meetjs-react/src/components/home/home.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | height: 100%;
3 | width: 100%;
4 | background-color: #8C55A3;
5 | overflow: auto;
6 |
7 | .header {
8 | padding: 20px;
9 | width: 100%;
10 | display: flex;
11 | align-items: center;
12 | justify-content: space-between;
13 |
14 | &__left {
15 | display: flex;
16 | align-items: center;
17 |
18 | &__logo {
19 | width: 60px;
20 | height: 60px;
21 | color: white;
22 | }
23 |
24 | &__text {
25 | margin-left: 10px;
26 | font-size: 20px;
27 | font-family: 'Quicksand-Bold';
28 | color: white;
29 |
30 | &:hover {
31 | color: white;
32 | }
33 | }
34 | }
35 |
36 | &__right {
37 | cursor: pointer;
38 | display: flex;
39 | color: white;
40 | font-family: 'Quicksand-Bold';
41 |
42 | a {
43 | color: white;
44 | }
45 |
46 | &__margin {
47 | margin-right: 7px;
48 | }
49 | }
50 | }
51 |
52 | .body {
53 | margin-top: 50px;
54 | display: flex;
55 | flex-direction: column;
56 | align-items: center;
57 |
58 | &__title {
59 | font-family: 'Quicksand-Bold';
60 | font-size: 24px;
61 | color: white;
62 | text-align: center;
63 | }
64 |
65 | &__sub-title {
66 | font-family: 'Quicksand-Bold';
67 | font-size: 14px;
68 | opacity: .7;
69 | color: white;
70 | margin-top: 10px;
71 | text-align: center;
72 | }
73 |
74 | &__form {
75 | display: flex;
76 | flex-direction: row;
77 | margin-top: 40px;
78 | width: 480px;
79 | align-items: center;
80 | justify-content: space-between;
81 |
82 | &__inputs {
83 | display: flex;
84 | flex-direction: column;
85 | width: 60%;
86 |
87 | &__input {
88 | outline: none;
89 | border: 0;
90 | padding-left: 10px;
91 | border-radius: 2px;
92 | width: 100%;
93 | height: 35px;
94 | margin-top: 10px;
95 | box-shadow: 0px 0px 2px 1px rgba(237,237,237,1);
96 | }
97 | }
98 |
99 | &__create {
100 | width: 30%;
101 | display: flex;
102 | flex-direction: column;
103 | align-items: center;
104 | justify-content: center;
105 | flex-wrap: wrap;
106 |
107 | &__btn {
108 | font-family: 'Quicksand-Bold';
109 | margin-top: 10px;
110 | border: 0;
111 | outline: 0;
112 | cursor: pointer;
113 | width: 100%;
114 | height: 35px;
115 | background-color: #ED7655;
116 | border-radius: 5px;
117 | color: white;
118 | }
119 |
120 | &__small-text {
121 | margin-top: 5px;
122 | opacity: .5;
123 | font-family: 'Quicksand-Bold';
124 | color: white;
125 | font-size: 12px;
126 | }
127 | }
128 |
129 | @media (max-width: 480px) {
130 | width: 90%;
131 | }
132 | }
133 | }
134 | }
--------------------------------------------------------------------------------
/meetjs-react/src/components/home/home.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { useHistory } from "react-router";
3 | import './home.scss';
4 | import logo from '../../assets/images/logo.svg';
5 | import { createSession } from '../../services/api.services';
6 | import { ResponseData } from '../../interfaces/response-data';
7 |
8 | export const Home = () => {
9 | const [host, setHost] = useState
25 |
50 | )
51 | }
52 |
--------------------------------------------------------------------------------
/meetjs-react/src/components/meeting/meeting.scss:
--------------------------------------------------------------------------------
1 | .meeting {
2 | height: 100%;
3 | width: 100%;
4 | background-color: #8C55A3;
5 | overflow: auto;
6 |
7 | &__header {
8 | padding: 20px;
9 | width: 100%;
10 | display: flex;
11 | align-items: center;
12 | justify-content: space-between;
13 |
14 | &__left {
15 | display: flex;
16 | align-items: center;
17 |
18 | &__logo {
19 | width: 60px;
20 | height: 60px;
21 | color: white;
22 | }
23 |
24 | &__text {
25 | margin-left: 10px;
26 | font-size: 20px;
27 | font-family: 'Quicksand-Bold';
28 | color: white;
29 |
30 | &:hover {
31 | color: white;
32 | }
33 | }
34 | }
35 |
36 | &__right {
37 | cursor: pointer;
38 | display: flex;
39 | color: white;
40 | font-family: 'Quicksand-Bold';
41 |
42 | a {
43 | color: white;
44 | }
45 |
46 | &__margin {
47 | margin-right: 7px;
48 | }
49 | }
50 | }
51 |
52 | &__body {
53 | width: 100%;
54 | margin-top: 20px;
55 | display: flex;
56 | align-items: center;
57 | justify-content: center;
58 |
59 | &__users {
60 | display: flex;
61 | align-items: center;
62 | flex-wrap: wrap;
63 |
64 | &-row {
65 | flex-direction: row;
66 | }
67 |
68 | &-column {
69 | flex-direction: column;
70 | }
71 |
72 | &__remote-video {
73 | margin-bottom: 20px;
74 | margin-right: 20px;
75 | width: 40vw;
76 |
77 | &-split {
78 | width: 35vw;
79 | justify-content: center;
80 | }
81 | }
82 | }
83 |
84 | &__info {
85 | margin-top: 10%;
86 | color: white;
87 | font-family: 'Quicksand-Bold';
88 | text-align: center;
89 | }
90 |
91 | &__spinner {
92 | margin-top: 10%;
93 | }
94 |
95 | &__bar {
96 | position: absolute;
97 | bottom: 20px;
98 | width: 60vw;
99 | height: 45px;
100 | background-color: #ED7655;
101 | border-radius: 20px;
102 | display: flex;
103 | justify-content: space-between;
104 | align-items: center;
105 |
106 | &__video-container {
107 | position: absolute;
108 | right: -2vw;
109 | top: -11vw;
110 | transition: transform 1s ease-in-out;
111 |
112 | &__local-video {
113 | border-radius: 5px;
114 | height: 10vw;
115 | width: 20vw;
116 | transition: transform 1s ease-in-out;
117 |
118 | &:hover {
119 | transform: scale(2);
120 | }
121 | }
122 |
123 | &:hover {
124 | transform: translateY(-5vw);
125 | }
126 | }
127 |
128 | &__left-bar {
129 | height: 100%;
130 | display: flex;
131 | align-items: center;
132 |
133 | &__status {
134 | width: 8vw;
135 | height: 100%;
136 | border-radius: 20px;
137 | display: flex;
138 | align-items: center;
139 | justify-content: center;
140 | color: white;
141 | font-size: 1.2vw;
142 | font-family: 'Quicksand-Bold';
143 | cursor: pointer;
144 | user-select: none;
145 |
146 | &-inactive {
147 | background-color: #CE0B29;
148 | }
149 |
150 | &-active {
151 | background-color: #299B43;
152 | }
153 | }
154 |
155 | &__title {
156 | font-size: 1.2vw;
157 | color: white;
158 | margin-left: 10px;
159 | text-align: center;
160 | font-family: 'Quicksand-Bold';
161 | }
162 | }
163 |
164 | &__right-bar {
165 | margin-right: 10px;
166 | display: flex;
167 | align-items: center;
168 |
169 | &__count {
170 | font-size: 10px;
171 | font-family: 'Quicksand-Bold';
172 | color: white;
173 | margin-right: 10px;
174 | }
175 |
176 | &__icon {
177 | margin-right: 15px;
178 | width: 2vw;
179 | height: 2vw;
180 | cursor: pointer;
181 | }
182 | }
183 | }
184 | }
185 | }
--------------------------------------------------------------------------------
/meetjs-react/src/components/meeting/meeting.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState, useRef } from 'react'
2 | import { useLocation } from "react-router-dom";
3 | import { verifySocket, connectSession } from '../../services/api.services';
4 | import logo from '../../assets/images/logo.svg';
5 | import micOn from '../../assets/images/mic-on.svg';
6 | import micOff from '../../assets/images/mic-off.svg';
7 | import camOn from '../../assets/images/cam-on.svg';
8 | import camOff from '../../assets/images/cam-off.svg';
9 | import view from '../../assets/images/view.svg';
10 | import { SessionCredentials } from '../session-modal/modal';
11 | import './meeting.scss';
12 | import { ResponseData } from '../../interfaces/response-data';
13 | import { ConnectionSocket } from '../../services/web-socket.services';
14 | import { generateId } from '../../utils/identifier.utils';
15 | import { SocketEvent, SocketResponse } from '../../interfaces/socket-data';
16 | import { State } from '../state-machine/state-machine';
17 | import { STUN_SERVERS } from '../../constants/stun-servers';
18 | import { EasyRTC } from '../../utils/easy-rtc';
19 | import { useBeforeunload } from 'react-beforeunload';
20 |
21 | export const Meeting = () => {
22 | const location = useLocation();
23 | const [state, setState] = useState
26 |
34 |
27 |
28 | MeetJS
29 |
30 |
31 | Github
32 |
33 |
35 | Do you want a free video chat platform?
36 | Get you own URL and share it with others to join you.
37 |
48 |
49 |
229 |
287 | )
288 | }
--------------------------------------------------------------------------------
/meetjs-react/src/components/session-modal/modal.scss:
--------------------------------------------------------------------------------
1 | .modal {
2 | width: 100%;
3 | position: relative;
4 | display: flex;
5 | align-items: center;
6 | justify-content: center;
7 |
8 | &__wrapper {
9 | border-radius: 5px;
10 | z-index: 1;
11 | width: 400px;
12 | height: 250px;
13 | background-color: #F7F7F7;
14 |
15 | &__body {
16 | padding-left: 20px;
17 | width: 100%;
18 | height: 100%;
19 | position: relative;
20 | display: flex;
21 | flex-direction: row;
22 |
23 | &__form {
24 | width: 92%;
25 | display: flex;
26 | flex-direction: column;
27 | margin-top: 50px;
28 |
29 | &__small-text {
30 | font-family: 'Quicksand-Regular';
31 | font-size: 14px;
32 | }
33 |
34 | &__big-text {
35 | font-family: 'Quicksand-Bold';
36 | font-size: 17px;
37 | }
38 |
39 | &__input {
40 | outline: none;
41 | border: 0;
42 | padding-left: 10px;
43 | border-radius: 2px;
44 | width: 100%;
45 | height: 35px;
46 | margin-top: 10px;
47 | box-shadow: 0px 0px 5px 1px rgba(237,237,237,1);
48 | }
49 |
50 | &__connect {
51 | font-family: 'Quicksand-Bold';
52 | margin-top: 10px;
53 | border: 0;
54 | outline: 0;
55 | cursor: pointer;
56 | width: 100%;
57 | height: 35px;
58 | background-color: #ED7655;
59 | border-radius: 5px;
60 | color: white;
61 | }
62 |
63 | &-error {
64 | margin-top: 5px;
65 | color: #CE0B29;
66 | font-size: 10px;
67 | font-family: 'Quicksand-Bold';
68 | }
69 | }
70 | }
71 | }
72 | }
--------------------------------------------------------------------------------
/meetjs-react/src/components/session-modal/modal.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import './modal.scss';
3 |
4 | interface Props {
5 | connect: (host: string, password: string) => void;
6 | error: boolean;
7 | }
8 |
9 | export const SessionCredentials = (props: Props) => {
10 | const [host, setHost] = useState
230 |
238 |
231 |
232 | MeetJS
233 |
234 |
235 | Github
236 |
237 |
239 | {state <= 2 &&
286 | Join the meeting to communicate with others.
243 | )
244 | }
245 | {state === State.JOINED && (
246 |
247 | {
248 | users.map((user, index) => {
249 | return (
250 |
255 | )
256 | })
257 | }
258 |
259 | )}
260 | {state > 2 &&
261 | (
262 |
263 |
283 | )
284 | }
285 |
264 |
266 |
267 |
268 |
273 |
269 | {state === State.JOINED ? 'Leave' : 'Join'}
270 |
271 | {title}
272 |
274 | {
275 | state === State.JOINED &&
276 | {users.length} online users
277 | }
278 | setViewMode(!viewMode)} />
279 | setAudio(!audio)} />
280 | setVideo(!video)} />
281 |
282 |
22 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/meetjs-react/src/components/state-machine/state-machine.tsx:
--------------------------------------------------------------------------------
1 | export enum State {
2 | VALID_URL = 1,
3 | INVALID,
4 | LOGGED,
5 | JOINED
6 | }
--------------------------------------------------------------------------------
/meetjs-react/src/constants/stun-servers.ts:
--------------------------------------------------------------------------------
1 | export const STUN_SERVERS = {
2 | iceServers: [
3 | { urls: 'stun:stun3.l.google.com:19302' },
4 | { urls: 'stun:stun4.l.google.com:19302' },
5 | ],
6 | }
--------------------------------------------------------------------------------
/meetjs-react/src/fonts.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'Quicksand-Bold';
3 | src: local('Lato'), url(./assets/fonts/Quicksand_Bold.otf) format('opentype');
4 | }
5 |
6 | @font-face {
7 | font-family: 'Quicksand-Regular';
8 | src: local('Lato'), url(./assets/fonts/Quicksand_Book.otf) format('opentype');
9 | }
--------------------------------------------------------------------------------
/meetjs-react/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import * as serviceWorker from './serviceWorker';
5 |
6 | ReactDOM.render(
7 |
23 |
34 |
24 |
32 |
33 |