feat(game): resize canvas resolution

Author: itschip

.yarn.installed

@@ -111,6 +111,36 @@ exports.screencapture:remoteUpload(args[1], "https://api.fivemanage.com/api/imag
 end, "blob")
 ```
 
+## High-Resolution Display Optimization
+
+For users with 4K, ultrawide, or other high-resolution displays, you can customize the maximum screenshot resolution to balance quality and payload size:
+
+```lua
+-- Allow higher resolution for better quality (may increase upload time)
+exports.screencapture:remoteUpload(args[1], "https://api.fivemanage.com/api/image", {
+    encoding = "webp",
+    maxWidth = 2560,
+    maxHeight = 1440,
+    headers = {
+        ["Authorization"] = ""
+    }
+}, function(data)
+    print(data.url)
+end, "blob")
+
+-- Use lower resolution for faster uploads
+exports.screencapture:remoteUpload(args[1], "https://api.fivemanage.com/api/image", {
+    encoding = "webp",
+    maxWidth = 1280,
+    maxHeight = 720,
+    headers = {
+        ["Authorization"] = ""
+    }
+}, function(data)
+    print(data.url)
+end, "blob")
+```
+
 ## Screenshot Basic compatibility
 
 ### This is NOT recommended to use, as you risk exposing tokens to clients.

README.md

@@ -12,12 +12,18 @@ type CaptureRequest = {
   serverEndpoint: string;
   formField: string;
   dataType: 'blob' | 'base64';
+  maxWidth?: number;
+  maxHeight?: number;
 };
 
 export class Capture {
   #gameView: any;
   #canvas: HTMLCanvasElement | null = null;
 
+  // Maximum resolution to prevent oversized payloads
+  private readonly MAX_WIDTH = 1920;
+  private readonly MAX_HEIGHT = 1080;
+
   start() {
     window.addEventListener('message', async (event) => {
       const data = event.data as CaptureRequest;
@@ -34,12 +40,43 @@ export class Capture {
     });
   }
 
+  // fuck me
+  // i guess this is the downside of using webgl??
+  private calculateDimensions(request: CaptureRequest): { width: number; height: number } {
+    const originalWidth = window.innerWidth;
+    const originalHeight = window.innerHeight;
+    
+    const maxWidth = request.maxWidth || this.MAX_WIDTH;
+    const maxHeight = request.maxHeight || this.MAX_HEIGHT;
+    
+    if (originalWidth <= maxWidth && originalHeight <= maxHeight) {
+      return { width: originalWidth, height: originalHeight };
+    }
+    
+    const scaleX = maxWidth / originalWidth;
+    const scaleY = maxHeight / originalHeight;
+    const scale = Math.min(scaleX, scaleY);
+    
+    return {
+      width: Math.floor(originalWidth * scale),
+      height: Math.floor(originalHeight * scale)
+    };
+  }
+
   async captureScreen(request: CaptureRequest) {
     this.#canvas = document.createElement('canvas');
-    this.#canvas.width = window.innerWidth;
-    this.#canvas.height = window.innerHeight;
+    
+
+    const { width, height } = this.calculateDimensions(request);
+    this.#canvas.width = width;
+    this.#canvas.height = height;
+
+    console.log(`Capturing at ${width}x${height} (original: ${window.innerWidth}x${window.innerHeight})`);
 
     this.#gameView = createGameView(this.#canvas);
+    
+  
+    this.#gameView.resize(width, height);
 
     const enc = request.encoding ?? 'png';
     let imageData: string | Blob;
@@ -51,9 +88,7 @@ export class Capture {
     }
 
     if (!imageData) return console.error('No image available');
-    console.log('Image data:', imageData);
-    console.log("image size:", imageData.size);
-
+    
     await this.httpUploadImage(request, imageData);
     this.#canvas.remove();
   }
@@ -102,16 +137,30 @@ export class Capture {
 
   createBlob(canvas: HTMLCanvasElement, enc: Encoding): Promise<Blob> {
     return new Promise((resolve, reject) => {
+      // Calculate adaptive quality based on canvas size
+      const pixelCount = canvas.width * canvas.height;
+      let quality = 0.7; // default
+      
+      // wtf am I doing
+      if (pixelCount > 2073600) { //1920x1080
+        quality = 0.5;
+      } else if (pixelCount > 1440000) { //1200x1200
+        quality = 0.6;
+      }
+      
+      console.log(`Using quality ${quality} for ${canvas.width}x${canvas.height} (${pixelCount} pixels)`);
+      
       canvas.toBlob(
         (blob) => {
           if (blob) {
+            console.log(`Generated blob: ${(blob.size / 1024 / 1024).toFixed(2)}MB`);
             resolve(blob);
           } else {
             reject('No blob available');
           }
         },
         `image/${enc}`,
-        0.7,
+        quality,
       );
     });
   }

game/nui/src/capture.ts

@@ -11,11 +11,12 @@
   },
   "dependencies": {
     "@citizenfx/http-wrapper": "^0.2.2",
+    "@koa/router": "^13.1.0",
     "form-data": "^4.0.1",
+    "formidable": "^3.5.4",
     "koa": "^2.15.4",
     "koa-body": "^6.0.1",
     "koa-router": "^13.0.1",
-    "@koa/router": "^13.1.0",
     "multer": "1.4.5-lts.1",
     "nanoid": "^5.0.8",
     "node-fetch": "^3.3.2"

game/package.json

@@ -1,24 +1,25 @@
 import Koa from 'koa';
 import Router from '@koa/router';
-import { readFile } from 'fs/promises';
 
 // @ts-ignore - no types
 import { setHttpCallback } from '@citizenfx/http-wrapper';
+import { multer } from './multer'
 
 import FormData from 'form-data';
 import fetch from 'node-fetch';
 import { Blob } from 'node:buffer';
 import { CaptureOptions, DataType } from './types';
 import { UploadStore } from './upload-store';
-import koaBody from 'koa-body';
+
+const upload = multer({
+  storage: multer.memoryStorage()
+});
 
 export async function createServer(uploadStore: UploadStore) {
   const app = new Koa();
   const router = new Router();
 
-
-
-  router.post('/image', async (ctx) => {
+  router.post('/image', upload.single('file') as any, async (ctx) => {
     const token = ctx.request.headers['x-screencapture-token'] as string;
     if (!token) {
       ctx.status = 401;
@@ -29,24 +30,15 @@ export async function createServer(uploadStore: UploadStore) {
     const { callback, dataType, isRemote, remoteConfig, url, playerSource, correlationId } =
       uploadStore.getUpload(token);
 
-    if (!ctx.request.files || !ctx.request.files['file']) {
-      ctx.status = 400;
-      ctx.body = { status: 'error', message: 'No file provided' };
-    }
-
-    // i am so very sorry for this, but FivM and formidable fucking hate each other
-    const file = ctx.request.files?.['file'] as any;
-    if (!file) {
+    if (!ctx.files) {
       ctx.status = 400;
       ctx.body = { status: 'error', message: 'No file provided' };
-      return;
     }
 
-    const filePath = file.filepath || file.path
-    const fileBuffer = await readFile(filePath)
+    const file = ctx.file;
 
     try {
-      const buf = await buffer(dataType, fileBuffer);
+      const buf = await buffer(dataType, file.buffer);
 
       if (isRemote) {
         const response = await uploadFile(url, remoteConfig, buf, dataType);
@@ -74,10 +66,7 @@ export async function createServer(uploadStore: UploadStore) {
     }
   });
 
-  app.use(koaBody({
-    patchKoa: true,
-    multipart: true,
-  }))
+  app
     .use(router.routes())
     .use(router.allowedMethods());
 

game/server/koa-router.ts

@@ -32,6 +32,8 @@ export interface CaptureOptions {
   formField?: string;
   filename?: string;
   encoding?: string;
+  maxWidth?: number;
+  maxHeight?: number;
 }
 
 export type CallbackFn = (data: unknown, _playerSource?: number, correlationId?: string) => void;