diff --git a/README.md b/README.md
index 055a2527..d9bdbc20 100644
--- a/README.md
+++ b/README.md
@@ -29,12 +29,13 @@ Open the app in one of following **supported browser**
## Features
-- RoomUrl Sharing (just click and share URL to your friends)
-- WebCam (front - rear)
-- Audio
-- Screen Sharing
-- No download required, entirely browser based
-- Direct peer to peer connection ensures lowest latency
+* RoomUrl Sharing (just click and share URL to your friends)
+* WebCam (front - rear)
+* Audio
+* Screen Sharing
+* Send Message
+* No download required, entirely browser based
+* Direct peer to peer connection ensures lowest latency
## Quick start
@@ -48,19 +49,19 @@ cd mirotalk
## Set up credentials
-- Copy .env.template to .env `cp .env.template .env`
+* Copy .env.template to .env `cp .env.template .env`
`Turn`
-- Create an account on http://numb.viagenie.ca
-- Get your Account USERNAME and PASSWORD
-- Fill in your credentials in the `.env` file
+* Create an account on http://numb.viagenie.ca
+* Get your Account USERNAME and PASSWORD
+* Fill in your credentials in the `.env` file
`Ngrok`
-- Get started for free https://ngrok.com/
-- Fill in your authtoken in the `.env` file
-- Set `NGROK_ENABLED=true`, if you want to expose the server using the https tunel, starting it from your local pc.
+* Get started for free https://ngrok.com/
+* Fill in your authtoken in the `.env` file
+* Set `NGROK_ENABLED=true`, if you want to expose the server using the https tunel, starting it from your local pc.
## Install dependencies
@@ -74,16 +75,16 @@ npm install
npm start
```
-- Open http://localhost:80 in browser
-- If you want to use a client on another computer/network, make sure you publish your server on an HTTPS connection.
+* Open http://localhost:80 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/) Or deploy it on [heroku](https://www.heroku.com/).
## Demo
-- Open https://mirotalk.herokuapp.com/
-- Allow to use the camera and microphone
-- Click the first button to copy the url and then share it
-- Wait someone to join for video conference
+* Open https://mirotalk.herokuapp.com/
+* Allow to use the camera and microphone
+* Click the first button to copy the url and then share it
+* Wait someone to join for video conference
## Contributing
diff --git a/server.js b/server.js
index 8f8384ad..9989dc91 100755
--- a/server.js
+++ b/server.js
@@ -223,4 +223,22 @@ io.sockets.on("connect", (socket) => {
});
}
});
+
+ // =====================================================
+ // handle peer message
+ // =====================================================
+ socket.on("msg", (config) => {
+ let peers = config.peers;
+ let msg = config.msg;
+
+ console.log("[" + socket.id + "] emit onMessage", {
+ msg: msg,
+ });
+
+ for (peer_id in peers) {
+ sockets[peer_id].emit("onMessage", {
+ msg: msg,
+ });
+ }
+ });
}); // end [sockets.on-connect]
diff --git a/www/client.js b/www/client.js
index d52be058..a3271563 100644
--- a/www/client.js
+++ b/www/client.js
@@ -312,6 +312,11 @@ function initPeer() {
delete peers[peer_id];
delete peerMediaElements[config.peer_id];
});
+
+ // show messages
+ signalingSocket.on("onMessage", function (config) {
+ showMessage(config.msg);
+ });
} // end [initPeer]
// =====================================================
@@ -399,6 +404,7 @@ function manageButtons() {
videoBtn();
swapCameraBtn();
screenShareBtn();
+ sendMsgBtn();
leaveRoomBtn();
buttonsOpacity();
}
@@ -472,6 +478,15 @@ function screenShareBtn() {
}
}
+// =====================================================
+// send message button click event
+// =====================================================
+function sendMsgBtn() {
+ document.getElementById("sendMsgBtn").addEventListener("click", (e) => {
+ sendMessage();
+ });
+}
+
// =====================================================
// end call button click event
// =====================================================
@@ -499,6 +514,47 @@ function resizeVideos() {
});
}
+// =====================================================
+// send message to peers
+// =====================================================
+function sendMessage() {
+ if (!peerConnection) {
+ userLog("info", "Can't Send msg, no peer connection detected");
+ return;
+ }
+ Swal.fire({
+ background: "black",
+ position: "center",
+ title: "Send Message",
+ input: "text",
+ showDenyButton: true,
+ confirmButtonText: `Send`,
+ denyButtonText: `Cancel`,
+ }).then((result) => {
+ if (result.isConfirmed) {
+ let msg = result.value;
+ // Send message over signaling server
+ signalingSocket.emit("msg", {
+ peers: peers,
+ msg: msg,
+ });
+ }
+ });
+}
+
+// =====================================================
+// Called when a message is recieved over the dataChannel
+// =====================================================
+function showMessage(msg) {
+ Swal.fire({
+ background: "black",
+ position: "center",
+ icon: "success",
+ title: "New message",
+ text: msg,
+ });
+}
+
// =====================================================
// active - disactive screen sharing
// =====================================================
diff --git a/www/index.html b/www/index.html
index a82bc393..3f24feaa 100755
--- a/www/index.html
+++ b/www/index.html
@@ -70,6 +70,7 @@
id="screenShareBtn"
class="fas fa-desktop"
>
+