FiveM Realtime GameView for HTML
Original script made by citizenfx
In-game streaming platform demonstration using utk_render
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>Handling Screenshot Uploads
To handle screenshot upload requests you can use this php code: https://github.com/melihozkara/fivem-php-img-uploader
Functions
Request Screenshot
Takes a screenshot and uploads it to the defined url
-
Async method:
async function takeScreenshot() { let resp = await MainRender.requestScreenshot("www.exampleupload.com", "files[]"); console.log("resp", resp); }
-
Normal method:
MainRender.requestScreenshot("www.exampleupload.com", "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);
To create a functional video call script, you need to look into WebRTC