[mirotalk] - init commit
This commit is contained in:
Miroslav Pejic
@@ -0,0 +1,15 @@
|
||||
# Ngrok
|
||||
# 1. Goto https://ngrok.com
|
||||
# 2. Get started for free
|
||||
|
||||
NGROK_ENABLED=true/false
|
||||
NGROK_AUTH_TOKEN=YourNgrokAuthToken
|
||||
|
||||
# Turn
|
||||
# 1. Goto http://numb.viagenie.ca/
|
||||
# 2. Create an account
|
||||
# 3. Check: https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/
|
||||
|
||||
TURN_URLS=turn:numb.viagenie.ca
|
||||
TURN_USERNAME=YourNumbUsername
|
||||
TURN=PASSWORD=YourNumbPassword
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
# git folder
|
||||
.git
|
||||
|
||||
# NPM
|
||||
node_modules
|
||||
npm-debug.log
|
||||
|
||||
# Package
|
||||
package-lock.json
|
||||
|
||||
# Testing
|
||||
.nyc_output
|
||||
|
||||
# Mac
|
||||
.DS_Store
|
||||
|
||||
# cache
|
||||
.cache
|
||||
|
||||
# env
|
||||
.env
|
||||
@@ -0,0 +1,89 @@
|
||||
Copyright (c) 2020 Miroslav Pejic <miroslav.pejic.85@gmail.com>
|
||||
|
||||
Creative Commons Attribution-NonCommercial 4.0 International Public License
|
||||
By exercising the Licensed Rights (defined below), You accept and agree to be bound by the terms and conditions of this Creative Commons Attribution-NonCommercial 4.0 International Public License ("Public License"). To the extent this Public License may be interpreted as a contract, You are granted the Licensed Rights in consideration of Your acceptance of these terms and conditions, and the Licensor grants You such rights in consideration of benefits the Licensor receives from making the Licensed Material available under these terms and conditions.
|
||||
|
||||
Section 1 – Definitions.
|
||||
|
||||
Adapted Material means material subject to Copyright and Similar Rights that is derived from or based upon the Licensed Material and in which the Licensed Material is translated, altered, arranged, transformed, or otherwise modified in a manner requiring permission under the Copyright and Similar Rights held by the Licensor. For purposes of this Public License, where the Licensed Material is a musical work, performance, or sound recording, Adapted Material is always produced where the Licensed Material is synched in timed relation with a moving image.
|
||||
Adapter's License means the license You apply to Your Copyright and Similar Rights in Your contributions to Adapted Material in accordance with the terms and conditions of this Public License.
|
||||
Copyright and Similar Rights means copyright and/or similar rights closely related to copyright including, without limitation, performance, broadcast, sound recording, and Sui Generis Database Rights, without regard to how the rights are labeled or categorized. For purposes of this Public License, the rights specified in Section 2(b)(1)-(2) are not Copyright and Similar Rights.
|
||||
Effective Technological Measures means those measures that, in the absence of proper authority, may not be circumvented under laws fulfilling obligations under Article 11 of the WIPO Copyright Treaty adopted on December 20, 1996, and/or similar international agreements.
|
||||
Exceptions and Limitations means fair use, fair dealing, and/or any other exception or limitation to Copyright and Similar Rights that applies to Your use of the Licensed Material.
|
||||
Licensed Material means the artistic or literary work, database, or other material to which the Licensor applied this Public License.
|
||||
Licensed Rights means the rights granted to You subject to the terms and conditions of this Public License, which are limited to all Copyright and Similar Rights that apply to Your use of the Licensed Material and that the Licensor has authority to license.
|
||||
Licensor means the individual(s) or entity(ies) granting rights under this Public License.
|
||||
NonCommercial means not primarily intended for or directed towards commercial advantage or monetary compensation. For purposes of this Public License, the exchange of the Licensed Material for other material subject to Copyright and Similar Rights by digital file-sharing or similar means is NonCommercial provided there is no payment of monetary compensation in connection with the exchange.
|
||||
Share means to provide material to the public by any means or process that requires permission under the Licensed Rights, such as reproduction, public display, public performance, distribution, dissemination, communication, or importation, and to make material available to the public including in ways that members of the public may access the material from a place and at a time individually chosen by them.
|
||||
Sui Generis Database Rights means rights other than copyright resulting from Directive 96/9/EC of the European Parliament and of the Council of 11 March 1996 on the legal protection of databases, as amended and/or succeeded, as well as other essentially equivalent rights anywhere in the world.
|
||||
You means the individual or entity exercising the Licensed Rights under this Public License. Your has a corresponding meaning.
|
||||
Section 2 – Scope.
|
||||
|
||||
License grant.
|
||||
Subject to the terms and conditions of this Public License, the Licensor hereby grants You a worldwide, royalty-free, non-sublicensable, non-exclusive, irrevocable license to exercise the Licensed Rights in the Licensed Material to:
|
||||
reproduce and Share the Licensed Material, in whole or in part, for NonCommercial purposes only; and
|
||||
produce, reproduce, and Share Adapted Material for NonCommercial purposes only.
|
||||
Exceptions and Limitations. For the avoidance of doubt, where Exceptions and Limitations apply to Your use, this Public License does not apply, and You do not need to comply with its terms and conditions.
|
||||
Term. The term of this Public License is specified in Section 6(a).
|
||||
Media and formats; technical modifications allowed. The Licensor authorizes You to exercise the Licensed Rights in all media and formats whether now known or hereafter created, and to make technical modifications necessary to do so. The Licensor waives and/or agrees not to assert any right or authority to forbid You from making technical modifications necessary to exercise the Licensed Rights, including technical modifications necessary to circumvent Effective Technological Measures. For purposes of this Public License, simply making modifications authorized by this Section 2(a)(4) never produces Adapted Material.
|
||||
Downstream recipients.
|
||||
Offer from the Licensor – Licensed Material. Every recipient of the Licensed Material automatically receives an offer from the Licensor to exercise the Licensed Rights under the terms and conditions of this Public License.
|
||||
No downstream restrictions. You may not offer or impose any additional or different terms or conditions on, or apply any Effective Technological Measures to, the Licensed Material if doing so restricts exercise of the Licensed Rights by any recipient of the Licensed Material.
|
||||
No endorsement. Nothing in this Public License constitutes or may be construed as permission to assert or imply that You are, or that Your use of the Licensed Material is, connected with, or sponsored, endorsed, or granted official status by, the Licensor or others designated to receive attribution as provided in Section 3(a)(1)(A)(i).
|
||||
Other rights.
|
||||
|
||||
Moral rights, such as the right of integrity, are not licensed under this Public License, nor are publicity, privacy, and/or other similar personality rights; however, to the extent possible, the Licensor waives and/or agrees not to assert any such rights held by the Licensor to the limited extent necessary to allow You to exercise the Licensed Rights, but not otherwise.
|
||||
Patent and trademark rights are not licensed under this Public License.
|
||||
To the extent possible, the Licensor waives any right to collect royalties from You for the exercise of the Licensed Rights, whether directly or through a collecting society under any voluntary or waivable statutory or compulsory licensing scheme. In all other cases the Licensor expressly reserves any right to collect such royalties, including when the Licensed Material is used other than for NonCommercial purposes.
|
||||
Section 3 – License Conditions.
|
||||
|
||||
Your exercise of the Licensed Rights is expressly made subject to the following conditions.
|
||||
|
||||
Attribution.
|
||||
|
||||
If You Share the Licensed Material (including in modified form), You must:
|
||||
|
||||
retain the following if it is supplied by the Licensor with the Licensed Material:
|
||||
identification of the creator(s) of the Licensed Material and any others designated to receive attribution, in any reasonable manner requested by the Licensor (including by pseudonym if designated);
|
||||
a copyright notice;
|
||||
a notice that refers to this Public License;
|
||||
a notice that refers to the disclaimer of warranties;
|
||||
a URI or hyperlink to the Licensed Material to the extent reasonably practicable;
|
||||
indicate if You modified the Licensed Material and retain an indication of any previous modifications; and
|
||||
indicate the Licensed Material is licensed under this Public License, and include the text of, or the URI or hyperlink to, this Public License.
|
||||
You may satisfy the conditions in Section 3(a)(1) in any reasonable manner based on the medium, means, and context in which You Share the Licensed Material. For example, it may be reasonable to satisfy the conditions by providing a URI or hyperlink to a resource that includes the required information.
|
||||
If requested by the Licensor, You must remove any of the information required by Section 3(a)(1)(A) to the extent reasonably practicable.
|
||||
If You Share Adapted Material You produce, the Adapter's License You apply must not prevent recipients of the Adapted Material from complying with this Public License.
|
||||
Section 4 – Sui Generis Database Rights.
|
||||
|
||||
Where the Licensed Rights include Sui Generis Database Rights that apply to Your use of the Licensed Material:
|
||||
|
||||
for the avoidance of doubt, Section 2(a)(1) grants You the right to extract, reuse, reproduce, and Share all or a substantial portion of the contents of the database for NonCommercial purposes only;
|
||||
if You include all or a substantial portion of the database contents in a database in which You have Sui Generis Database Rights, then the database in which You have Sui Generis Database Rights (but not its individual contents) is Adapted Material; and
|
||||
You must comply with the conditions in Section 3(a) if You Share all or a substantial portion of the contents of the database.
|
||||
For the avoidance of doubt, this Section 4 supplements and does not replace Your obligations under this Public License where the Licensed Rights include other Copyright and Similar Rights.
|
||||
Section 5 – Disclaimer of Warranties and Limitation of Liability.
|
||||
|
||||
Unless otherwise separately undertaken by the Licensor, to the extent possible, the Licensor offers the Licensed Material as-is and as-available, and makes no representations or warranties of any kind concerning the Licensed Material, whether express, implied, statutory, or other. This includes, without limitation, warranties of title, merchantability, fitness for a particular purpose, non-infringement, absence of latent or other defects, accuracy, or the presence or absence of errors, whether or not known or discoverable. Where disclaimers of warranties are not allowed in full or in part, this disclaimer may not apply to You.
|
||||
To the extent possible, in no event will the Licensor be liable to You on any legal theory (including, without limitation, negligence) or otherwise for any direct, special, indirect, incidental, consequential, punitive, exemplary, or other losses, costs, expenses, or damages arising out of this Public License or use of the Licensed Material, even if the Licensor has been advised of the possibility of such losses, costs, expenses, or damages. Where a limitation of liability is not allowed in full or in part, this limitation may not apply to You.
|
||||
The disclaimer of warranties and limitation of liability provided above shall be interpreted in a manner that, to the extent possible, most closely approximates an absolute disclaimer and waiver of all liability.
|
||||
Section 6 – Term and Termination.
|
||||
|
||||
This Public License applies for the term of the Copyright and Similar Rights licensed here. However, if You fail to comply with this Public License, then Your rights under this Public License terminate automatically.
|
||||
Where Your right to use the Licensed Material has terminated under Section 6(a), it reinstates:
|
||||
|
||||
automatically as of the date the violation is cured, provided it is cured within 30 days of Your discovery of the violation; or
|
||||
upon express reinstatement by the Licensor.
|
||||
For the avoidance of doubt, this Section 6(b) does not affect any right the Licensor may have to seek remedies for Your violations of this Public License.
|
||||
For the avoidance of doubt, the Licensor may also offer the Licensed Material under separate terms or conditions or stop distributing the Licensed Material at any time; however, doing so will not terminate this Public License.
|
||||
Sections 1, 5, 6, 7, and 8 survive termination of this Public License.
|
||||
Section 7 – Other Terms and Conditions.
|
||||
|
||||
The Licensor shall not be bound by any additional or different terms or conditions communicated by You unless expressly agreed.
|
||||
Any arrangements, understandings, or agreements regarding the Licensed Material not stated herein are separate from and independent of the terms and conditions of this Public License.
|
||||
Section 8 – Interpretation.
|
||||
|
||||
For the avoidance of doubt, this Public License does not, and shall not be interpreted to, reduce, limit, restrict, or impose conditions on any use of the Licensed Material that could lawfully be made without permission under this Public License.
|
||||
To the extent possible, if any provision of this Public License is deemed unenforceable, it shall be automatically reformed to the minimum extent necessary to make it enforceable. If the provision cannot be reformed, it shall be severed from this Public License without affecting the enforceability of the remaining terms and conditions.
|
||||
No term or condition of this Public License will be waived and no failure to comply consented to unless expressly agreed to by the Licensor.
|
||||
Nothing in this Public License constitutes or may be interpreted as a limitation upon, or waiver of, any privileges and immunities that apply to the Licensor or You, including from the legal processes of any jurisdiction or authority.
|
||||
@@ -0,0 +1,74 @@
|
||||
# mirotalk
|
||||
|
||||
`A free WebRTC browser-based video call and screen sharing`
|
||||
|
||||
[//]: https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>
|
||||
|
||||
[](https://www.linkedin.com/in/miroslav-pejic-976a07101/)
|
||||
|
||||
[](https://www.paypal.com/donate?hosted_button_id=UX54YTCEG9GL4)
|
||||
[](https://github.com/miroslavpejic85/mirotalk)
|
||||
[](https://github.com/prettier/prettier)
|
||||
[](https://gitter.im/mirotalk/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
|
||||
|
||||
[//]: https://www.mirotalk.com
|
||||
|
||||
Powered by `WebRTC` using google STUN and [numb](http://numb.viagenie.ca/) TURN infrastructure. `mirotalk` provides video quality and latency simply not available with traditional technology.
|
||||
|
||||
[//]: #
|
||||
|
||||
<br>
|
||||
|
||||
|
||||
|
||||
## Features
|
||||
|
||||
- RoomUrl Sharing
|
||||
- WebCam (front - rear)
|
||||
- Audio
|
||||
- Screen Sharing
|
||||
- No download required, entirely browser based
|
||||
- Direct peer to peer connection ensures lowest latency
|
||||
|
||||
## Quick start
|
||||
|
||||
- You will need to have [Node.js](https://nodejs.org/it/) installed, this project has been tested with Node version 12.X
|
||||
- Clone this repo
|
||||
|
||||
```bash
|
||||
git clone git@github.com:miroslavpejic85/mirotalk.git
|
||||
cd mirotalk
|
||||
```
|
||||
|
||||
## Set up credentials
|
||||
|
||||
- Copy .env.template to .env `cp .env.template .env`
|
||||
- Create an account on http://numb.viagenie.ca
|
||||
- Get your Account USERNAME and PASSWORD
|
||||
- Fill in your credentials in the `.env` file
|
||||
|
||||
## Install dependencies
|
||||
|
||||
```js
|
||||
npm install
|
||||
```
|
||||
|
||||
## Start the server
|
||||
|
||||
```js
|
||||
npm start
|
||||
```
|
||||
|
||||
- Open `http://localhost:3000` in browser
|
||||
- If you want to use a client on another computer/network, make sure you publish your server on an HTTPS connection.
|
||||
You can use a service like [ngrok](https://ngrok.com/) for that. (`ngrok http 3000`)
|
||||
|
||||
## Contributing
|
||||
|
||||
Pull Requests are welcome! :slightly_smiling_face:
|
||||
|
||||
Please run [prettier](https://prettier.io) on all of your PRs before submitting, this can be done with `prettier --write mirotalk/` in the project directory.
|
||||
|
||||
For communication we use Gitter Chat which can be found here:
|
||||
|
||||
[](https://gitter.im/mirotalk/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "mirotalk",
|
||||
"version": "1.0.0",
|
||||
"description": "A free WebRTC browser-based video call",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/miroslavpejic85/mirotalk"
|
||||
},
|
||||
"author": "Miroslav Pejic",
|
||||
"license": "CC-BY-NC-ND-4.0",
|
||||
"homepage": "https://github.com/miroslavpejic85/mirotalk",
|
||||
"dependencies": {
|
||||
"dotenv": "^8.2.0",
|
||||
"express": "^4.17.1",
|
||||
"ngrok": "^3.3.0",
|
||||
"socket.io": "^3.0.4"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,221 @@
|
||||
/*
|
||||
http://patorjk.com/software/taag/#p=display&f=ANSI%20Regular&t=Server
|
||||
|
||||
███████ ███████ ██████ ██ ██ ███████ ██████
|
||||
██ ██ ██ ██ ██ ██ ██ ██ ██
|
||||
███████ █████ ██████ ██ ██ █████ ██████
|
||||
██ ██ ██ ██ ██ ██ ██ ██ ██
|
||||
███████ ███████ ██ ██ ████ ███████ ██ ██
|
||||
*/
|
||||
|
||||
const PORT = 3000;
|
||||
|
||||
require("dotenv").config();
|
||||
const express = require("express");
|
||||
const path = require("path");
|
||||
const app = express();
|
||||
const http = require("http");
|
||||
const server = http.createServer(app);
|
||||
const { Server } = require("socket.io");
|
||||
const io = new Server().listen(server);
|
||||
const ngrok = require("ngrok");
|
||||
|
||||
// use all static files from the www folder
|
||||
app.use(express.static(path.join(__dirname, "www")));
|
||||
|
||||
// =====================================================
|
||||
// expose server to external with https tunnel using ngrok
|
||||
// =====================================================
|
||||
async function ngrokstart() {
|
||||
try {
|
||||
await ngrok.authtoken(process.env.NGROK_AUTH_TOKEN);
|
||||
await ngrok.connect(PORT);
|
||||
const api = ngrok.getApi();
|
||||
let data = await api.get("api/tunnels");
|
||||
data = JSON.parse(data);
|
||||
//console.log(data);
|
||||
const pu0 = data.tunnels[0].public_url;
|
||||
const pu1 = data.tunnels[1].public_url;
|
||||
const tunelHttps = pu0.startsWith("https") ? pu0 : pu1;
|
||||
console.log("ngrok-tunnel", { https: tunelHttps });
|
||||
// https://www.iditect.com/how-to/55122741.html
|
||||
} catch (e) {
|
||||
console.error("[Error] ngrokstart", e);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* You should probably use a different stun-turn server doing commercial stuff
|
||||
* Also see: https://gist.github.com/zziuni/3741933 or https://www.twilio.com/docs/stun-turn
|
||||
* Check the functionality of STUN/TURN servers: https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/
|
||||
*/
|
||||
var ice_servers = [
|
||||
{ urls: "stun:stun.l.google.com:19302" },
|
||||
{
|
||||
urls: process.env.TURN_URLS,
|
||||
username: process.env.TURN_USERNAME,
|
||||
credential: process.env.TURN_PASSWORD,
|
||||
},
|
||||
];
|
||||
|
||||
// =====================================================
|
||||
// Start Local Server with ngrok https tunel
|
||||
// =====================================================
|
||||
server.listen(PORT, null, function () {
|
||||
console.log(
|
||||
`%c
|
||||
|
||||
███████╗██╗ ██████╗ ███╗ ██╗ ███████╗███████╗██████╗ ██╗ ██╗███████╗██████╗
|
||||
██╔════╝██║██╔════╝ ████╗ ██║ ██╔════╝██╔════╝██╔══██╗██║ ██║██╔════╝██╔══██╗
|
||||
███████╗██║██║ ███╗██╔██╗ ██║█████╗███████╗█████╗ ██████╔╝██║ ██║█████╗ ██████╔╝
|
||||
╚════██║██║██║ ██║██║╚██╗██║╚════╝╚════██║██╔══╝ ██╔══██╗╚██╗ ██╔╝██╔══╝ ██╔══██╗
|
||||
███████║██║╚██████╔╝██║ ╚████║ ███████║███████╗██║ ██║ ╚████╔╝ ███████╗██║ ██║
|
||||
╚══════╝╚═╝ ╚═════╝ ╚═╝ ╚═══╝ ╚══════╝╚══════╝╚═╝ ╚═╝ ╚═══╝ ╚══════╝╚═╝ ╚═╝ started...
|
||||
|
||||
`,
|
||||
"font-family:monospace"
|
||||
);
|
||||
|
||||
if (process.env.NGROK_ENABLED == "true") {
|
||||
ngrokstart();
|
||||
}
|
||||
// init settings
|
||||
console.log("settings", {
|
||||
http: "http://localhost:" + PORT,
|
||||
iceServers: ice_servers,
|
||||
});
|
||||
});
|
||||
|
||||
// All URL patterns should served with the same file.
|
||||
app.get(["/", "/:room"], (req, res) =>
|
||||
res.sendFile(path.join(__dirname, "www/index.html"))
|
||||
);
|
||||
|
||||
var channels = {}; // collect channels
|
||||
var sockets = {}; // collect sockets
|
||||
|
||||
/**
|
||||
* Users will connect to the signaling server, after which they'll issue a "join"
|
||||
* to join a particular channel. The signaling server keeps track of all sockets
|
||||
* who are in a channel, and on join will send out 'addPeer' events to each pair
|
||||
* of users in a channel. When clients receive the 'addPeer' even they'll begin
|
||||
* setting up an RTCPeerConnection with one another. During this process they'll
|
||||
* need to relay ICECandidate information to one another, as well as SessionDescription
|
||||
* information. After all of that happens, they'll finally be able to complete
|
||||
* the peer connection and will be in streaming audio/video between eachother.
|
||||
*/
|
||||
// =====================================================
|
||||
// on peer connected
|
||||
// =====================================================
|
||||
io.sockets.on("connect", (socket) => {
|
||||
console.log("[" + socket.id + "] --> connection accepted");
|
||||
|
||||
socket.channels = {};
|
||||
sockets[socket.id] = socket;
|
||||
|
||||
// =====================================================
|
||||
// on peer diconnected
|
||||
// =====================================================
|
||||
socket.on("disconnect", () => {
|
||||
for (var channel in socket.channels) {
|
||||
removePeerFrom(channel);
|
||||
}
|
||||
console.log("[" + socket.id + "] <--> disconnected");
|
||||
delete sockets[socket.id];
|
||||
});
|
||||
|
||||
// =====================================================
|
||||
// on peer join
|
||||
// =====================================================
|
||||
socket.on("join", (config) => {
|
||||
console.log("[" + socket.id + "] --> join ", config);
|
||||
var channel = config.channel;
|
||||
|
||||
if (channel in socket.channels) {
|
||||
console.log("[" + socket.id + "] [Warning] already joined", channel);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(channel in channels)) {
|
||||
channels[channel] = {};
|
||||
}
|
||||
//
|
||||
for (id in channels[channel]) {
|
||||
// offer false
|
||||
channels[channel][id].emit("addPeer", {
|
||||
peer_id: socket.id,
|
||||
should_create_offer: false,
|
||||
iceServers: ice_servers,
|
||||
});
|
||||
// offer true
|
||||
socket.emit("addPeer", {
|
||||
peer_id: id,
|
||||
should_create_offer: true,
|
||||
iceServers: ice_servers,
|
||||
});
|
||||
console.log("[" + socket.id + "] emit add Peer [" + id + "]");
|
||||
}
|
||||
|
||||
channels[channel][socket.id] = socket;
|
||||
socket.channels[channel] = channel;
|
||||
});
|
||||
|
||||
// =====================================================
|
||||
// remove peers
|
||||
// =====================================================
|
||||
function removePeerFrom(channel) {
|
||||
if (!(channel in socket.channels)) {
|
||||
console.log("[" + socket.id + "] [Warning] not in ", channel);
|
||||
return;
|
||||
}
|
||||
|
||||
delete socket.channels[channel];
|
||||
delete channels[channel][socket.id];
|
||||
|
||||
for (id in channels[channel]) {
|
||||
channels[channel][id].emit("removePeer", { peer_id: socket.id });
|
||||
socket.emit("removePeer", { peer_id: id });
|
||||
console.log("[" + socket.id + "] emit remove Peer [" + id + "]");
|
||||
}
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// relay ICE to peers
|
||||
// =====================================================
|
||||
socket.on("relayICE", (config) => {
|
||||
let peer_id = config.peer_id;
|
||||
let ice_candidate = config.ice_candidate;
|
||||
/*
|
||||
console.log(
|
||||
"[" + socket.id + "] relay ICE-candidate to [" + peer_id + "] ",
|
||||
{ address: config.ice_candidate.address }
|
||||
); // ice_candidate
|
||||
*/
|
||||
if (peer_id in sockets) {
|
||||
sockets[peer_id].emit("iceCandidate", {
|
||||
peer_id: socket.id,
|
||||
ice_candidate: ice_candidate,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// =====================================================
|
||||
// relay SDP to peers
|
||||
// =====================================================
|
||||
socket.on("relaySDP", (config) => {
|
||||
let peer_id = config.peer_id;
|
||||
let session_description = config.session_description;
|
||||
|
||||
console.log(
|
||||
"[" + socket.id + "] relay SessionDescription to [" + peer_id + "] ",
|
||||
{ type: session_description.type }
|
||||
); // session_description
|
||||
|
||||
if (peer_id in sockets) {
|
||||
sockets[peer_id].emit("sessionDescription", {
|
||||
peer_id: socket.id,
|
||||
session_description: session_description,
|
||||
});
|
||||
}
|
||||
});
|
||||
}); // end [sockets.on-connect]
|
||||
+640
@@ -0,0 +1,640 @@
|
||||
/*
|
||||
██████ ██ ██ ███████ ███ ██ ████████
|
||||
██ ██ ██ ██ ████ ██ ██
|
||||
██ ██ ██ █████ ██ ██ ██ ██
|
||||
██ ██ ██ ██ ██ ██ ██ ██
|
||||
██████ ███████ ██ ███████ ██ ████ ██
|
||||
*/
|
||||
|
||||
// =====================================================
|
||||
// config var
|
||||
// =====================================================
|
||||
const loaderGif = "/images/loader.gif";
|
||||
var signaling_server_port = 3000;
|
||||
var signaling_server = getserverURL();
|
||||
var room_id = getRoomId();
|
||||
var peerInfo = getPeerInfo();
|
||||
var peerConnection = null;
|
||||
var use_audio = true;
|
||||
var use_video = true;
|
||||
var camera = "user";
|
||||
var is_screen_streaming = false;
|
||||
var signalingSocket = null; // socket.io connection to our webserver
|
||||
var localMediaStream = null; // my microphone / webcam
|
||||
var remoteMediaStream = null; // friends microphone / webcam
|
||||
var peers = {}; // keep track of our peer connections, indexed by peer_id == socket.io id
|
||||
var peerMediaElements = {}; // keep track of our <video> tags, indexed by peer_id
|
||||
var ice_servers = [{ urls: "stun:stun.l.google.com:19302" }]; // backup iceServers
|
||||
|
||||
// =====================================================
|
||||
// get info using DetecRTC
|
||||
// =====================================================
|
||||
function getPeerInfo() {
|
||||
return {
|
||||
detectRTCversion: DetectRTC.version,
|
||||
isWebRTCSupported: DetectRTC.isWebRTCSupported,
|
||||
isMobileDevice: DetectRTC.isMobileDevice,
|
||||
osName: DetectRTC.osName,
|
||||
osVersion: DetectRTC.osVersion,
|
||||
browser_name: DetectRTC.browser.name,
|
||||
browser_version: DetectRTC.browser.version,
|
||||
}; // https://github.com/muaz-khan/DetectRTC
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// signaling Server URL
|
||||
// =====================================================
|
||||
function getserverURL() {
|
||||
const protocol =
|
||||
"http" + (location.hostname == "localhost" ? "" : "s") + "://";
|
||||
return (
|
||||
protocol +
|
||||
location.hostname +
|
||||
(location.hostname == "localhost" ? ":" + signaling_server_port : "")
|
||||
);
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// generate random room id
|
||||
// =====================================================
|
||||
function getRoomId() {
|
||||
let roomId = location.pathname.substring(1);
|
||||
if (roomId == "") {
|
||||
roomId = Math.random().toString(36).substr(2, 10);
|
||||
const newurl = signaling_server + "/" + roomId;
|
||||
window.history.pushState({ url: newurl }, roomId, newurl);
|
||||
}
|
||||
return roomId;
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// get started
|
||||
// =====================================================
|
||||
function initPeer() {
|
||||
/* https://github.com/muaz-khan/DetectRTC
|
||||
* check if peer is done for WebRTC */
|
||||
if (DetectRTC.isWebRTCSupported === false) {
|
||||
console.error("isWebRTCSupported: false");
|
||||
userLog("info", "This browser seems not supported WebRTC!");
|
||||
return;
|
||||
}
|
||||
|
||||
// peer ready for WebRTC! :)
|
||||
console.log("Connecting to signaling server");
|
||||
signalingSocket = io(signaling_server);
|
||||
|
||||
signalingSocket.on("connect", function () {
|
||||
console.log("Connected to signaling server");
|
||||
setup_local_media(function () {
|
||||
/* once the user has given us access to their
|
||||
* microphone/camcorder, join the channel
|
||||
* and start peering up */
|
||||
joinChannel(room_id, peerInfo);
|
||||
});
|
||||
});
|
||||
|
||||
signalingSocket.on("disconnect", function () {
|
||||
console.log("Disconnected from signaling server");
|
||||
/* Tear down all of our peer connections and remove all the
|
||||
* media divs when we disconnect */
|
||||
for (peer_id in peerMediaElements) {
|
||||
document.body.removeChild(peerMediaElements[peer_id].parentNode);
|
||||
resizeVideos();
|
||||
}
|
||||
for (peer_id in peers) {
|
||||
peers[peer_id].close();
|
||||
}
|
||||
|
||||
peers = {};
|
||||
peerMediaElements = {};
|
||||
});
|
||||
|
||||
// join to chennel and send some peer info
|
||||
function joinChannel(channel, peerInfo) {
|
||||
console.log("join to channel", channel);
|
||||
signalingSocket.emit("join", {
|
||||
channel: channel,
|
||||
peerInfo: peerInfo,
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* When we join a group, our signaling server will send out 'addPeer' events to each pair
|
||||
* of users in the group (creating a fully-connected graph of users, ie if there are 6 people
|
||||
* in the channel you will connect directly to the other 5, so there will be a total of 15
|
||||
* connections in the network).
|
||||
*/
|
||||
signalingSocket.on("addPeer", function (config) {
|
||||
// console.log('-------------------------------')
|
||||
// console.log('addPeer', JSON.stringify(config))
|
||||
// console.log('-------------------------------')
|
||||
|
||||
var peer_id = config.peer_id;
|
||||
if (peer_id in peers) {
|
||||
/* This could happen if the user joins multiple channels where the other peer is also in. */
|
||||
console.log("Already connected to peer", peer_id);
|
||||
return;
|
||||
}
|
||||
|
||||
if (config.iceServers) ice_servers = config.iceServers;
|
||||
console.log("iceServers", ice_servers[0]);
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection
|
||||
peerConnection = new RTCPeerConnection(
|
||||
{ iceServers: ice_servers },
|
||||
{
|
||||
optional: [
|
||||
{ DtlsSrtpKeyAgreement: true }, // is required for Chrome and Firefox to interoperate.
|
||||
{ RtpDataChannels: DetectRTC.isRtpDataChannelsSupported }, // is required if we want to make use of the DataChannels API on Firefox.
|
||||
],
|
||||
}
|
||||
);
|
||||
// collect peer connections
|
||||
peers[peer_id] = peerConnection;
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onicecandidate
|
||||
peers[peer_id].onicecandidate = function (event) {
|
||||
if (event.candidate) {
|
||||
signalingSocket.emit("relayICE", {
|
||||
peer_id: peer_id,
|
||||
ice_candidate: {
|
||||
sdpMLineIndex: event.candidate.sdpMLineIndex,
|
||||
candidate: event.candidate.candidate,
|
||||
address: event.candidate.address,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onaddstream
|
||||
// WebRTC: onaddstream is deprecated! Use peerConnection.ontrack instead.
|
||||
peers[peer_id].onaddstream = function (event) {
|
||||
console.log("onaddstream", event);
|
||||
remoteMediaStream = event.stream;
|
||||
const videoWrap = document.createElement("div");
|
||||
videoWrap.className = "video";
|
||||
const remoteMedia = document.createElement("video");
|
||||
videoWrap.appendChild(remoteMedia);
|
||||
remoteMedia.setAttribute("playsinline", true);
|
||||
remoteMedia.mediaGroup = "remotevideo";
|
||||
remoteMedia.poster = loaderGif;
|
||||
remoteMedia.autoplay = true;
|
||||
remoteMedia.controls = false;
|
||||
peerMediaElements[peer_id] = remoteMedia;
|
||||
document.body.appendChild(videoWrap);
|
||||
|
||||
// attachMediaStream is a part of the adapter.js library
|
||||
attachMediaStream(remoteMedia, remoteMediaStream); // event.stream
|
||||
remoteMedia.poster = null;
|
||||
resizeVideos();
|
||||
};
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addStream
|
||||
peers[peer_id].addStream(localMediaStream); // Add our local stream
|
||||
|
||||
/*
|
||||
* Only one side of the peer connection should create the
|
||||
* offer, the signaling server picks one to be the offerer.
|
||||
* The other user will get a 'sessionDescription' event and will
|
||||
* create an offer, then send back an answer 'sessionDescription' to us
|
||||
*/
|
||||
if (config.should_create_offer) {
|
||||
console.log("Creating RTC offer to", peer_id);
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createOffer
|
||||
peers[peer_id]
|
||||
.createOffer()
|
||||
.then(function (local_description) {
|
||||
console.log("Local offer description is", local_description);
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription
|
||||
peers[peer_id]
|
||||
.setLocalDescription(local_description)
|
||||
.then(function () {
|
||||
signalingSocket.emit("relaySDP", {
|
||||
peer_id: peer_id,
|
||||
session_description: local_description,
|
||||
});
|
||||
console.log("Offer setLocalDescription done!");
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error("[Error] offer setLocalDescription", e);
|
||||
userLog("error", "Offer setLocalDescription failed!");
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error("[Error] sending offer", e);
|
||||
});
|
||||
} // end if offer true
|
||||
});
|
||||
|
||||
/**
|
||||
* Peers exchange session descriptions which contains information
|
||||
* about their audio / video settings and that sort of stuff. First
|
||||
* the 'offerer' sends a description to the 'answerer' (with type
|
||||
* "offer"), then the answerer sends one back (with type "answer").
|
||||
*/
|
||||
signalingSocket.on("sessionDescription", function (config) {
|
||||
console.log("Remote Session-description", config);
|
||||
|
||||
var peer_id = config.peer_id;
|
||||
var peer = peers[peer_id];
|
||||
var remote_description = config.session_description;
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCSessionDescription
|
||||
var description = new RTCSessionDescription(remote_description);
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setRemoteDescription
|
||||
peer
|
||||
.setRemoteDescription(description)
|
||||
.then(function () {
|
||||
console.log("setRemoteDescription done!");
|
||||
if (remote_description.type == "offer") {
|
||||
console.log("Creating answer");
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/createAnswer
|
||||
peer
|
||||
.createAnswer()
|
||||
.then(function (local_description) {
|
||||
console.log("Answer description is: ", local_description);
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription
|
||||
peer
|
||||
.setLocalDescription(local_description)
|
||||
.then(function () {
|
||||
signalingSocket.emit("relaySDP", {
|
||||
peer_id: peer_id,
|
||||
session_description: local_description,
|
||||
});
|
||||
console.log("Answer setLocalDescription done!");
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error("[Error] answer setLocalDescription", e);
|
||||
userLog("error", "Answer setLocalDescription failed!");
|
||||
});
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error("[Error] creating answer", e);
|
||||
});
|
||||
} // end if type [offer]
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error("[Error] setRemoteDescription", e);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* The offerer will send a number of ICE Candidate blobs to the answerer so they
|
||||
* can begin trying to find the best path to one another on the net.
|
||||
*/
|
||||
signalingSocket.on("iceCandidate", function (config) {
|
||||
var peer = peers[config.peer_id];
|
||||
var ice_candidate = config.ice_candidate;
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCIceCandidate
|
||||
peer.addIceCandidate(new RTCIceCandidate(ice_candidate));
|
||||
});
|
||||
|
||||
/**
|
||||
* When a user leaves a channel (or is disconnected from the
|
||||
* signaling server) everyone will recieve a 'removePeer' message
|
||||
* telling them to trash the media channels they have open for those
|
||||
* that peer. If it was this client that left a channel, they'll also
|
||||
* receive the removePeers. If this client was disconnected, they
|
||||
* wont receive removePeers, but rather the
|
||||
* signaling_socket.on('disconnect') code will kick in and tear down
|
||||
* all the peer sessions.
|
||||
*/
|
||||
signalingSocket.on("removePeer", function (config) {
|
||||
console.log("Signaling server said to remove peer:", config);
|
||||
var peer_id = config.peer_id;
|
||||
if (peer_id in peerMediaElements) {
|
||||
document.body.removeChild(peerMediaElements[peer_id].parentNode);
|
||||
resizeVideos();
|
||||
}
|
||||
if (peer_id in peers) {
|
||||
peers[peer_id].close();
|
||||
}
|
||||
|
||||
delete peers[peer_id];
|
||||
delete peerMediaElements[config.peer_id];
|
||||
});
|
||||
} // end [init]
|
||||
|
||||
// =====================================================
|
||||
// Local media stuff
|
||||
// =====================================================
|
||||
function setup_local_media(callback, errorback) {
|
||||
/* ie, if we've already been initialized do nothing */
|
||||
if (localMediaStream != null) {
|
||||
if (callback) callback();
|
||||
return;
|
||||
}
|
||||
|
||||
/* Ask user for permission to use the computers microphone and/or camera,
|
||||
* attach it to an <audio> or <video> tag if they give us access. */
|
||||
console.log("Requesting access to local audio / video inputs");
|
||||
|
||||
attachMediaStream = function (element, stream) {
|
||||
console.log("DEPRECATED, attachMediaStream will soon be removed.");
|
||||
element.srcObject = stream;
|
||||
};
|
||||
//
|
||||
const constraints = {
|
||||
video: use_video,
|
||||
audio: use_audio,
|
||||
};
|
||||
//
|
||||
navigator.mediaDevices
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
|
||||
.getUserMedia(constraints)
|
||||
.then((stream) => {
|
||||
console.log("Access granted to audio/video");
|
||||
document.body.style.backgroundImage = "none";
|
||||
|
||||
localMediaStream = stream;
|
||||
|
||||
// =====================================================
|
||||
// audio mute-unmute button click event
|
||||
// =====================================================
|
||||
document.getElementById("mutebtn").addEventListener("click", (e) => {
|
||||
localMediaStream.getAudioTracks()[0].enabled = !localMediaStream.getAudioTracks()[0]
|
||||
.enabled;
|
||||
e.target.className =
|
||||
"fas fa-microphone" +
|
||||
(localMediaStream.getAudioTracks()[0].enabled ? "" : "-slash");
|
||||
});
|
||||
// =====================================================
|
||||
// video hide-show button click event
|
||||
// =====================================================
|
||||
document.getElementById("videomutebtn").addEventListener("click", (e) => {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/MediaStream/getVideoTracks
|
||||
localMediaStream.getVideoTracks()[0].enabled = !localMediaStream.getVideoTracks()[0]
|
||||
.enabled;
|
||||
e.target.className =
|
||||
"fas fa-video" +
|
||||
(localMediaStream.getVideoTracks()[0].enabled ? "" : "-slash");
|
||||
});
|
||||
// =====================================================
|
||||
// check if can swap or not cam, if yes show the button else hide it
|
||||
// =====================================================
|
||||
navigator.mediaDevices.enumerateDevices().then((devices) => {
|
||||
const videoInput = devices.filter(
|
||||
(device) => device.kind === "videoinput"
|
||||
);
|
||||
if (videoInput.length > 1) {
|
||||
// =====================================================
|
||||
// swap camera front-rear button click event
|
||||
// =====================================================
|
||||
document
|
||||
.getElementById("swapcamerabtn")
|
||||
.addEventListener("click", (e) => {
|
||||
swapCamera();
|
||||
});
|
||||
} else {
|
||||
document.getElementById("swapcamerabtn").style.display = "none";
|
||||
}
|
||||
});
|
||||
// =====================================================
|
||||
// check if can share a screen, if yes show button else hide it
|
||||
// =====================================================
|
||||
if (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia) {
|
||||
// =====================================================
|
||||
// share-screen on-off button click event
|
||||
// =====================================================
|
||||
document
|
||||
.getElementById("screensharebtn")
|
||||
.addEventListener("click", (e) => {
|
||||
toggleScreenSharing();
|
||||
});
|
||||
} else {
|
||||
document.getElementById("screensharebtn").style.display = "none";
|
||||
}
|
||||
// =====================================================
|
||||
// set button opacity 1 means no opacity, you can change if like (0.5) ..
|
||||
// =====================================================
|
||||
document.getElementById("buttons").style.opacity = "1";
|
||||
|
||||
// =====================================================
|
||||
// setup localMedia
|
||||
// =====================================================
|
||||
const videoWrap = document.createElement("div");
|
||||
videoWrap.className = "video";
|
||||
videoWrap.setAttribute("id", "myVideoWrap");
|
||||
const localMedia = document.createElement("video");
|
||||
videoWrap.appendChild(localMedia);
|
||||
localMedia.setAttribute("id", "myVideo");
|
||||
localMedia.setAttribute("playsinline", true);
|
||||
localMedia.className = "mirror";
|
||||
localMedia.poster = loaderGif;
|
||||
localMedia.autoplay = true;
|
||||
localMedia.muted = true;
|
||||
localMedia.volume = 0;
|
||||
localMedia.controls = false;
|
||||
document.body.appendChild(videoWrap);
|
||||
|
||||
console.log("local-video-audio", {
|
||||
video: localMediaStream.getVideoTracks()[0].label,
|
||||
audio: localMediaStream.getAudioTracks()[0].label,
|
||||
});
|
||||
|
||||
// attachMediaStream is a part of the adapter.js library
|
||||
attachMediaStream(localMedia, localMediaStream); // stream
|
||||
localMedia.poster = null;
|
||||
resizeVideos();
|
||||
|
||||
if (callback) callback();
|
||||
})
|
||||
.catch((e) => {
|
||||
/* user denied access to a/v */
|
||||
console.error("Access denied for audio/video", e);
|
||||
userLog(
|
||||
"error",
|
||||
"This app will not work without camera/microphone access."
|
||||
);
|
||||
if (errorback) errorback();
|
||||
});
|
||||
} // end [setup_local_stream]
|
||||
|
||||
// =====================================================
|
||||
// resize Videos frames
|
||||
// =====================================================
|
||||
const resizeVideos = () => {
|
||||
const numToString = ["", "one", "two", "three", "four", "five", "six"];
|
||||
const videos = document.querySelectorAll(".video");
|
||||
document.querySelectorAll(".video").forEach((v) => {
|
||||
v.className = "video " + numToString[videos.length];
|
||||
});
|
||||
};
|
||||
|
||||
// =====================================================
|
||||
// active - disactive screen sharing
|
||||
// =====================================================
|
||||
function toggleScreenSharing() {
|
||||
const screenShareBtn = document.getElementById("screensharebtn");
|
||||
const videoMuteBtn = document.getElementById("videomutebtn");
|
||||
let screenMediaPromise;
|
||||
|
||||
if (!is_screen_streaming) {
|
||||
if (navigator.getDisplayMedia) {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia
|
||||
screenMediaPromise = navigator.getDisplayMedia({ video: true });
|
||||
} else if (navigator.mediaDevices.getDisplayMedia) {
|
||||
screenMediaPromise = navigator.mediaDevices.getDisplayMedia({
|
||||
video: true,
|
||||
});
|
||||
} else {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
|
||||
screenMediaPromise = navigator.mediaDevices.getUserMedia({
|
||||
video: {
|
||||
mediaSource: "screen",
|
||||
},
|
||||
});
|
||||
}
|
||||
} else {
|
||||
screenMediaPromise = navigator.mediaDevices.getUserMedia({ video: true });
|
||||
videoMuteBtn.className = "fas fa-video"; // make sure to enable video
|
||||
}
|
||||
screenMediaPromise
|
||||
.then((screenStream) => {
|
||||
is_screen_streaming = !is_screen_streaming;
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/getSenders
|
||||
var sender = peerConnection
|
||||
.getSenders()
|
||||
.find((s) => (s.track ? s.track.kind === "video" : false));
|
||||
sender.replaceTrack(screenStream.getVideoTracks()[0]);
|
||||
screenStream.getVideoTracks()[0].enabled = true;
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
|
||||
const newStream = new MediaStream([
|
||||
screenStream.getVideoTracks()[0],
|
||||
localMediaStream.getAudioTracks()[0],
|
||||
]);
|
||||
localMediaStream = newStream;
|
||||
|
||||
// attachMediaStream is a part of the adapter.js library
|
||||
attachMediaStream(document.getElementById("myVideo"), localMediaStream); // newstream
|
||||
|
||||
document.getElementById("myVideo").classList.toggle("mirror");
|
||||
screenShareBtn.classList.toggle("active");
|
||||
|
||||
var videoBtnDState = document
|
||||
.getElementById("videomutebtn")
|
||||
.getAttribute("disabled");
|
||||
videoBtnDState = videoBtnDState === null ? false : true;
|
||||
document.getElementById("videomutebtn").disabled = !videoBtnDState;
|
||||
|
||||
screenStream.getVideoTracks()[0].onended = function () {
|
||||
if (is_screen_streaming) toggleScreenSharing();
|
||||
};
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error("[Error] Unable to share the screen", e);
|
||||
userLog("error", "Unable to share the screen");
|
||||
});
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// swapCamer front(user) - rear(environment)
|
||||
// =====================================================
|
||||
const swapCamera = () => {
|
||||
camera = camera == "user" ? "environment" : "user";
|
||||
if (camera == "user") use_video = true;
|
||||
else use_video = { facingMode: { exact: camera } };
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({ video: use_video })
|
||||
.then((camStream) => {
|
||||
if (peerConnection) {
|
||||
var sender = peerConnection
|
||||
.getSenders()
|
||||
.find((s) => (s.track ? s.track.kind === "video" : false));
|
||||
sender.replaceTrack(camStream.getVideoTracks()[0]);
|
||||
}
|
||||
camStream.getVideoTracks()[0].enabled = true;
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/MediaStream
|
||||
const newStream = new MediaStream([
|
||||
camStream.getVideoTracks()[0],
|
||||
localMediaStream.getAudioTracks()[0],
|
||||
]);
|
||||
localMediaStream = newStream;
|
||||
// attachMediaStream is a part of the adapter.js library
|
||||
attachMediaStream(document.getElementById("myVideo"), localMediaStream); // newStream
|
||||
|
||||
document.getElementById("myVideo").classList.toggle("mirror");
|
||||
})
|
||||
.catch((e) => {
|
||||
console.log("[Error] to swaping camera", e);
|
||||
userLog("error", "Error to swaping the camera");
|
||||
});
|
||||
};
|
||||
|
||||
// =====================================================
|
||||
// copy RoomID url to clipboard and share it
|
||||
// =====================================================
|
||||
function copyRoomURL() {
|
||||
var tmpInput = document.createElement("input");
|
||||
ROOM_URL = window.location.href;
|
||||
document.body.appendChild(tmpInput);
|
||||
tmpInput.value = ROOM_URL;
|
||||
tmpInput.select();
|
||||
tmpInput.setSelectionRange(0, 99999); /* For mobile devices */
|
||||
document.execCommand("copy");
|
||||
// https://sweetalert2.github.io
|
||||
console.log("Copied to clipboard RoomID ", ROOM_URL);
|
||||
Swal.fire({
|
||||
background: "black",
|
||||
position: "center",
|
||||
icon: "success",
|
||||
title: "RoomURL copied to clipboard",
|
||||
showConfirmButton: false,
|
||||
timer: 1500,
|
||||
});
|
||||
document.body.removeChild(tmpInput);
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// Leave the Room and create a new one
|
||||
// =====================================================
|
||||
function leaveRoom() {
|
||||
// https://sweetalert2.github.io
|
||||
Swal.fire({
|
||||
background: "black",
|
||||
position: "center",
|
||||
title: "Leave this room?",
|
||||
showDenyButton: true,
|
||||
confirmButtonText: `Yes`,
|
||||
denyButtonText: `No`,
|
||||
}).then((result) => {
|
||||
/* Read more about isConfirmed, isDenied below */
|
||||
if (result.isConfirmed) {
|
||||
window.location.href = "/";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// =====================================================
|
||||
// Basic user logging: https://sweetalert2.github.io
|
||||
// =====================================================
|
||||
function userLog(type, message) {
|
||||
switch (type) {
|
||||
case "error":
|
||||
Swal.fire({
|
||||
background: "black",
|
||||
position: "center",
|
||||
icon: "error",
|
||||
title: "Oops...",
|
||||
text: message,
|
||||
});
|
||||
break;
|
||||
case "info":
|
||||
Swal.fire({
|
||||
background: "black",
|
||||
position: "center",
|
||||
icon: "info",
|
||||
title: "Info",
|
||||
text: message,
|
||||
});
|
||||
break;
|
||||
// ......
|
||||
default:
|
||||
alert(message);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 831 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Executable
+94
@@ -0,0 +1,94 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- https://developers.google.com/gtagjs/devguide/snippet#google-analytics -->
|
||||
<!-- Global site tag (gtag.js) - Google Analytics
|
||||
<script
|
||||
async
|
||||
src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
gtag("js", new Date());
|
||||
gtag("config", "GA_MEASUREMENT_ID");
|
||||
</script>
|
||||
-->
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="webrtc, webrtc stun, webrtc turn, video meeting, video chat, multi video chat, peer to peer, p2p, zoom"
|
||||
/>
|
||||
<!-- https://ogp.me -->
|
||||
<meta property="og:type" content="app-webrtc" />
|
||||
<meta property="og:site_name" content="mirotalk" />
|
||||
<meta property="og:title" content="Click the link to join this call" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="mirotalk - A free WebRTC browser-based video call."
|
||||
/>
|
||||
<meta property="og:image" content="/images/mirotalk.png" />
|
||||
<!-- <meta property="og:url" content="https://www.mirotalk.com"> -->
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="/images/favicon.png"
|
||||
/>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<script
|
||||
src="https://kit.fontawesome.com/d2f1016e6f.js"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
|
||||
<script src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="client.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="initPeer()">
|
||||
<div id="buttons">
|
||||
<!-- https://fontawesome.com/icons?d=gallery -->
|
||||
<button
|
||||
title="copy room"
|
||||
id="copybtn"
|
||||
class="fas fa-users"
|
||||
onclick="copyRoomURL()"
|
||||
></button>
|
||||
<button
|
||||
title="microphone"
|
||||
id="mutebtn"
|
||||
class="fas fa-microphone"
|
||||
></button>
|
||||
<button title="camera" id="videomutebtn" class="fas fa-video"></button>
|
||||
<button
|
||||
title="swap camera"
|
||||
id="swapcamerabtn"
|
||||
class="fas fa-sync-alt"
|
||||
></button>
|
||||
<button
|
||||
title="screen"
|
||||
id="screensharebtn"
|
||||
class="fas fa-desktop"
|
||||
></button>
|
||||
<button
|
||||
title="end call"
|
||||
id="endcall"
|
||||
class="fas fa-phone-slash"
|
||||
onclick="leaveRoom()"
|
||||
></button>
|
||||
</div>
|
||||
<!--
|
||||
the <video> and <audio> tags are all added and removed dynamically
|
||||
in 'onAddStream', 'setup_local_media', and 'removePeer'/'disconnect'
|
||||
--></body>
|
||||
</html>
|
||||
Executable
+175
@@ -0,0 +1,175 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Fira+Sans:600|Heebo:400,500,700&display=swap");
|
||||
|
||||
/*Fade in page on load*/
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
* {
|
||||
outline: none;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
background: #000000;
|
||||
background-image: url("/images/loader.gif");
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0; /* make things invisible upon start */
|
||||
-webkit-animation: fadeIn ease-in 1;
|
||||
-moz-animation: fadeIn ease-in 1;
|
||||
animation: fadeIn ease-in 1;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
-webkit-animation-duration: 0.3s;
|
||||
-moz-animation-duration: 0.3s;
|
||||
animation-duration: 0.3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
/*border: 1px solid rgb(255, 255, 255);*/
|
||||
}
|
||||
video:fullscreen {
|
||||
object-fit: contain;
|
||||
}
|
||||
.video {
|
||||
float: left;
|
||||
width: 25vw;
|
||||
height: 50vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.video.one {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.video.two {
|
||||
width: 50vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.video.three {
|
||||
width: 33.33vw;
|
||||
height: 100vh;
|
||||
}
|
||||
.video.four {
|
||||
width: 50vw;
|
||||
height: 50vh;
|
||||
}
|
||||
.video.six {
|
||||
width: 33.33vw;
|
||||
height: 50vh;
|
||||
}
|
||||
#myVideo.mirror {
|
||||
transform: rotateY(180deg);
|
||||
-webkit-transform: rotateY(180deg);
|
||||
-moz-transform: rotateY(180deg);
|
||||
}
|
||||
.fa-microphone-slash,
|
||||
.fa-video-slash {
|
||||
color: #e74c3c !important;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: 48px;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
#logo svg {
|
||||
width: 100%;
|
||||
}
|
||||
#buttons button {
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
transition: all 0.3s ease-in-out;
|
||||
background: white;
|
||||
/*background: transparent;*/
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
button:hover {
|
||||
color: rgb(8, 189, 89);
|
||||
}
|
||||
|
||||
#buttons {
|
||||
position: absolute;
|
||||
left: calc(3vw - 2px);
|
||||
top: 50%;
|
||||
-ms-transform: translate(0%, -50%);
|
||||
transform: translate(0%, -50%);
|
||||
z-index: 999;
|
||||
border-radius: 20px;
|
||||
/*background: #ffffff;*/
|
||||
background: transparent;
|
||||
box-shadow: 5px 5px 10px #0500ff, -5px -5px 10px #da05f3;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
grid-gap: 0.2rem;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
#copybtn,
|
||||
#mutebtn,
|
||||
#videomutebtn,
|
||||
#swapcamerabtn,
|
||||
#screensharebtn,
|
||||
#endcall {
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
/*960-300*/
|
||||
.video {
|
||||
float: left;
|
||||
width: 50vw;
|
||||
height: 25vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video.two {
|
||||
width: 100vw;
|
||||
height: 50vh;
|
||||
}
|
||||
.video.three {
|
||||
width: 100vw;
|
||||
height: 33.33vh;
|
||||
}
|
||||
.video.six {
|
||||
width: 50vw;
|
||||
height: 33.33vh;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user