[mirotalk] - Add send msg via sign-server

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
 

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]

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
 // =====================================================

www/index.html

@@ -70,6 +70,7 @@
         id="screenShareBtn"
         class="fas fa-desktop"
       ></button>
+      <button title="send msg" id="sendMsgBtn" class="fas fa-comment"></button>
       <button
         title="leave room"
         id="leaveRoomBtn"

www/style.css

@@ -147,13 +147,13 @@ button:hover {
 #videoBtn,
 #swapCameraBtn,
 #screenShareBtn,
+#sendMsgBtn,
 #leaveRoomBtn {
   font-size: 2rem;
   cursor: pointer;
 }
 
 @media only screen and (max-width: 960px) {
-  /*960-300*/
   .video {
     float: left;
     width: 50vw;
@@ -178,3 +178,8 @@ button:hover {
 .swal2-content {
   color: white !important;
 }
+/* 
+.swal2-popup {
+  font-size: 0.8rem !important;
+}
+*/