utk_render's Introduction

FiveM Realtime GameView for HTML

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

utk_render's People

Contributors

Stargazers

Watchers

utk_render's Issues

Screenshot is completely transparent

Now, I'm not certain if this is an issue on my end or not, but the screenshots this resource takes are uploaded as correctly-sized transparent images.

I have not modified utk_render in any way, and have no (visible) errors on client, server, or PHP (upload) side.

Unfortunately, the documentation on the resource isn't fantastic yet - it seems limited usage is the cause?

I'm happy to try to further troubleshoot or contribute at author discretion.

I'll keep this issue updated if I make any headway.

script error

Trying to use this in place of screenshot-basic but get this error when using your screenshot code from the main page.

MainRender.requestScreenshot("www.exampleupload.com", "files[]").then((resp) => {
    console.log("resp", resp);
})

code in the script

				MainRender.requestScreenshot(Config.TakeScreenshot, "files[]").then((resp) => {
				console.log("resp", resp);
				})

utkuali / utk_render Goto Github PK