Update 19.11.2022

HTML/gcphone/resources/screenshot-basic/.gitignore

@@ -0,0 +1,4 @@
+dist/
+node_modules/
+yarn-error.log
+.yarn.installed

HTML/gcphone/resources/screenshot-basic/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2019 The CitizenFX Developers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

HTML/gcphone/resources/screenshot-basic/README.md

@@ -0,0 +1,91 @@
+# screenshot-basic for FiveM
+
+## Description
+
+screenshot-basic is a basic resource for making screenshots of clients' game render targets using FiveM. It uses the same backing
+WebGL/OpenGL ES calls as used by the `application/x-cfx-game-view` plugin (see the code in [citizenfx/fivem](https://github.com/citizenfx/fivem/blob/b0a7cda1007dc53d2ba0f638c035c0a5d1402796/data/client/bin/d3d_rendering.cc#L248)),
+and wraps these calls using Three.js to 'simplify' WebGL initialization and copying to a buffer from asynchronous NUI.
+
+## Usage
+
+1. Make sure your [cfx-server-data](https://github.com/citizenfx/cfx-server-data) is updated as of 2019-01-15 or later. You can easily
+   update it by running `git pull` in your local clone directory.
+2. Install `screenshot-basic`:
+   ```
+   mkdir -p 'resources/[local]/'
+   cd 'resources/[local]'
+   git clone https://github.com/citizenfx/screenshot-basic.git screenshot-basic
+   ```
+3. Make/use a resource that uses it. Currently, there are no directly-usable commands, it is only usable through exports.
+
+## API
+
+### Client
+
+#### requestScreenshot(options?: any, cb: (result: string) => void)
+Takes a screenshot and passes the data URI to a callback. Please don't send this through _any_ server events.
+
+Arguments:
+* **options**: An optional object containing options.
+  * **encoding**: 'png' | 'jpg' | 'webp' - The target image encoding. Defaults to 'jpg'.
+  * **quality**: number - The quality for a lossy image encoder, in a range for 0.0-1.0. Defaults to 0.92.
+* **cb**: A callback upon result.
+  * **result**: A `base64` data URI for the image.
+
+Example:
+
+```lua
+exports['screenshot-basic']:requestScreenshot(function(data)
+    TriggerEvent('chat:addMessage', { template = '<img src="{0}" style="max-width: 300px;" />', args = { data } })
+end)
+```
+
+#### requestScreenshotUpload(url: string, field: string, options?: any, cb: (result: string) => void)
+Takes a screenshot and uploads it as a file (`multipart/form-data`) to a remote HTTP URL.
+
+Arguments:
+* **url**: The URL to a file upload handler.
+* **field**: The name for the form field to add the file to.
+* **options**: An optional object containing options.
+  * **encoding**: 'png' | 'jpg' | 'webp' - The target image encoding. Defaults to 'jpg'.
+  * **quality**: number - The quality for a lossy image encoder, in a range for 0.0-1.0. Defaults to 0.92.
+* **cb**: A callback upon result.
+  * **result**: The response data for the remote URL.
+
+Example:
+
+```lua
+exports['screenshot-basic']:requestScreenshotUpload('https://wew.wtf/upload.php', 'files[]', function(data)
+    local resp = json.decode(data)
+    TriggerEvent('chat:addMessage', { template = '<img src="{0}" style="max-width: 300px;" />', args = { resp.files[1].url } })
+end)
+```
+
+### Server
+The server can also request a client to take a screenshot and upload it to a built-in HTTP handler on the server.
+
+Using this API on the server requires at least FiveM client version 1129160, and server pipeline 1011 or higher.
+
+#### requestClientScreenshot(player: string | number, options: any, cb: (err: string | boolean, data: string) => void)
+Requests the specified client to take a screenshot.
+
+Arguments:
+* **player**: The target player's player index.
+* **options**: An object containing options.
+  * **fileName**: string? - The file name on the server to save the image to. If not passed, the callback will get a data URI for the image data.
+  * **encoding**: 'png' | 'jpg' | 'webp' - The target image encoding. Defaults to 'jpg'.
+  * **quality**: number - The quality for a lossy image encoder, in a range for 0.0-1.0. Defaults to 0.92.
+* **cb**: A callback upon result.
+  * **err**: `false`, or an error string.
+  * **data**: The local file name the upload was saved to, or the data URI for the image.
+
+
+Example:
+```lua
+exports['screenshot-basic']:requestClientScreenshot(GetPlayers()[1], {
+    fileName = 'cache/screenshot.jpg'
+}, function(err, data)
+    print('err', err)
+    print('data', data)
+end)
+```

HTML/gcphone/resources/screenshot-basic/client.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+    entry: './src/client/client.ts',
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/
+            }
+        ]
+    },
+    resolve: {
+        extensions: [ '.tsx', '.ts', '.js' ]
+    },
+	output: {
+		filename: 'client.js',
+		path: __dirname + '/dist/'
+    },
+    node: {
+        fs: 'empty'
+    }
+};

HTML/gcphone/resources/screenshot-basic/fxmanifest.lua

@@ -0,0 +1,18 @@
+fx_version 'bodacious'
+game 'common'
+
+client_script 'dist/client.js'
+server_script 'dist/server.js'
+
+dependency 'yarn'
+dependency 'webpack'
+
+webpack_config 'client.config.js'
+webpack_config 'server.config.js'
+webpack_config 'ui.config.js'
+
+files {
+    'dist/ui.html'
+}
+
+ui_page 'dist/ui.html'

HTML/gcphone/resources/screenshot-basic/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "screenshot-basic",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@citizenfx/client": "^1.0.3404-1",
+    "@citizenfx/http-wrapper": "^0.2.2",
+    "@citizenfx/server": "^1.0.3404-1",
+    "@citizenfx/three": "^0.100.0",
+    "@types/koa": "^2.11.6",
+    "@types/koa-router": "^7.4.1",
+    "@types/mv": "^2.1.0",
+    "@types/uuid": "^8.3.0",
+    "html-webpack-inline-source-plugin": "^0.0.10",
+    "html-webpack-plugin": "^3.2.0",
+    "koa": "^2.6.2",
+    "koa-body": "^4.0.6",
+    "koa-router": "^7.4.0",
+    "mv": "^2.1.1",
+    "ts-loader": "^5.3.3",
+    "typescript": "3.2.2",
+    "uuid": "^3.3.2",
+    "webpack": "4.28.4"
+  }
+}

HTML/gcphone/resources/screenshot-basic/server.config.js

@@ -0,0 +1,29 @@
+const webpack = require('webpack');
+
+module.exports = {
+    entry: './src/server/server.ts',
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/
+            }
+        ]
+    },
+    // https://github.com/felixge/node-formidable/issues/337#issuecomment-153408479
+    plugins: [
+        new webpack.DefinePlugin({ "global.GENTLY": false })
+    ],
+    optimization: {
+        minimize: false
+    },
+    resolve: {
+        extensions: [ '.tsx', '.ts', '.js' ]
+    },
+	output: {
+		filename: 'server.js',
+        path: __dirname + '/dist/'
+    },
+    target: 'node'
+};

HTML/gcphone/resources/screenshot-basic/src/client/client.ts

@@ -0,0 +1,80 @@
+const exp = (<any>global).exports;
+
+RegisterNuiCallbackType('screenshot_created');
+
+class ResultData {
+    cb: (data: string) => void;
+}
+
+const results: {[id: string]: ResultData} = {};
+let correlationId = 0;
+
+function registerCorrelation(cb: (result: string) => void) {
+    const id = correlationId.toString();
+
+    results[id] = { cb };
+
+    correlationId++;
+
+    return id;
+}
+
+on('__cfx_nui:screenshot_created', (body: any, cb: (arg: any) => void) => {
+    cb(true);
+
+    if (body.id !== undefined && results[body.id]) {
+        results[body.id].cb(body.data);
+        delete results[body.id];
+    }
+});
+
+exp('requestScreenshot', (options: any, cb: (result: string) => void) => {
+    const realOptions = (cb !== undefined) ? options : {
+        encoding: 'jpg'
+    };
+
+    const realCb = (cb !== undefined) ? cb : options;
+
+    realOptions.resultURL = null;
+    realOptions.targetField = null;
+    realOptions.targetURL = `http://${GetCurrentResourceName()}/screenshot_created`;
+    
+    realOptions.correlation = registerCorrelation(realCb);
+
+    SendNuiMessage(JSON.stringify({
+        request: realOptions
+    }));
+});
+
+exp('requestScreenshotUpload', (url: string, field: string, options: any, cb: (result: string) => void) => {
+    const realOptions = (cb !== undefined) ? options : {
+        headers: {},
+        encoding: 'jpg'
+    };
+
+    const realCb = (cb !== undefined) ? cb : options;
+
+    realOptions.targetURL = url;
+    realOptions.targetField = field;
+    realOptions.resultURL = `http://${GetCurrentResourceName()}/screenshot_created`;
+    
+    realOptions.correlation = registerCorrelation(realCb);
+
+    SendNuiMessage(JSON.stringify({
+        request: realOptions
+    }));
+});
+
+onNet('screenshot_basic:requestScreenshot', (options: any, url: string) => {
+    options.encoding = options.encoding || 'jpg';
+
+    options.targetURL = `http://${GetCurrentServerEndpoint()}${url}`;
+    options.targetField = 'file';
+    options.resultURL = null;
+
+    options.correlation = registerCorrelation(() => {});
+
+    SendNuiMessage(JSON.stringify({
+        request: options
+    }));
+});

HTML/gcphone/resources/screenshot-basic/src/client/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "./",
+        "noImplicitAny": true,
+        "module": "es6",
+        "target": "es6",
+        "allowJs": true,
+        "lib": ["es2017"],
+        "types": ["@citizenfx/server", "@citizenfx/client", "node"],
+        "moduleResolution": "node"
+    },
+    "include": [
+        "./**/*"
+    ],
+    "exclude": [
+        
+    ]
+}

HTML/gcphone/resources/screenshot-basic/src/server/server.ts

@@ -0,0 +1,96 @@
+import { setHttpCallback } from '@citizenfx/http-wrapper';
+
+import { v4 } from 'uuid';
+import * as fs from 'fs';
+import * as Koa from 'koa';
+import * as Router from 'koa-router';
+import * as koaBody from 'koa-body';
+import * as mv from 'mv';
+import { File } from 'formidable';
+
+const app = new Koa();
+const router = new Router();
+
+class UploadData {
+    fileName: string;
+
+    cb: (err: string | boolean, data: string) => void;
+}
+
+const uploads: { [token: string]: UploadData } = {};
+
+router.post('/upload/:token', async (ctx) => {
+    const tkn: string = ctx.params['token'];
+
+    ctx.response.append('Access-Control-Allow-Origin', '*');
+    ctx.response.append('Access-Control-Allow-Methods', 'GET, POST');
+
+    if (uploads[tkn] !== undefined) {
+        const upload = uploads[tkn];
+        delete uploads[tkn];
+
+        const finish = (err: string, data: string) => {
+            setImmediate(() => {
+                upload.cb(err || false, data);
+            });
+        }
+
+        const f = ctx.request.files['file'] as File;
+
+        if (f) {
+            if (upload.fileName) {
+                mv(f.path, upload.fileName, (err) => {
+                    if (err) {
+                        finish(err.message, null);
+                        return;
+                    }
+
+                    finish(null, upload.fileName);
+                });
+            } else {
+                fs.readFile(f.path, (err, data) => {
+                    if (err) {
+                        finish(err.message, null);
+                        return;
+                    }
+
+                    fs.unlink(f.path, (err) => {
+                        finish(null, `data:${f.type};base64,${data.toString('base64')}`);
+                    });
+                });
+            }
+        }
+
+        ctx.body = { success: true };
+
+        return;
+    }
+
+    ctx.body = { success: false };
+});
+
+app.use(koaBody({
+        patchKoa: true,
+        multipart: true,
+    }))
+   .use(router.routes())
+   .use(router.allowedMethods());
+
+setHttpCallback(app.callback());
+
+// Cfx stuff
+const exp = (<any>global).exports;
+
+exp('requestClientScreenshot', (player: string | number, options: any, cb: (err: string | boolean, data: string) => void) => {
+    const tkn = v4();
+
+    const fileName = options.fileName;
+    delete options['fileName']; // so the client won't get to know this
+
+    uploads[tkn] = {
+        fileName,
+        cb
+    };
+
+    emitNet('screenshot_basic:requestScreenshot', player, options, `/${GetCurrentResourceName()}/upload/${tkn}`);
+});

HTML/gcphone/resources/screenshot-basic/src/server/tsconfig.json

@@ -0,0 +1,20 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": { "*": ["types/*"] },
+        "outDir": "./",
+        "noImplicitAny": false,
+        "module": "es6",
+        "target": "es6",
+        "allowJs": true,
+        "lib": ["es2017"],
+        "types": ["@citizenfx/server", "@citizenfx/client", "node"],
+        "moduleResolution": "node"
+    },
+    "include": [
+        "./**/*"
+    ],
+    "exclude": [
+        
+    ]
+}

HTML/gcphone/resources/screenshot-basic/src/server/types/@citizenfx/http-wrapper.d.ts

@@ -0,0 +1 @@
+export function setHttpCallback(requestHandler: any): void;

HTML/gcphone/resources/screenshot-basic/ui.config.js

@@ -0,0 +1,30 @@
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
+
+module.exports = {
+    entry: './ui/src/main.ts',
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/
+            }
+        ]
+    },
+    plugins: [
+        new HtmlWebpackPlugin({
+            inlineSource: '.(js|css)$',
+            template: './ui/index.html',
+            filename: 'ui.html'
+        }),
+        new HtmlWebpackInlineSourcePlugin()
+    ],
+    resolve: {
+        extensions: [ '.ts', '.js' ]
+    },
+	output: {
+		filename: 'ui.js',
+		path: __dirname + '/dist/'
+	},
+};

HTML/gcphone/resources/screenshot-basic/ui/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Screenshot Helper</title>
+
+    <style type="text/css">
+      * {
+        background-color: transparent;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

HTML/gcphone/resources/screenshot-basic/ui/src/main.ts

@@ -0,0 +1,225 @@
+import {
+    OrthographicCamera,
+    Scene,
+    WebGLRenderTarget,
+    LinearFilter,
+    NearestFilter,
+    RGBAFormat,
+    UnsignedByteType,
+    CfxTexture,
+    ShaderMaterial,
+    PlaneBufferGeometry,
+    Mesh,
+    WebGLRenderer
+} from '@citizenfx/three';
+
+class ScreenshotRequest {
+    encoding: 'jpg' | 'png' | 'webp';
+    quality: number;
+    headers: any;
+
+    correlation: string;
+
+    resultURL: string;
+
+    targetURL: string;
+    targetField: string;
+}
+
+// from https://stackoverflow.com/a/12300351
+function dataURItoBlob(dataURI: string) {
+    const byteString = atob(dataURI.split(',')[1]);
+    const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
+
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+  
+    for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+    }
+  
+    const blob = new Blob([ab], {type: mimeString});
+    return blob;
+}
+
+class ScreenshotUI {
+    renderer: any;
+    rtTexture: any;
+    sceneRTT: any;
+    cameraRTT: any;
+    material: any;
+    request: ScreenshotRequest;
+
+    initialize() {
+        window.addEventListener('message', event => {
+            this.request = event.data.request;
+        });
+
+        window.addEventListener('resize', event => {
+            this.resize();
+        });
+
+        const cameraRTT: any = new OrthographicCamera( window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -10000, 10000 );
+        cameraRTT.position.z = 100;
+
+        const sceneRTT: any = new Scene();
+
+        const rtTexture = new WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat, type: UnsignedByteType } );
+        const gameTexture: any = new CfxTexture( );
+        gameTexture.needsUpdate = true;
+
+        const material = new ShaderMaterial( {
+
+            uniforms: { "tDiffuse": { value: gameTexture } },
+            vertexShader: `
+			varying vec2 vUv;
+
+			void main() {
+				vUv = vec2(uv.x, 1.0-uv.y); // fuck gl uv coords
+				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+			}
+`,
+            fragmentShader: `
+			varying vec2 vUv;
+			uniform sampler2D tDiffuse;
+
+			void main() {
+				gl_FragColor = texture2D( tDiffuse, vUv );
+			}
+`
+
+        } );
+
+        this.material = material;
+
+        const plane = new PlaneBufferGeometry( window.innerWidth, window.innerHeight );
+        const quad: any = new Mesh( plane, material );
+        quad.position.z = -100;
+        sceneRTT.add( quad );
+
+        const renderer = new WebGLRenderer();
+        renderer.setPixelRatio( window.devicePixelRatio );
+        renderer.setSize( window.innerWidth, window.innerHeight );
+        renderer.autoClear = false;
+
+        document.getElementById('app').appendChild(renderer.domElement);
+        document.getElementById('app').style.display = 'none';
+
+        this.renderer = renderer;
+        this.rtTexture = rtTexture;
+        this.sceneRTT = sceneRTT;
+        this.cameraRTT = cameraRTT;
+
+        this.animate = this.animate.bind(this);
+
+        requestAnimationFrame(this.animate);
+    }
+
+    resize() {
+        const cameraRTT: any = new OrthographicCamera( window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -10000, 10000 );
+        cameraRTT.position.z = 100;
+
+        this.cameraRTT = cameraRTT;
+
+        const sceneRTT: any = new Scene();
+
+        const plane = new PlaneBufferGeometry( window.innerWidth, window.innerHeight );
+        const quad: any = new Mesh( plane, this.material );
+        quad.position.z = -100;
+        sceneRTT.add( quad );
+
+        this.sceneRTT = sceneRTT;
+
+        this.rtTexture = new WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: LinearFilter, magFilter: NearestFilter, format: RGBAFormat, type: UnsignedByteType } );
+
+        this.renderer.setSize( window.innerWidth, window.innerHeight );
+    }
+
+    animate() {
+        requestAnimationFrame(this.animate);
+
+        this.renderer.clear();
+        this.renderer.render(this.sceneRTT, this.cameraRTT, this.rtTexture, true);
+
+        if (this.request) {
+            const request = this.request;
+            this.request = null;
+
+            this.handleRequest(request);
+        }
+    }
+
+    handleRequest(request: ScreenshotRequest) {
+        // read the screenshot
+        const read = new Uint8Array(window.innerWidth * window.innerHeight * 4);
+        this.renderer.readRenderTargetPixels(this.rtTexture, 0, 0, window.innerWidth, window.innerHeight, read);
+
+        // create a temporary canvas to compress the image
+        const canvas = document.createElement('canvas');
+        canvas.style.display = 'inline';
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        // draw the image on the canvas
+        const d = new Uint8ClampedArray(read.buffer);
+
+        const cxt = canvas.getContext('2d');
+        cxt.putImageData(new ImageData(d, window.innerWidth, window.innerHeight), 0, 0);
+
+        // encode the image
+        let type = 'image/png';
+
+        switch (request.encoding) {
+            case 'jpg':
+                type = 'image/jpeg';
+                break;
+            case 'png':
+                type = 'image/png';
+                break;
+            case 'webp':
+                type = 'image/webp';
+                break;
+        }
+
+        if (!request.quality) {
+            request.quality = 0.92;
+        }
+
+        // actual encoding
+        const imageURL = canvas.toDataURL(type, request.quality);
+
+        const getFormData = () => {
+            const formData = new FormData();
+            formData.append(request.targetField, dataURItoBlob(imageURL), `screenshot.${request.encoding}`);
+
+            return formData;
+        };
+
+        // upload the image somewhere
+        fetch(request.targetURL, {
+            method: 'POST',
+            mode: 'cors',
+            headers: request.headers,
+            body: (request.targetField) ? getFormData() : JSON.stringify({
+                data: imageURL,
+                id: request.correlation
+            })
+        })
+        .then(response => response.text())
+        .then(text => {
+            if (request.resultURL) {
+                fetch(request.resultURL, {
+                    method: 'POST',
+                    mode: 'cors',
+                    body: JSON.stringify({
+                        data: text,
+                        id: request.correlation
+                    })
+                });
+            }
+        });
+    }
+}
+
+const ui = new ScreenshotUI();
+ui.initialize();

HTML/gcphone/resources/screenshot-basic/ui/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+        "outDir": "./",
+        "noImplicitAny": false,
+        "module": "es6",
+        "moduleResolution": "node",
+        "target": "es6",
+        "allowJs": true,
+        "lib": [
+            "es2016",
+            "dom"
+        ]
+    },
+    "include": [
+        "./**/*"
+    ],
+    "exclude": []
+}