[mirotalk] - refactoring

This commit is contained in:
Miroslav Pejic
2021-10-08 00:50:56 +02:00
parent 1f51d88b99
commit 59665d0ad5
73 changed files with 65 additions and 67 deletions
+7 -9
View File
@@ -1,4 +1,4 @@
# MiroTalk
# MiroTalk P2P
🚀 `A free WebRTC browser-based video call, chat and screen sharing` 🚀
@@ -19,15 +19,13 @@ Powered by `WebRTC` using google Stun and [numb](http://numb.viagenie.ca/) Turn.
Open the app with the following **supported browsers** & many more...
[//]: #![webrtc](www/images/webrtc.png)
[![Foo](www/images/browsers.png)](https://mirotalk.herokuapp.com/)
[![Foo](public/images/browsers.png)](https://mirotalk.herokuapp.com/)
## https://mirotalk.herokuapp.com/
<br>
[![mirotalk](www/images/preview.png)](https://mirotalk.herokuapp.com/)
[![mirotalk](public/images/preview.png)](https://mirotalk.herokuapp.com/)
## Features
@@ -52,7 +50,7 @@ Open the app with the following **supported browsers** & many more...
- Possibility to Change UI Themes
- Right-click on the Video elements for more options
- Direct `peer-to-peer` connection ensures the lowest latency thanks to `WebRTC`
- Supports [REST API](api/README.md) (Application Programming Interface)
- Supports [REST API](app/api/README.md) (Application Programming Interface)
## Demo
@@ -128,7 +126,7 @@ If you want `MiroTalk` to be `reachable` from the `outside` of your local networ
`demo` https://mirotalk.herokuapp.com/
[![heroku-qr](www/images/mirotalk-heroku-qr.png)](https://mirotalk.herokuapp.com/)
[![heroku-qr](public/images/mirotalk-heroku-qr.png)](https://mirotalk.herokuapp.com/)
<br>
@@ -136,7 +134,7 @@ If you want `MiroTalk` to be `reachable` from the `outside` of your local networ
`demo` https://mirotalk.up.railway.app/
[![railway-qr](www/images/mirotalk-railway-qr.png)](https://mirotalk.up.railway.app/)
[![railway-qr](public/images/mirotalk-railway-qr.png)](https://mirotalk.up.railway.app/)
---
@@ -163,7 +161,7 @@ From where I took inspiration for this project. ❤️
## License
[![AGPLv3](www/images/AGPLv3.png)](LICENSE)
[![AGPLv3](public/images/AGPLv3.png)](LICENSE)
---
View File

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File
+11 -11
View File
@@ -61,8 +61,8 @@ let io, server, host;
if (isHttps) {
const fs = require('fs');
const options = {
key: fs.readFileSync(path.join(__dirname, '/ssl/key.pem'), 'utf-8'),
cert: fs.readFileSync(path.join(__dirname, '/ssl/cert.pem'), 'utf-8'),
key: fs.readFileSync(path.join(__dirname, '../ssl/key.pem'), 'utf-8'),
cert: fs.readFileSync(path.join(__dirname, '../ssl/cert.pem'), 'utf-8'),
};
server = https.createServer(options, app);
io = new Server().listen(server);
@@ -76,7 +76,7 @@ if (isHttps) {
const ngrok = require('ngrok');
const yamlJS = require('yamljs');
const swaggerUi = require('swagger-ui-express');
const swaggerDocument = yamlJS.load(path.join(__dirname + '/api/swagger.yaml'));
const swaggerDocument = yamlJS.load(path.join(__dirname + '/../api/swagger.yaml'));
const { v4: uuidV4 } = require('uuid');
const apiBasePath = '/api/v1'; // api endpoint path
@@ -96,8 +96,8 @@ let channels = {}; // collect channels
let sockets = {}; // collect sockets
let peers = {}; // collect peers info grp by channels
// Use all static files from the www folder
app.use(express.static(path.join(__dirname, 'www')));
// Use all static files from the public folder
app.use(express.static(path.join(__dirname, '../../', 'public')));
// Api parse body data as json
app.use(express.json());
@@ -122,27 +122,27 @@ app.use((err, req, res, next) => {
/*
app.get(["/"], (req, res) => {
res.sendFile(path.join(__dirname, "www/client.html"))
res.sendFile(path.join(__dirname, "public/view/client.html"))
}); */
// all start from here
app.get(['/'], (req, res) => {
res.sendFile(path.join(__dirname, 'www/landing.html'));
res.sendFile(path.join(__dirname, '../../', 'public/view/landing.html'));
});
// set new room name and join
app.get(['/newcall'], (req, res) => {
res.sendFile(path.join(__dirname, 'www/newcall.html'));
res.sendFile(path.join(__dirname, '../../', 'public/view/newcall.html'));
});
// if not allow video/audio
app.get(['/permission'], (req, res) => {
res.sendFile(path.join(__dirname, 'www/permission.html'));
res.sendFile(path.join(__dirname, '../../', 'public/view/permission.html'));
});
// privacy policy
app.get(['/privacy'], (req, res) => {
res.sendFile(path.join(__dirname, 'www/privacy.html'));
res.sendFile(path.join(__dirname, '../../', 'public/view/privacy.html'));
});
// no room name specified to join
@@ -156,7 +156,7 @@ app.get('/join/*', (req, res) => {
log.debug('redirect:' + req.url + ' to ' + url.parse(req.url).pathname);
res.redirect(url.parse(req.url).pathname);
} else {
res.sendFile(path.join(__dirname, 'www/client.html'));
res.sendFile(path.join(__dirname, '../../', 'public/view/client.html'));
}
});
View File
View File
View File

Before

Width:  |  Height:  |  Size: 6.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

View File
+1 -1
View File
@@ -4,7 +4,7 @@
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
"start": "node server.js",
"start": "node app/src/server.js",
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "npx prettier --write ."
},

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 77 KiB

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 57 KiB

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Before

Width:  |  Height:  |  Size: 718 B

After

Width:  |  Height:  |  Size: 718 B

Before

Width:  |  Height:  |  Size: 840 B

After

Width:  |  Height:  |  Size: 840 B

Before

Width:  |  Height:  |  Size: 854 B

After

Width:  |  Height:  |  Size: 854 B

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

Before

Width:  |  Height:  |  Size: 860 B

After

Width:  |  Height:  |  Size: 860 B

Before

Width:  |  Height:  |  Size: 3.3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

Before

Width:  |  Height:  |  Size: 215 KiB

After

Width:  |  Height:  |  Size: 215 KiB

Before

Width:  |  Height:  |  Size: 215 KiB

After

Width:  |  Height:  |  Size: 215 KiB

Before

Width:  |  Height:  |  Size: 187 KiB

After

Width:  |  Height:  |  Size: 187 KiB

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

Before

Width:  |  Height:  |  Size: 7.8 MiB

After

Width:  |  Height:  |  Size: 7.8 MiB

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 16 KiB

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Before

Width:  |  Height:  |  Size: 399 KiB

After

Width:  |  Height:  |  Size: 399 KiB

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Before

Width:  |  Height:  |  Size: 128 KiB

After

Width:  |  Height:  |  Size: 128 KiB

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

+7 -7
View File
@@ -17,8 +17,8 @@
<!-- Title and Icon -->
<title>MiroTalk WebRTC Video call, Chat Room & Screen Sharing.</title>
<link rel="shortcut icon" href="images/logo.svg" />
<link rel="apple-touch-icon" href="images/logo.svg" />
<link rel="shortcut icon" href="../images/logo.svg" />
<link rel="apple-touch-icon" href="../images/logo.svg" />
<!-- Meta Information -->
@@ -42,14 +42,14 @@
<meta property="og:site_name" content="MiroTalk" />
<meta property="og:title" content="Click the link to join this call." />
<meta property="og:description" content="Free WebRTC browser-based video call." />
<meta property="og:image" content="/images/mirotalk.png" />
<meta property="og:image" content="https://mirotalk.up.railway.app/images/preview.png" />
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="../images/favicon.png" />
<!-- StyleSheet -->
<link rel="stylesheet" href="/css/client.css" />
<link rel="stylesheet" href="/css/whiteboard.css" />
<link rel="stylesheet" href="../css/client.css" />
<link rel="stylesheet" href="../css/whiteboard.css" />
<!-- https://animate.style 4 using for swal fadeIn-Out -->
@@ -445,7 +445,7 @@ access to use this app.
<script defer src="https://unpkg.com/@popperjs/core@2"></script>
<script defer src="https://unpkg.com/tippy.js@6"></script>
<script defer src="/socket.io/socket.io.js"></script>
<script defer src="/js/client.js"></script>
<script defer src="../js/client.js"></script>
<!-- end of Js scripts -->
+17 -17
View File
@@ -17,8 +17,8 @@
<!-- Title and Icon -->
<title>MiroTalk a Free Secure Video Calls, Chat & Screen Sharing.</title>
<link rel="shortcut icon" href="images/logo.svg" />
<link rel="apple-touch-icon" href="images/logo.svg" />
<link rel="shortcut icon" href="../images/logo.svg" />
<link rel="apple-touch-icon" href="../images/logo.svg" />
<!-- Meta Information -->
@@ -44,12 +44,12 @@
property="og:description"
content="MiroTalk calling provides real-time HD quality and latency simply not available with traditional technology."
/>
<meta property="og:image" content="/images/preview.png" />
<meta property="og:image" content="https://mirotalk.up.railway.app/images/preview.png" />
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
<!-- StyleSheet -->
<link rel="stylesheet" href="css/landing.css" />
<link rel="stylesheet" href="../css/landing.css" />
</head>
<body class="has-animations">
<div class="body-wrap">
@@ -58,7 +58,7 @@
<div class="site-header-inner">
<div class="brand">
<div class="m-0">
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
<a href="/"><img src="../images/logo.svg" alt="Neon" width="32" height="32" /></a>
</div>
</div>
</div>
@@ -132,7 +132,7 @@
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-02.svg"
src="../images/feature-tile-icon-02.svg"
alt="Screen Sharing"
width="72"
height="72"
@@ -154,7 +154,7 @@
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-04.svg"
src="../images/feature-tile-icon-04.svg"
alt="WebCam Streaming"
width="72"
height="72"
@@ -176,7 +176,7 @@
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-01.svg"
src="../images/feature-tile-icon-01.svg"
alt="Chat Room"
width="72"
height="72"
@@ -198,7 +198,7 @@
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-03.svg"
src="../images/feature-tile-icon-03.svg"
alt="Meeting Recording"
width="72"
height="72"
@@ -220,7 +220,7 @@
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-06.svg"
src="../images/feature-tile-icon-06.svg"
alt="Interactive Whiteboard"
width="72"
height="72"
@@ -242,7 +242,7 @@
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-02.svg"
src="../images/feature-tile-icon-02.svg"
alt="File Sharing"
width="72"
height="72"
@@ -264,7 +264,7 @@
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-05.svg"
src="../images/feature-tile-icon-05.svg"
alt="Total Privacy"
width="72"
height="72"
@@ -286,7 +286,7 @@
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16">
<img
src="images/feature-tile-icon-05.svg"
src="../images/feature-tile-icon-05.svg"
alt="Maximum Security"
width="72"
height="72"
@@ -321,7 +321,7 @@
<div class="team-item-header">
<div class="team-item-image mb-24">
<img
src="images/browsers.png"
src="../images/browsers.png"
alt="Supported Browsers"
width="auto"
height="auto"
@@ -356,7 +356,7 @@
<div class="team-item-header">
<div class="team-item-image mb-24">
<img
src="images/miroslav-pejic.png"
src="../images/miroslav-pejic.png"
alt="Team member author"
width="180"
height="180"
@@ -410,7 +410,7 @@
<div class="site-footer-inner">
<div class="footer-top space-between text-xxs">
<div class="brand">
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
<a href="/"><img src="../images/logo.svg" alt="Neon" width="32" height="32" /></a>
</div>
<div class="footer-social">
<ul class="list-reset">
@@ -466,6 +466,6 @@
</div>
</footer>
</div>
<script defer src="js/landing.js"></script>
<script defer src="../js/landing.js"></script>
</body>
</html>
@@ -17,8 +17,8 @@
<!-- Title and Icon -->
<title>MiroTalk ~ Create your Room name and start the new call.</title>
<link rel="shortcut icon" href="images/logo.svg" />
<link rel="apple-touch-icon" href="images/logo.svg" />
<link rel="shortcut icon" href="../images/logo.svg" />
<link rel="apple-touch-icon" href="../images/logo.svg" />
<!-- Meta Information -->
@@ -44,13 +44,13 @@
property="og:description"
content="MiroTalk calling provides real-time HD quality and latency simply not available with traditional technology."
/>
<meta property="og:image" content="/images/preview.png" />
<meta property="og:image" content="https://mirotalk.up.railway.app/images/preview.png" />
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
<!-- StyleSheet -->
<link rel="stylesheet" href="css/landing.css" />
<link rel="stylesheet" href="css/newcall.css" />
<link rel="stylesheet" href="../css/landing.css" />
<link rel="stylesheet" href="../css/newcall.css" />
</head>
<body class="has-animations">
<div class="body-wrap">
@@ -59,7 +59,7 @@
<div class="site-header-inner">
<div class="brand">
<div class="m-0">
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
<a href="/"><img src="../images/logo.svg" alt="Neon" width="32" height="32" /></a>
</div>
</div>
</div>
@@ -128,7 +128,7 @@
<div class="site-footer-inner">
<div class="footer-top space-between text-xxs">
<div class="brand">
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
<a href="/"><img src="../images/logo.svg" alt="Neon" width="32" height="32" /></a>
</div>
<div class="footer-social">
<ul class="list-reset">
@@ -184,7 +184,7 @@
</div>
</footer>
</div>
<script defer src="js/landing.js"></script>
<script defer src="js/newroom.js"></script>
<script defer src="../js/landing.js"></script>
<script defer src="../js/newroom.js"></script>
</body>
</html>
@@ -17,8 +17,8 @@
<!-- Title and Icon -->
<title>MiroTalk ~ Allow Video and Audio access to join in the Room.</title>
<link rel="shortcut icon" href="images/logo.svg" />
<link rel="apple-touch-icon" href="images/logo.svg" />
<link rel="shortcut icon" href="../images/logo.svg" />
<link rel="apple-touch-icon" href="../images/logo.svg" />
<!-- Meta Information -->
@@ -35,12 +35,12 @@
property="og:description"
content="MiroTalk calling provides real-time HD quality and latency simply not available with traditional technology."
/>
<meta property="og:image" content="/images/preview.png" />
<meta property="og:image" content="https://mirotalk.up.railway.app/images/preview.png" />
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
<!-- StyleSheet -->
<link rel="stylesheet" href="css/landing.css" />
<link rel="stylesheet" href="../css/landing.css" />
</head>
<body class="has-animations">
<div class="body-wrap">
@@ -49,7 +49,7 @@
<div class="site-header-inner">
<div class="brand">
<div class="m-0">
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
<a href="/"><img src="../images/logo.svg" alt="Neon" width="32" height="32" /></a>
</div>
</div>
</div>
@@ -122,7 +122,7 @@
<div class="site-footer-inner">
<div class="footer-top space-between text-xxs">
<div class="brand">
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
<a href="/"><img src="../images/logo.svg" alt="Neon" width="32" height="32" /></a>
</div>
<div class="footer-social">
<ul class="list-reset">
@@ -17,8 +17,8 @@
<!-- Title and Icon -->
<title>MiroTalk ~ privacy policy.</title>
<link rel="shortcut icon" href="images/logo.svg" />
<link rel="apple-touch-icon" href="images/logo.svg" />
<link rel="shortcut icon" href="../images/logo.svg" />
<link rel="apple-touch-icon" href="../images/logo.svg" />
<!-- Meta Information -->
@@ -44,12 +44,12 @@
property="og:description"
content="MiroTalk calling provides real-time HD quality and latency simply not available with traditional technology."
/>
<meta property="og:image" content="/images/preview.png" />
<meta property="og:image" content="https://mirotalk.up.railway.app/images/preview.png" />
<meta property="og:url" content="https://mirotalk.herokuapp.com/" />
<!-- StyleSheet -->
<link rel="stylesheet" href="css/landing.css" />
<link rel="stylesheet" href="../css/landing.css" />
</head>
<body class="has-animations">
<div class="body-wrap">
@@ -58,7 +58,7 @@
<div class="site-header-inner">
<div class="brand">
<div class="m-0">
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
<a href="/"><img src="../images/logo.svg" alt="Neon" width="32" height="32" /></a>
</div>
</div>
</div>
@@ -162,7 +162,7 @@
<div class="site-footer-inner">
<div class="footer-top space-between text-xxs">
<div class="brand">
<a href="/"><img src="images/logo.svg" alt="Neon" width="32" height="32" /></a>
<a href="/"><img src="../images/logo.svg" alt="Neon" width="32" height="32" /></a>
</div>
<div class="footer-social">
<ul class="list-reset">
@@ -215,6 +215,6 @@
</div>
</footer>
</div>
<script defer src="js/landing.js"></script>
<script defer src="../js/landing.js"></script>
</body>
</html>