feat: Added screenshot feature

assets/app/Application.js

@@ -1,5 +1,5 @@
-import Device from './Device.js';
-import Resolution from "./Resolution.js";
+import Device from './items/Device.js';
+import Resolution from "./items/Resolution.js";
 
 export default class Application {
 
@@ -233,4 +233,19 @@ export default class Application {
         this.volume = this.volume + delta;
         ui.setVolume(this.volume);
     }
+
+    /**
+     * @param {UI} ui
+     */
+    createScreenshot(ui) {
+        const videoOption = this.availableVideoOptions.filter(option => option.id === this.activeVideoOption)[0];
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+
+        canvas.width = videoOption.width;
+        canvas.height = videoOption.height;
+
+        context.drawImage(ui.videoPlayer, 0, 0, videoOption.width, videoOption.height);
+        return canvas.toDataURL('image/png').replace(/^data:image\/png;base64,/, "");
+    }
 }

assets/app/UI.js

@@ -11,6 +11,7 @@ export default class UI {
         this.videoDevices = this.getTag('video-devices');
         this.videoOptions = this.getTag('video-options')
         this.closeButton = this.getTag('close');
+        this.notifications = this.getTag('notifications')
     }
 
     /**

assets/app/items/Notification.js

@@ -0,0 +1,39 @@
+export default class Notification {
+
+    constructor(title, text) {
+
+        this.title = title;
+        this.text = text;
+
+        this.item = document.createElement('div');
+        this.item.classList.add('notification')
+
+        const titleItem = document.createElement('h3');
+        const textItem = document.createElement('span');
+
+        titleItem.innerText = this.title;
+        textItem.innerText = this.text;
+
+        this.item.appendChild(titleItem);
+        this.item.appendChild(textItem);
+    }
+
+    show(element, time) {
+        element.appendChild(this.item);
+        setTimeout(() => {
+            this.item.classList.add('show');
+            setTimeout(() => {
+                this.item.classList.remove('show');
+                setTimeout(() => {
+                    this.item.remove();
+                }, 500);
+            }, time)
+        }, 200);
+    }
+
+}
+
+const usage = new Notification(
+    'Capture',
+    'Screenshot saved in /home/user/cwa/captures/001.png'
+)

assets/script.js

@@ -1,6 +1,8 @@
 import Application from './app/Application.js';
 import UI from './app/UI.js';
 import ActivityManager from './app/ActivityManager.js';
+import Notification from "./app/items/Notification.js";
+
 
 (async () => {
     const application = new Application();
@@ -20,12 +22,28 @@ import ActivityManager from './app/ActivityManager.js';
 
     ui.closeButton.addEventListener('click', () => {
         window.close();
-    })
+    });
+
+    document.body.addEventListener('keydown', (event) => {
+        if (event.key === 'F12') {
+            const data = application.createScreenshot(ui);
+            const date = new Date();
+
+            const dateStr = date.toLocaleDateString().replaceAll('/', '-');
+            const timeStr = date.toLocaleTimeString().replaceAll(':', '-');
+
+            const filename = `screenshot-${dateStr}-${timeStr}.png`;
+
+            cwa.send('save-screenshot', [filename, data]);
+            const screenshot = new Notification('Screenshot saved', cwa.screenPath(filename));
+            screenshot.show(ui.notifications, 6000);
+        }
+    }, {passive: true})
 
     await application.openAudioStream();
     await application.openVideoStream();
 
-    window.application = application;
-    window.ui = ui;
-    window.activityManager = activityManager;
+    window.cwa.application = application;
+    window.cwa.ui = ui;
+    window.cwa.activityManager = activityManager;
 })();

assets/styles/style.css

@@ -251,3 +251,48 @@ body.active .media-overlay {
     top: 0;
     height: 100%;
 }
+
+
+.notification-container {
+    position: absolute;
+    right: 0;
+    top: calc(var(--title-bar-height) * 2);
+    bottom: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+}
+
+.notification {
+    background-color: black;
+    width: 350px;
+    padding: 0.5em 0.5em 0.5em 1em;
+    margin: 0.25em 0 0.25em auto;
+    border-top-left-radius: 50px;
+    border-bottom-left-radius: 50px;
+
+    transition: transform 0.5s ease-in-out;
+    transform: translateX(100%);
+}
+
+.notification.show {
+    transform: translateX(0);
+}
+
+.notification h3 {
+    text-transform: uppercase;
+    font-family: "Segoe UI", sans-serif;
+    font-size: 0.8em;
+    margin-bottom: 0.25em;
+    letter-spacing: 1px;
+    color: white;
+}
+
+.notification span {
+    font-size: 0.8em;
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    color: #aaa;
+}

boot.js

@@ -1,4 +1,6 @@
 const {app, BrowserWindow, ipcMain} = require('electron')
+const path = require("path");
+const fs = require('fs');
 require('electron-reload')(__dirname)
 
 const ratio = 16 / 9;
@@ -13,13 +15,33 @@ const createWindow = () => {
         webPreferences: {
             nodeIntegration: false,
             contextIsolation: true,
-            worldSafeExecuteJavaScript: true
+            worldSafeExecuteJavaScript: true,
+            preload: path.join(__dirname, 'preload.js')
         }
     });
 
     win.loadFile('index.html').then();
 }
 
+ipcMain.on('save-screenshot', (event, [filename, data]) => {
+
+    const homedir = require('os').homedir();
+    const screenshot = path.join(homedir, 'cwa', 'screenshots');
+
+    console.log(`[SCREENSHOT] Saving new screenshot into ${screenshot}...`)
+
+    if (!fs.existsSync(screenshot)) {
+        console.log('[SCREENSHOT] Creating directory...')
+        fs.mkdirSync(screenshot, {recursive: true})
+    }
+    const file = path.join(screenshot, filename);
+    console.log('[SCREENSHOT] Saving ' + file);
+
+    fs.writeFile(file, data, 'base64', function (err) {
+        console.error(err);
+    });
+})
+
 app.whenReady().then(() => {
     createWindow()
 

index.html

@@ -100,6 +100,9 @@
 
 
     </div>
+
+    <div class="notification-container" data-tag="notifications">
+    </div>
 </div>
 
 <script src="assets/script.js" type="module"></script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "camera-viewer-app",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "Stream HDMI (video + sound) with low latency, allowing screensharing with sound your HDMI input !",
   "main": "boot.js",
   "scripts": {

preload.js

@@ -0,0 +1,12 @@
+const {contextBridge, ipcRenderer} = require('electron');
+const path = require("path");
+
+contextBridge.exposeInMainWorld('cwa', {
+    send: (channel, ...data) => {
+        ipcRenderer.send(channel, ...data);
+    },
+    screenPath: (filename) => {
+        const homedir = require('os').homedir();
+        return path.join(homedir, 'cwa', 'screenshots', filename);
+    }
+})