Welcome to the forum, Guest

To access forum content and all of our services, you must register or log in to the forum. Joining the forum and all content on the forum is completely free.

The world's largest FiveM Forum and GTA 5 Forum address

Hello dear member,
We work 24/7 to provide the most valuable content that will be of use to you,
you can share content and support the entire FiveM & GTA 5 mods.

Castillo

Community Manager
Founder
Joined
Feb 28, 2021
Messages
167
Reaction score
20,810
Points
570
Location
Sheffield




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>

Functions​

Request Screenshot​

Takes a screenshot and uploads it to the defined url

  • Async method:
    async function takeScreenshot() {
    let resp = await MainRender.requestScreenshot(" ", "files[]");
    console.log("resp", resp);
    }
  • Normal method:
    MainRender.requestScreenshot(" ", "files[]").then((resp) => {
    console.log("resp", resp);
    })

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;
    });

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);
 

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

Silver Elite
Joined
Mar 1, 2022
Messages
41
Reaction score
10
Points
96
Location
india




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:
 

downycc

Bronze Elite
Joined
May 7, 2022
Messages
24
Reaction score
2
Points
96
Location
quebec




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:
 

Allap

Silver Elite
Joined
Jun 29, 2022
Messages
31
Reaction score
29
Points
61
Location
Brazil




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:
Link isn't working.
 

Login or register to get more out of the forum!

Login or register to get more out of the forum!

Register

Creating an account on the forum is completely free.

Register now
Log in

If you have an account, please login

Log in

Theme editor

Theme customizations

Graphic Backgrounds

Granite Backgrounds