[mirotalk] - whiteboard support on touch screen

server.js

@@ -50,10 +50,26 @@ const app = express();
 app.use(cors()); // Enable All CORS Requests for all origins
 app.use(compression()); // Compress all HTTP responses using GZip
 
+const port = process.env.PORT || 3000; // must be the same to client.js signalingServerPort
+
 const http = require('http');
 const server = http.createServer(app);
 const { Server } = require('socket.io');
 const io = new Server().listen(server);
+const localHost = 'http://' + 'localhost' + ':' + port; // http
+
+/* https
+const https = require('https');
+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'),
+};
+const server = https.createServer(options, app);
+const { Server } = require('socket.io');
+const io = new Server().listen(server);
+const localHost = 'https://' + 'localhost' + ':' + port; // https
+*/
 
 const ngrok = require('ngrok');
 const yamlJS = require('yamljs');
@@ -61,9 +77,6 @@ const swaggerUi = require('swagger-ui-express');
 const swaggerDocument = yamlJS.load(path.join(__dirname + '/api/swagger.yaml'));
 const { v4: uuidV4 } = require('uuid');
 
-const port = process.env.PORT || 3000; // must be the same to client.js signalingServerPort
-
-const localHost = 'http://' + 'localhost' + ':' + port; // http
 const apiBasePath = '/api/v1'; // api endpoint path
 const api_docs = localHost + apiBasePath + '/docs'; // api docs
 const api_key_secret = process.env.API_KEY_SECRET || 'mirotalk_default_secret';

ssl/README.md

@@ -39,5 +39,6 @@ const localHost = 'https://' + 'localhost' + ':' + port;
 ```js
 function getSignalingServer() {
     return 'https://' + 'localhost' + ':' + signalingServerPort;
+    // outside of localhost change it with YOUR-SERVER-DOMAIN
 }
 ```

ssl/cert.pem

@@ -0,0 +1,22 @@
+-----BEGIN CERTIFICATE-----
+MIIDlTCCAn0CFBM91H+g2aRKsaRrCmo3NdYjwfWUMA0GCSqGSIb3DQEBCwUAMIGG
+MQswCQYDVQQGEwJJVDEOMAwGA1UECAwFSXRhbHkxETAPBgNVBAoMCE1pcm9UYWxr
+MQ8wDQYDVQQLDAZXZWJSVEMxFzAVBgNVBAMMDk1pcm9zbGF2IFBlamljMSowKAYJ
+KoZIhvcNAQkBFhttaXJvc2xhdi5wZWppYy44NUBnbWFpbC5jb20wHhcNMjEwODEx
+MTUwOTUzWhcNNDgxMjI2MTUwOTUzWjCBhjELMAkGA1UEBhMCSVQxDjAMBgNVBAgM
+BUl0YWx5MREwDwYDVQQKDAhNaXJvVGFsazEPMA0GA1UECwwGV2ViUlRDMRcwFQYD
+VQQDDA5NaXJvc2xhdiBQZWppYzEqMCgGCSqGSIb3DQEJARYbbWlyb3NsYXYucGVq
+aWMuODVAZ21haWwuY29tMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA
+rn2tC9W6wqjDI7B/4LfEnE4ILBOdwa9889QjmWUToKua7iXTpaSNP3SefKY50Q8T
+BFfkZXEGyqAESBUn2rYeHtebgLQTKHsixhSCdHqpBDOyYFeTywGiRP4gQHFKbExd
+X2AAD1ptTjHVuSlg/ojWstESBh/4TktifKzy3PKVKX6p889eDfyJtlv0PADAkon/
+rZp3hHq0FORhvQEER1sm6g58WyIfqGWjW7bb7/bkyS1baQI16fPeexfu1Rs7y4kx
+gX7+9/oA40D3rz0Wf378PTwVzbYCF+hZo/H9yJGTUAZSz84zNbSLvKBZFPfabA2A
+l92uPgNWoct06uf7ubEJhwIDAQABMA0GCSqGSIb3DQEBCwUAA4IBAQAyH68yi+mf
+2HNwEscSLN1oU9uXNC4hwHi2xoPrpxoLsbhoc/aVhgd5peOEmIlOQPQofCO/JSKt
+HqidURSt8U+WrcsXz3HTdq+m/Qw3E/BA5CDXL/LUmIh43cZzkWSawx2EocJr7g1W
+JeAtUt8xpDtuLlTMjoGGmTsKQG7ub8NcYN7EEqWa2v+2qSTqvhASMs+cf7DT2HZI
+I3q2v6l1N+DcpO8ey8dbLhbhd4d+bGjyjEcT+clDHFrKsqiYDCS99sOmedmHoyZk
++h+CzXICtqFSrAAGE/PoetQtJlojwnu9mJN/xj3i/zJTZTRh3jOGF8Hfg2bvwgdg
+vMYRLwtknqya
+-----END CERTIFICATE-----

ssl/key.pem

@@ -0,0 +1,27 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIIEpAIBAAKCAQEArn2tC9W6wqjDI7B/4LfEnE4ILBOdwa9889QjmWUToKua7iXT
+paSNP3SefKY50Q8TBFfkZXEGyqAESBUn2rYeHtebgLQTKHsixhSCdHqpBDOyYFeT
+ywGiRP4gQHFKbExdX2AAD1ptTjHVuSlg/ojWstESBh/4TktifKzy3PKVKX6p889e
+DfyJtlv0PADAkon/rZp3hHq0FORhvQEER1sm6g58WyIfqGWjW7bb7/bkyS1baQI1
+6fPeexfu1Rs7y4kxgX7+9/oA40D3rz0Wf378PTwVzbYCF+hZo/H9yJGTUAZSz84z
+NbSLvKBZFPfabA2Al92uPgNWoct06uf7ubEJhwIDAQABAoIBAAhskNota2LSevlS
+IBpdROS277YRDGC5dDLhXwac1qG/Jy+wK9OnahpSKwShkdECBU0EYUZ0ent11j8U
+pmPsvu+GQT+pcfNWXotpmhK9iUNmq4nzMHNwlMD3896omYs49JkSLW6QUw6fYU4b
+LU+ck6D2bwRUrsw433xdbSw1mfXyzyCIWfPNzRmkEcUkCe1RHkGqFv8FrePhezOB
+tByAwQQLtBt7FMioTSCedOe7B+tuxwqj5Px7Vr8K3x/PKccSId6hS2ihnptYB+n7
+3eAxoa049wazsW3SXJQrTxUB1z2bh2p2lA0AedgVNme1FCq4zzA7qa2WppcV2ava
+Gu+dCgECgYEA1xjLFQmiUqCJVqA99DZNvgiPecuHSe2+2QRIk10uUQcxQAF8K9XT
+ORpO05lc0ccPZt7tIbQytsnt/NxL2mnvXQ+dzzrQCsPu/HH8fLEaJ4xBdxuIFeDU
+qCBKYlckCQkDwnNYUqCZCNfxb0Csx98RBDYlwDwZa0hFsLPbGen538cCgYEAz6wh
+iRXZVTqfhy3meWYFmHqeMb0agFugl4d0Lwl/kI/0M62Jc1u1OU+uI6u5fuevEeBB
+xYjnaDpBuCWccLw6R5luc98QIbxldbx2A07rUGo2JlQafmDX8wI1GVBXgzOw7HAK
+jHhCw+ZgtvF2c1XjaTPaunKDomPX6Pjt6R23CEECgYEArRRvPbNt4Wz6djElCSC1
+N+ftg4TJjSx4eGog+CtvvJW8BJPtVdyORZGswknSzZ6O/yj8yTUV5c3g6apegxbh
+HBIX2wupIjB9WrdiAvgDYrVSbEREIc6zb8Hj+PPDtF2Dn/FurbY6zkntJad2ILKX
+H7tubxwtHA2gvkpLULPcdDsCgYAxm3WbUHvM7ycCXIWMhEFb7hZx3TFCbiDLcZDg
+V42AU9LKsW5+/u4oVY9MeA3kcaWRSJeNfyl/7UKboWhgSaZGSjFnPmaVGHLIEA/E
+tIpjeCudNkPp4mpTYziZ5mYxMhzWLeFnMqcIMrTxnnZkEKU1ESzzkr09AkqmHSh/
+ohiBwQKBgQCvaDQS7aBS/1+iBrOyMwxARwFirReJHdgEtkBVrB+sasbj1B4Jd3zO
+gL6FzxKCKBMIF+sSAjKs0XoRG1K6OPGFg1b5naEq023gObO6aBZqSXhHCajGK790
+Xhrvj6BojWkJUnc8T0cocrwhMJrTFC0u00KgAnRNyNYw1vccd5q2uQ==
+-----END RSA PRIVATE KEY-----

www/js/client.js

@@ -498,6 +498,7 @@ function getPeerGeoLocation() {
  * @return Signaling server URL
  */
 function getSignalingServer() {
+    // return 'https://' + 'localhost' + ':' + signalingServerPort;
     return (
         'http' +
         (location.hostname == 'localhost' ? '' : 's') +
@@ -4027,45 +4028,103 @@ function fitToContainer(canvas) {
 function reportWindowSize() {
     fitToContainer(canvas);
 }
+
 /**
  * Whiteboard setup
  */
 function setupCanvas() {
     fitToContainer(canvas);
 
-    canvas.addEventListener('mousedown', (e) => {
-        x = e.offsetX;
-        y = e.offsetY;
-        isDrawing = true;
-    });
-    canvas.addEventListener('mousemove', (e) => {
+    // whiteboard touch listeners
+    canvas.addEventListener('touchstart', touchStart);
+    canvas.addEventListener('touchmove', touchMove);
+    canvas.addEventListener('touchend', touchEnd);
+
+    // whiteboard mouse listeners
+    canvas.addEventListener('mousedown', mouseDown);
+    canvas.addEventListener('mousemove', mouseMove);
+    canvas.addEventListener('mouseup', mouseUp);
+
+    function mouseDown(e) {
+        startDrawing(e.offsetX, e.offsetY);
+    }
+
+    function touchStart(e) {
+        startDrawing(e.touches[0].pageX, e.touches[0].pageY);
+    }
+
+    function mouseMove(e) {
         if (!isDrawing) return;
 
         draw(e.offsetX, e.offsetY, x, y);
-        // send draw to other peers in the room
-        if (thereIsPeerConnections()) {
-            sendToServer('wb', {
-                room_id: roomId,
-                peer_name: myPeerName,
-                act: 'draw',
-                newx: e.offsetX,
-                newy: e.offsetY,
-                prevx: x,
-                prevy: y,
-                color: color,
-                size: drawsize,
-            });
-        }
+        sendDrawRemote(e.offsetX, e.offsetY, x, y);
+
         x = e.offsetX;
         y = e.offsetY;
-    });
-    canvas.addEventListener('mouseup', (e) => {
-        if (isDrawing) isDrawing = false;
-    });
+    }
+
+    function touchMove(e) {
+        if (!isDrawing) return;
+
+        draw(e.touches[0].pageX, e.touches[0].pageY, x, y);
+        sendDrawRemote(e.touches[0].pageX, e.touches[0].pageY, x, y);
+
+        x = e.touches[0].pageX;
+        y = e.touches[0].pageY;
+    }
+
+    function mouseUp() {
+        stopDrawing();
+    }
+
+    function touchEnd(e) {
+        stopDrawing();
+    }
 
     window.onresize = reportWindowSize;
 }
 
+/**
+ * Start to driwing
+ * @param {*} ex
+ * @param {*} ey
+ */
+function startDrawing(ex, ey) {
+    x = ex;
+    y = ey;
+    isDrawing = true;
+}
+
+/**
+ * Send drawing coordinates to other peers in the room
+ * @param {*} newx
+ * @param {*} newy
+ * @param {*} ex
+ * @param {*} ey
+ */
+function sendDrawRemote(newx, newy, ex, ey) {
+    if (thereIsPeerConnections()) {
+        sendToServer('wb', {
+            room_id: roomId,
+            peer_name: myPeerName,
+            act: 'draw',
+            newx: newx,
+            newy: newy,
+            prevx: ex,
+            prevy: ey,
+            color: color,
+            size: drawsize,
+        });
+    }
+}
+
+/**
+ * Stop to drawing
+ */
+function stopDrawing() {
+    if (isDrawing) isDrawing = false;
+}
+
 /**
  * Save whiteboard canvas to file as png
  */