node-mac-recorder 1.0.4 → 1.1.0

package/README.md

@@ -25,6 +25,7 @@ A powerful native macOS screen recording Node.js package with advanced window se
 - 🎯 **Automatic Coordinate Conversion** - Handle multi-display coordinate systems
 - 📐 **Display ID Detection** - Automatically select correct display for window recording
 - 🖼️ **Window Filtering** - Smart filtering of recordable windows
+- 👁️ **Preview Thumbnails** - Generate window and display preview images
 
 ⚙️ **Customization Options**
 
@@ -202,6 +203,34 @@ console.log(status);
 // }
 ```
 
+#### `getWindowThumbnail(windowId, options?)`
+
+Captures a thumbnail preview of a specific window.
+
+```javascript
+const thumbnail = await recorder.getWindowThumbnail(12345, {
+	maxWidth: 400, // Maximum width (default: 300)
+	maxHeight: 300, // Maximum height (default: 200)
+});
+
+// Returns: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
+// Can be used directly in <img> tags or saved as file
+```
+
+#### `getDisplayThumbnail(displayId, options?)`
+
+Captures a thumbnail preview of a specific display.
+
+```javascript
+const thumbnail = await recorder.getDisplayThumbnail(0, {
+	maxWidth: 400, // Maximum width (default: 300)
+	maxHeight: 300, // Maximum height (default: 200)
+});
+
+// Returns: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."
+// Perfect for display selection UI
+```
+
 ## Usage Examples
 
 ### Window-Specific Recording
@@ -311,6 +340,70 @@ recorder.on("completed", (outputPath) => {
 await recorder.startRecording("./event-recording.mov");
 ```
 
+### Window Selection with Thumbnails
+
+```javascript
+const recorder = new MacRecorder();
+
+// Get windows with thumbnail previews
+const windows = await recorder.getWindows();
+
+console.log("Available windows with previews:");
+for (const window of windows) {
+	console.log(`${window.appName} - ${window.name}`);
+
+	try {
+		// Generate thumbnail for each window
+		const thumbnail = await recorder.getWindowThumbnail(window.id, {
+			maxWidth: 200,
+			maxHeight: 150,
+		});
+
+		console.log(`Thumbnail: ${thumbnail.substring(0, 50)}...`);
+
+		// Use thumbnail in your UI:
+		// <img src="${thumbnail}" alt="Window Preview" />
+	} catch (error) {
+		console.log(`No preview available: ${error.message}`);
+	}
+}
+```
+
+### Display Selection Interface
+
+```javascript
+const recorder = new MacRecorder();
+
+async function createDisplaySelector() {
+	const displays = await recorder.getDisplays();
+
+	const displayOptions = await Promise.all(
+		displays.map(async (display, index) => {
+			try {
+				const thumbnail = await recorder.getDisplayThumbnail(display.id);
+				return {
+					id: display.id,
+					name: `Display ${index + 1}`,
+					resolution: display.resolution,
+					thumbnail: thumbnail,
+					isPrimary: display.isPrimary,
+				};
+			} catch (error) {
+				return {
+					id: display.id,
+					name: `Display ${index + 1}`,
+					resolution: display.resolution,
+					thumbnail: null,
+					isPrimary: display.isPrimary,
+				};
+			}
+		})
+	);
+
+	return displayOptions;
+}
+```
+
 ## Integration Examples
 
 ### Electron Integration

package/index.js

@@ -355,6 +355,64 @@ class MacRecorder extends EventEmitter {
 		});
 	}
 
+	/**
+	 * Pencere önizleme görüntüsü alır (Base64 PNG)
+	 */
+	async getWindowThumbnail(windowId, options = {}) {
+		if (!windowId) {
+			throw new Error("Window ID is required");
+		}
+
+		const { maxWidth = 300, maxHeight = 200 } = options;
+
+		return new Promise((resolve, reject) => {
+			try {
+				const base64Image = nativeBinding.getWindowThumbnail(
+					windowId,
+					maxWidth,
+					maxHeight
+				);
+
+				if (base64Image) {
+					resolve(`data:image/png;base64,${base64Image}`);
+				} else {
+					reject(new Error("Failed to capture window thumbnail"));
+				}
+			} catch (error) {
+				reject(error);
+			}
+		});
+	}
+
+	/**
+	 * Ekran önizleme görüntüsü alır (Base64 PNG)
+	 */
+	async getDisplayThumbnail(displayId, options = {}) {
+		if (displayId === null || displayId === undefined) {
+			throw new Error("Display ID is required");
+		}
+
+		const { maxWidth = 300, maxHeight = 200 } = options;
+
+		return new Promise((resolve, reject) => {
+			try {
+				const base64Image = nativeBinding.getDisplayThumbnail(
+					displayId,
+					maxWidth,
+					maxHeight
+				);
+
+				if (base64Image) {
+					resolve(`data:image/png;base64,${base64Image}`);
+				} else {
+					reject(new Error("Failed to capture display thumbnail"));
+				}
+			} catch (error) {
+				reject(error);
+			}
+		});
+	}
+
 	/**
 	 * Native modül bilgilerini döndürür
 	 */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "node-mac-recorder",
-	"version": "1.0.4",
+	"version": "1.1.0",
 	"description": "Native macOS screen recording package for Node.js applications",
 	"main": "index.js",
 	"keywords": [

package/preview-test.js

@@ -0,0 +1,329 @@
+const MacRecorder = require("./index.js");
+const fs = require("fs");
+
+async function testPreviews() {
+	const recorder = new MacRecorder();
+
+	console.log("🖼️ Thumbnail Preview Test\n");
+
+	try {
+		// 1. Display Previews
+		console.log("📺 Display Thumbnails Test...");
+		const displays = await recorder.getDisplays();
+
+		console.log(`Found ${displays.length} displays:`);
+		for (let i = 0; i < displays.length; i++) {
+			const display = displays[i];
+			console.log(
+				`  Display ${i}: ${display.resolution} ${
+					display.isPrimary ? "(Primary)" : ""
+				}`
+			);
+
+			try {
+				console.log(`  📸 Capturing thumbnail...`);
+				const thumbnail = await recorder.getDisplayThumbnail(display.id, {
+					maxWidth: 300,
+					maxHeight: 200,
+				});
+
+				console.log(`  ✅ Success: ${thumbnail.length} chars`);
+
+				// Save as HTML file to view
+				const htmlContent = `
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Display ${i} Preview</title>
+    <style>
+        body { 
+            font-family: Arial, sans-serif; 
+            text-align: center; 
+            padding: 20px; 
+            background: #f5f5f5;
+        }
+        .preview-card {
+            background: white;
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            max-width: 400px;
+            margin: 0 auto;
+        }
+        img { 
+            border: 2px solid #007AFF; 
+            border-radius: 8px; 
+            max-width: 100%;
+        }
+        .info { 
+            background: #f0f0f0; 
+            padding: 15px; 
+            border-radius: 8px; 
+            margin: 15px 0;
+            text-align: left;
+        }
+        h1 { color: #007AFF; }
+    </style>
+</head>
+<body>
+    <div class="preview-card">
+        <h1>📺 Display ${i} Preview</h1>
+        <div class="info">
+            <strong>Resolution:</strong> ${display.resolution}<br>
+            <strong>Position:</strong> (${display.x}, ${display.y})<br>
+            <strong>Primary:</strong> ${display.isPrimary ? "Yes" : "No"}<br>
+            <strong>Display ID:</strong> ${display.id}
+        </div>
+        <img src="${thumbnail}" alt="Display ${i} Preview" />
+        <p><small>Captured: ${new Date().toLocaleString()}</small></p>
+    </div>
+</body>
+</html>`;
+
+				fs.writeFileSync(`display-${i}-preview.html`, htmlContent);
+				console.log(`  💾 Saved: display-${i}-preview.html\n`);
+			} catch (error) {
+				console.log(`  ❌ Failed: ${error.message}\n`);
+			}
+		}
+
+		// 2. Window Previews
+		console.log("🪟 Window Thumbnails Test...");
+		const windows = await recorder.getWindows();
+
+		// Test first 3 windows
+		const testWindows = windows.slice(0, 3);
+		console.log(`Testing ${testWindows.length} windows:`);
+
+		for (let i = 0; i < testWindows.length; i++) {
+			const window = testWindows[i];
+			console.log(`  Window ${i}: [${window.appName}] ${window.name}`);
+			console.log(`  Size: ${window.width}x${window.height}`);
+
+			try {
+				console.log(`  📸 Capturing thumbnail...`);
+				const thumbnail = await recorder.getWindowThumbnail(window.id, {
+					maxWidth: 300,
+					maxHeight: 200,
+				});
+
+				console.log(`  ✅ Success: ${thumbnail.length} chars`);
+
+				// Save as HTML file to view
+				const htmlContent = `
+<!DOCTYPE html>
+<html>
+<head>
+    <title>${window.appName} Preview</title>
+    <style>
+        body { 
+            font-family: Arial, sans-serif; 
+            text-align: center; 
+            padding: 20px; 
+            background: #f5f5f5;
+        }
+        .preview-card {
+            background: white;
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            max-width: 400px;
+            margin: 0 auto;
+        }
+        img { 
+            border: 2px solid #FF3B30; 
+            border-radius: 8px; 
+            max-width: 100%;
+        }
+        .info { 
+            background: #f0f0f0; 
+            padding: 15px; 
+            border-radius: 8px; 
+            margin: 15px 0;
+            text-align: left;
+        }
+        h1 { color: #FF3B30; }
+        .app-name { color: #007AFF; font-weight: bold; }
+    </style>
+</head>
+<body>
+    <div class="preview-card">
+        <h1>🪟 <span class="app-name">${window.appName}</span></h1>
+        <div class="info">
+            <strong>Window:</strong> ${window.name}<br>
+            <strong>Size:</strong> ${window.width}x${window.height}<br>
+            <strong>Position:</strong> (${window.x}, ${window.y})<br>
+            <strong>Window ID:</strong> ${window.id}
+        </div>
+        <img src="${thumbnail}" alt="${window.appName} Preview" />
+        <p><small>Captured: ${new Date().toLocaleString()}</small></p>
+    </div>
+</body>
+</html>`;
+
+				const fileName = `window-${window.appName.replace(
+					/[^a-zA-Z0-9]/g,
+					""
+				)}-${i}-preview.html`;
+				fs.writeFileSync(fileName, htmlContent);
+				console.log(`  💾 Saved: ${fileName}\n`);
+			} catch (error) {
+				console.log(`  ❌ Failed: ${error.message}\n`);
+			}
+		}
+
+		// 3. Create Gallery
+		console.log("🎨 Creating Preview Gallery...");
+		const previewFiles = fs
+			.readdirSync(".")
+			.filter((file) => file.endsWith("-preview.html"))
+			.sort();
+
+		if (previewFiles.length > 0) {
+			const galleryContent = `
+<!DOCTYPE html>
+<html>
+<head>
+    <title>📸 Thumbnail Preview Gallery</title>
+    <style>
+        body { 
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; 
+            padding: 20px; 
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            min-height: 100vh;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+        .gallery { 
+            display: grid; 
+            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
+            gap: 20px; 
+            margin-top: 20px;
+        }
+        .preview-card {
+            background: rgba(255,255,255,0.1);
+            border-radius: 16px;
+            overflow: hidden;
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.2);
+            transition: transform 0.3s ease;
+        }
+        .preview-card:hover {
+            transform: translateY(-8px);
+        }
+        .card-header {
+            padding: 20px;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+        }
+        .card-title {
+            margin: 0;
+            font-size: 18px;
+            font-weight: 600;
+        }
+        .card-subtitle {
+            margin: 8px 0 0 0;
+            opacity: 0.8;
+            font-size: 14px;
+        }
+        iframe {
+            width: 100%;
+            height: 400px;
+            border: none;
+            background: white;
+        }
+        .stats {
+            background: rgba(255,255,255,0.2);
+            padding: 20px;
+            border-radius: 12px;
+            text-align: center;
+            margin-bottom: 30px;
+            backdrop-filter: blur(10px);
+        }
+        .btn {
+            background: rgba(255,255,255,0.2);
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            margin: 5px;
+            text-decoration: none;
+            display: inline-block;
+            transition: all 0.3s ease;
+        }
+        .btn:hover {
+            background: rgba(255,255,255,0.3);
+            transform: translateY(-2px);
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>📸 macOS Thumbnail Preview Gallery</h1>
+        <p>Screen and window thumbnails generated with node-mac-recorder</p>
+    </div>
+    
+    <div class="stats">
+        <strong>${previewFiles.length}</strong> Thumbnails Generated<br>
+        <small>Created at ${new Date().toLocaleString()}</small>
+    </div>
+    
+    <div style="text-align: center; margin-bottom: 20px;">
+        ${previewFiles
+					.map(
+						(file) =>
+							`<a href="${file}" class="btn" target="_blank">${file
+								.replace("-preview.html", "")
+								.replace(/-/g, " ")}</a>`
+					)
+					.join("")}
+    </div>
+    
+    <div class="gallery">
+        ${previewFiles
+					.map(
+						(file) => `
+            <div class="preview-card">
+                <div class="card-header">
+                    <h3 class="card-title">${file
+											.replace("-preview.html", "")
+											.replace(/-/g, " ")
+											.toUpperCase()}</h3>
+                    <p class="card-subtitle">${file}</p>
+                </div>
+                <iframe src="${file}"></iframe>
+            </div>
+        `
+					)
+					.join("")}
+    </div>
+    
+    <div style="text-align: center; margin-top: 40px; opacity: 0.8;">
+        <p>🚀 Generated with <strong>node-mac-recorder v1.1.0</strong></p>
+    </div>
+</body>
+</html>`;
+
+			fs.writeFileSync("preview-gallery.html", galleryContent);
+			console.log(`✅ Gallery created: preview-gallery.html`);
+		}
+
+		console.log("\n🎉 Preview Test Completed!");
+		console.log("\n📁 Generated Files:");
+		previewFiles.forEach((file) => console.log(`  - ${file}`));
+		console.log("  - preview-gallery.html (main gallery)");
+
+		console.log("\n🌐 View Results:");
+		console.log("  open preview-gallery.html");
+		console.log("\n💡 Individual files can be opened directly in browser!");
+	} catch (error) {
+		console.error("❌ Preview test failed:", error.message);
+		console.error(error.stack);
+	}
+}
+
+// Run preview test
+testPreviews();

package/src/mac_recorder.mm

@@ -413,6 +413,195 @@ Napi::Value GetRecordingStatus(const Napi::CallbackInfo& info) {
     return Napi::Boolean::New(env, g_isRecording);
 }
 
+// NAPI Function: Get Window Thumbnail
+Napi::Value GetWindowThumbnail(const Napi::CallbackInfo& info) {
+    Napi::Env env = info.Env();
+    
+    if (info.Length() < 1) {
+        Napi::TypeError::New(env, "Window ID is required").ThrowAsJavaScriptException();
+        return env.Null();
+    }
+    
+    uint32_t windowID = info[0].As<Napi::Number>().Uint32Value();
+    
+    // Optional parameters
+    int maxWidth = 300;  // Default thumbnail width
+    int maxHeight = 200; // Default thumbnail height
+    
+    if (info.Length() >= 2 && !info[1].IsNull()) {
+        maxWidth = info[1].As<Napi::Number>().Int32Value();
+    }
+    if (info.Length() >= 3 && !info[2].IsNull()) {
+        maxHeight = info[2].As<Napi::Number>().Int32Value();
+    }
+    
+    @try {
+        // Create window image
+        CGImageRef windowImage = CGWindowListCreateImage(
+            CGRectNull,
+            kCGWindowListOptionIncludingWindow,
+            windowID,
+            kCGWindowImageBoundsIgnoreFraming | kCGWindowImageShouldBeOpaque
+        );
+        
+        if (!windowImage) {
+            return env.Null();
+        }
+        
+        // Get original dimensions
+        size_t originalWidth = CGImageGetWidth(windowImage);
+        size_t originalHeight = CGImageGetHeight(windowImage);
+        
+        // Calculate scaled dimensions maintaining aspect ratio
+        double scaleX = (double)maxWidth / originalWidth;
+        double scaleY = (double)maxHeight / originalHeight;
+        double scale = std::min(scaleX, scaleY);
+        
+        size_t thumbnailWidth = (size_t)(originalWidth * scale);
+        size_t thumbnailHeight = (size_t)(originalHeight * scale);
+        
+        // Create scaled image
+        CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
+        CGContextRef context = CGBitmapContextCreate(
+            NULL,
+            thumbnailWidth,
+            thumbnailHeight,
+            8,
+            thumbnailWidth * 4,
+            colorSpace,
+            kCGImageAlphaPremultipliedLast
+        );
+        
+        if (context) {
+            CGContextDrawImage(context, CGRectMake(0, 0, thumbnailWidth, thumbnailHeight), windowImage);
+            CGImageRef thumbnailImage = CGBitmapContextCreateImage(context);
+            
+            if (thumbnailImage) {
+                // Convert to PNG data
+                NSBitmapImageRep *imageRep = [[NSBitmapImageRep alloc] initWithCGImage:thumbnailImage];
+                NSData *pngData = [imageRep representationUsingType:NSBitmapImageFileTypePNG properties:@{}];
+                
+                if (pngData) {
+                    // Convert to Base64
+                    NSString *base64String = [pngData base64EncodedStringWithOptions:0];
+                    std::string base64Std = [base64String UTF8String];
+                    
+                    CGImageRelease(thumbnailImage);
+                    CGContextRelease(context);
+                    CGColorSpaceRelease(colorSpace);
+                    CGImageRelease(windowImage);
+                    
+                    return Napi::String::New(env, base64Std);
+                }
+                
+                CGImageRelease(thumbnailImage);
+            }
+            
+            CGContextRelease(context);
+        }
+        
+        CGColorSpaceRelease(colorSpace);
+        CGImageRelease(windowImage);
+        
+        return env.Null();
+        
+    } @catch (NSException *exception) {
+        return env.Null();
+    }
+}
+
+// NAPI Function: Get Display Thumbnail
+Napi::Value GetDisplayThumbnail(const Napi::CallbackInfo& info) {
+    Napi::Env env = info.Env();
+    
+    if (info.Length() < 1) {
+        Napi::TypeError::New(env, "Display ID is required").ThrowAsJavaScriptException();
+        return env.Null();
+    }
+    
+    uint32_t displayID = info[0].As<Napi::Number>().Uint32Value();
+    
+    // Optional parameters
+    int maxWidth = 300;  // Default thumbnail width
+    int maxHeight = 200; // Default thumbnail height
+    
+    if (info.Length() >= 2 && !info[1].IsNull()) {
+        maxWidth = info[1].As<Napi::Number>().Int32Value();
+    }
+    if (info.Length() >= 3 && !info[2].IsNull()) {
+        maxHeight = info[2].As<Napi::Number>().Int32Value();
+    }
+    
+    @try {
+        // Create display image
+        CGImageRef displayImage = CGDisplayCreateImage(displayID);
+        
+        if (!displayImage) {
+            return env.Null();
+        }
+        
+        // Get original dimensions
+        size_t originalWidth = CGImageGetWidth(displayImage);
+        size_t originalHeight = CGImageGetHeight(displayImage);
+        
+        // Calculate scaled dimensions maintaining aspect ratio
+        double scaleX = (double)maxWidth / originalWidth;
+        double scaleY = (double)maxHeight / originalHeight;
+        double scale = std::min(scaleX, scaleY);
+        
+        size_t thumbnailWidth = (size_t)(originalWidth * scale);
+        size_t thumbnailHeight = (size_t)(originalHeight * scale);
+        
+        // Create scaled image
+        CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
+        CGContextRef context = CGBitmapContextCreate(
+            NULL,
+            thumbnailWidth,
+            thumbnailHeight,
+            8,
+            thumbnailWidth * 4,
+            colorSpace,
+            kCGImageAlphaPremultipliedLast
+        );
+        
+        if (context) {
+            CGContextDrawImage(context, CGRectMake(0, 0, thumbnailWidth, thumbnailHeight), displayImage);
+            CGImageRef thumbnailImage = CGBitmapContextCreateImage(context);
+            
+            if (thumbnailImage) {
+                // Convert to PNG data
+                NSBitmapImageRep *imageRep = [[NSBitmapImageRep alloc] initWithCGImage:thumbnailImage];
+                NSData *pngData = [imageRep representationUsingType:NSBitmapImageFileTypePNG properties:@{}];
+                
+                if (pngData) {
+                    // Convert to Base64
+                    NSString *base64String = [pngData base64EncodedStringWithOptions:0];
+                    std::string base64Std = [base64String UTF8String];
+                    
+                    CGImageRelease(thumbnailImage);
+                    CGContextRelease(context);
+                    CGColorSpaceRelease(colorSpace);
+                    CGImageRelease(displayImage);
+                    
+                    return Napi::String::New(env, base64Std);
+                }
+                
+                CGImageRelease(thumbnailImage);
+            }
+            
+            CGContextRelease(context);
+        }
+        
+        CGColorSpaceRelease(colorSpace);
+        CGImageRelease(displayImage);
+        
+        return env.Null();
+        
+    } @catch (NSException *exception) {
+        return env.Null();
+    }
+}
+
 // NAPI Function: Check Permissions
 Napi::Value CheckPermissions(const Napi::CallbackInfo& info) {
     Napi::Env env = info.Env();
@@ -466,6 +655,10 @@ Napi::Object Init(Napi::Env env, Napi::Object exports) {
     exports.Set(Napi::String::New(env, "getRecordingStatus"), Napi::Function::New(env, GetRecordingStatus));
     exports.Set(Napi::String::New(env, "checkPermissions"), Napi::Function::New(env, CheckPermissions));
     
+    // Thumbnail functions
+    exports.Set(Napi::String::New(env, "getWindowThumbnail"), Napi::Function::New(env, GetWindowThumbnail));
+    exports.Set(Napi::String::New(env, "getDisplayThumbnail"), Napi::Function::New(env, GetDisplayThumbnail));
+    
     return exports;
 }