Added Feature Auto Clipboard Sync

README.md

@@ -189,6 +189,12 @@ services.n6082.listen
 services.n6082.vnc
 ```
 
+
+### Note: Clipboard only serves over https . so do following tasks for Clipboard Sync :
+
+Create a pem file `openssl req -x509 -newkey rsa:2048 -keyout self.pem -out self.pem -days 365 -nodes`
+Make sure to add --ssl-only in the end of command `./utils/novnc_proxy  --vnc localhost:5901 --ssl-only`
+
 ### Integration and Deployment
 
 Please see our other documents for how to integrate noVNC in your own software,

app/ui.js

@@ -163,9 +163,9 @@ const UI = {
         UI.initSetting('port', 0);
         UI.initSetting('encrypt', (window.location.protocol === "https:"));
         UI.initSetting('view_clip', false);
-        UI.initSetting('resize', 'off');
+        UI.initSetting('resize', 'remote');
         UI.initSetting('quality', 6);
-        UI.initSetting('compression', 2);
+        UI.initSetting('compression', 10);
         UI.initSetting('shared', true);
         UI.initSetting('view_only', false);
         UI.initSetting('show_dot', false);
@@ -326,6 +326,8 @@ const UI = {
             .addEventListener('click', UI.toggleClipboardPanel);
         document.getElementById("noVNC_clipboard_text")
             .addEventListener('change', UI.clipboardSend);
+        document.querySelector("#hidden_clipboard_sender")
+            .addEventListener('click', UI.LocalclipboardSend);
     },
 
     // Add a call to save settings when the element changes,
@@ -962,6 +964,9 @@ const UI = {
     clipboardReceive(e) {
         Log.Debug(">> UI.clipboardReceive: " + e.detail.text.substr(0, 40) + "...");
         document.getElementById('noVNC_clipboard_text').value = e.detail.text;
+        document.querySelector('#hidden_clipboard_reciver').value=e.detail.text;
+        document.querySelector('#hidden_clipboard_reciver').click();
+        // recive clipboard
         Log.Debug("<< UI.clipboardReceive");
     },
 
@@ -972,6 +977,15 @@ const UI = {
         Log.Debug("<< UI.clipboardSend");
     },
 
+    LocalclipboardSend() {
+        const text = document.querySelector('#hidden_clipboard_sender').value;
+        Log.Debug(">> UI.clipboardSend: " + text.substr(0, 40) + "...");
+        if(text && UI.rfb){
+            UI.rfb.clipboardPasteFrom(text);
+        }
+        Log.Debug("<< UI.clipboardSend");
+    },
+
 /* ------^-------
  *  /CLIPBOARD
  * ==============

vnc.html

@@ -338,5 +338,44 @@ <h1 class="noVNC_logo" translate="no"><span>no</span><br>VNC</h1>
         <source src="app/sounds/bell.oga" type="audio/ogg">
         <source src="app/sounds/bell.mp3" type="audio/mpeg">
     </audio>
+
+    <input type="hidden" id="hidden_clipboard_reciver" onclick="write_clipboard()" value="">
+    <input type="hidden" id="hidden_clipboard_sender" onclick="write_clipboard()" value="">
+    <script>
+    const syncClipboard = async () => {
+        const { state } = await navigator.permissions.query({ name: 'clipboard-write' });
+        document.addEventListener('mouseenter', async () => {
+            try {
+                const text = await navigator.clipboard.readText();
+                document.querySelector('#hidden_clipboard_sender').value=text;
+                document.querySelector('#hidden_clipboard_sender').click();
+            } catch (error) {
+                console.log('Failed to read from clipboard:', error);
+            }
+        });
+    };
+    syncClipboard();
+    // snyc clipboard
+
+    try {
+        // Check if the Clipboard API is supported
+        if (!navigator.clipboard) {
+            console.log('Clipboard API not supported');
+        }
+    } catch (err) {
+        console.error('Error copying text: ', err);
+    }
+    // request for clipboard permission
+
+    async function write_clipboard(){
+        let txt=document.querySelector('#hidden_clipboard_reciver').value;
+        try {
+            await navigator.clipboard.writeText(txt);
+        } catch (error) {
+            console.log('Failed to read from clipboard:', error);
+        }
+    }
+    // snyc write to local from remote
+    </script>
  </body>
 </html>