Security HUD
System Watchdog
×
Threads Scanned ⟳
-- / --
SYS. LOAD --%
AI SHIELD ACTIVE
Backdoors Found: 0
DMCA Policy
×

📋 DMCA Compliance

This platform and community fully complies with the Digital Millennium Copyright Act (DMCA) and international copyright laws. We take all copyright protection seriously.

🛡️ Copyright Protection

If you believe a posted item belongs to you or violates your copyright, you may file a DMCA takedown request through our official channels. Upon receiving a valid claim, the infringing content will be removed within 24 hours.

What's new
×
Fiveguard
justscripts

Phone FiveM Video Talk - Render GameView to HTML canvas element

cfxregame

cfxregame

Gold Elite
Joined
Nov 3, 2021
Messages
319
Reaction score
166,483
Points
361
Location
Newyork
Website
cfx.re

Hidden link for visitors, to see Log in or register now.



FiveM Realtime GameView for HTML
Original script made by citizenfx

Installation
Put utk_render in your resource folder and start it like any other resource

script.js has a small config in it which you can define default upload url and field

Usage​

  • in your html file put this code inside your body tag and make sure it's loaded before your scripts:
<script type="module" src="nui://utk_render/script.js"></script>
Click to expand...

Functions​

Request Screenshot​

Takes a screenshot and uploads it to the defined url

  • Async method:
    async function takeScreenshot() {
    let resp = await MainRender.requestScreenshot("
    Hidden link for visitors, to see Log in or register now.
    ", "files[]");
    console.log("resp", resp);
    }
  • Normal method:
    MainRender.requestScreenshot("
    Hidden link for visitors, to see Log in or register now.
    ", "files[]").then((resp) => {
    console.log("resp", resp);
    })
Click to expand...

Render GameView to a canvas element​


Can be used for a lot of stuff: video calls, video record, live stream ...

  • Start canvas render
    const canvas = document.getElementById("videocall-canvas");

    MainRender.renderToTarget(canvas);
  • Stop canvas render
    MainRender.stop();

Basic Example​

  • html
    <body>
    <button id="start">Start Video Call</button>
    <button id="stop" disabled>Stop Video Call</button>
    <canvas id="videocall-canvas" style="display: none; position: absolute; width: 250px; height: 575px; right: 5px; bottom: 5px; border: solid 5px red;"></canvas>

    <script type="module" src="nui://utk_render/script.js"></script>
    <script src="index.js"></script>
    </body>
  • index.js
    const startButton = document.getElementById("start");
    const stopButton = document.getElementById("stop");
    const canvas = document.getElementById("videocall-canvas");

    startButton.addEventListener("click", () => {
    canvas.style.display = "block"
    MainRender.renderToTarget(canvas);
    stopButton.disabled = true;
    startButton.disabled = false;
    });

    stopButton.addEventListener("click", () => {
    MainRender.stop();
    stopButton.disabled = false;
    startButton.disabled = true;
    });
Click to expand...

Important Note​

Realtime render was made for my own phone therefore, render width and height ratio is fixed for 250px 575px which is 10 / 23 however, you can change this by some simple edits:

  • script.js line:37 and line:97
    // this width is 10 / 23 which is 250 to 575
    const width = Math.floor(window.innerHeight * 10 / 23);

    // 3rd parameter is left offset for the camera, setting it to 0 means most left side of the game, setting it to window.innerWidth / 2 means half of the game
    cameraRTT.setViewOffset(window.innerWidth, window.innerHeight, window.innerWidth / 3.5, 0, width, window.innerHeight);
Click to expand...
 

antiddos

Member
Joined
May 14, 2021
Messages
1
Reaction score
0
Points
146
Could you teach us how to implement it in crew phone for example, or gc phone?
 
kga2113

kga2113

Silver Elite
Joined
Mar 1, 2022
Messages
41
Reaction score
16
Points
166
Location
india
Castillo said:

Hidden link for visitors, to see Log in or register now.



FiveM Realtime GameView for HTML
Original script made by citizenfx

Installation
Put utk_render in your resource folder and start it like any other resource

script.js has a small config in it which you can define default upload url and field

Usage​

  • in your html file put this code inside your body tag and make sure it's loaded before your scripts:

Functions​

Request Screenshot​

Takes a screenshot and uploads it to the defined url


Render GameView to a canvas element​


Can be used for a lot of stuff: video calls, video record, live stream ...

  • Start canvas render
    const canvas = document.getElementById("videocall-canvas");

    MainRender.renderToTarget(canvas);
  • Stop canvas render
    MainRender.stop();

Basic Example​


Important Note​

Realtime render was made for my own phone therefore, render width and height ratio is fixed for 250px 575px which is 10 / 23 however, you can change this by some simple edits:
Click to expand...
 
downycc

downycc

Silver Elite
Joined
May 7, 2022
Messages
26
Reaction score
9
Points
166
Location
quebec
Castillo said:

Hidden link for visitors, to see Log in or register now.



FiveM Realtime GameView for HTML
Original script made by citizenfx

Installation
Put utk_render in your resource folder and start it like any other resource

script.js has a small config in it which you can define default upload url and field

Usage​

  • in your html file put this code inside your body tag and make sure it's loaded before your scripts:

Functions​

Request Screenshot​

Takes a screenshot and uploads it to the defined url


Render GameView to a canvas element​


Can be used for a lot of stuff: video calls, video record, live stream ...

  • Start canvas render
    const canvas = document.getElementById("videocall-canvas");

    MainRender.renderToTarget(canvas);
  • Stop canvas render
    MainRender.stop();

Basic Example​


Important Note​

Realtime render was made for my own phone therefore, render width and height ratio is fixed for 250px 575px which is 10 / 23 however, you can change this by some simple edits:
Click to expand...
 

Allap

Gold Elite
Joined
Jun 29, 2022
Messages
31
Reaction score
142
Points
246
Location
Brazil
Castillo said:

Hidden link for visitors, to see Log in or register now.



FiveM Realtime GameView for HTML
Original script made by citizenfx

Installation
Put utk_render in your resource folder and start it like any other resource

script.js has a small config in it which you can define default upload url and field

Usage​

  • in your html file put this code inside your body tag and make sure it's loaded before your scripts:

Functions​

Request Screenshot​

Takes a screenshot and uploads it to the defined url


Render GameView to a canvas element​


Can be used for a lot of stuff: video calls, video record, live stream ...

  • Start canvas render
    const canvas = document.getElementById("videocall-canvas");

    MainRender.renderToTarget(canvas);
  • Stop canvas render
    MainRender.stop();

Basic Example​


Important Note​

Realtime render was made for my own phone therefore, render width and height ratio is fixed for 250px 575px which is 10 / 23 however, you can change this by some simple edits:
Click to expand...
Link isn't working.
 
hybrid2391

hybrid2391

Gold Elite
Joined
May 3, 2021
Messages
88
Reaction score
515
Points
296
cfxregame said:

Hidden link for visitors, to see Log in or register now.



FiveM Realtime GameView for HTML
Original script made by citizenfx

Installation
Put utk_render in your resource folder and start it like any other resource

script.js has a small config in it which you can define default upload url and field

Usage​

  • in your html file put this code inside your body tag and make sure it's loaded before your scripts:

Functions​

Request Screenshot​

Takes a screenshot and uploads it to the defined url


Render GameView to a canvas element​


Can be used for a lot of stuff: video calls, video record, live stream ...

  • Start canvas render
    const canvas = document.getElementById("videocall-canvas");

    MainRender.renderToTarget(canvas);
  • Stop canvas render
    MainRender.stop();

Basic Example​


Important Note​

Realtime render was made for my own phone therefore, render width and height ratio is fixed for 250px 575px which is 10 / 23 however, you can change this by some simple edits:
Click to expand...
ggg
 
You must log in or register to reply here.
Top