From c536471b66f7d3c4712041ded0d030636100197e Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Tue, 12 Jan 2021 21:30:42 +0100 Subject: [PATCH] [mirotalk] - Add send msg via sign-server --- README.md | 39 ++++++++++++++++++----------------- server.js | 18 ++++++++++++++++ www/client.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++ www/index.html | 1 + www/style.css | 7 ++++++- 5 files changed, 101 insertions(+), 20 deletions(-) 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" > +