Search the Community

Showing results for tags 'CEF'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • RAGE Multiplayer
    • Announcements
    • Discussion
    • Suggestions
  • Scripting
    • Scripting
    • Resources
  • Community
    • Support
    • Servers
    • Media Gallery
  • Non-English
    • Русский - Russian
    • Français - French
    • Deutsch - German
    • Espanol - Spanish
    • Română - Romanian
    • Portuguesa - Portuguese
    • Polski - Polish

Categories

  • Scripts
  • Gamemodes
  • Libraries
  • Plugins
  • Maps
  • Tools

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Facebook


Youtube


Skype


Web


VK

Found 9 results

  1. Tellarion

    Voice Chat

    Version 1.0.0

    380 downloads

    Hi, my realization voice chat on cef in the RAGE:MP Voice working by distance position (noice control), activation F8 (push and talk) Installing 1. Read all .js comments and put code in your gamemode 2. Prepare security Web Server and start peer js server, generate crt files and put with server in one folder 3. Change all urls my web project on yours For peerjs server, use next package install: npm install fs peer P.s, i dont know would be new version that scripts, but if you want himself update and i can upload its here Date Build: 22 feb 2018
  2. Introduction Hello, So I have decided I should make this tutorial about how to use CEF alongside RAGEMP to make interactable UI because I have spent some time understanding it from examples without a clear tutorial, I am going to explain how to interact between the CEF browsers and RAGEMP client, and how to send/receive information from and to server. This tutorial is targeting new comers in RAGEMP but who have background in scripting and know how to run and connect their server locally. So the main points will be: 1-What is CEF 2-Sending information from CEF to RAGEMP client (and vice versa) 3-Sending information from RAGEMP to The Server (and vice versa) (I will be using C# Bridge API for working with the serverside scripting) Before we start you are going to need the following to better understand the tutorial: Basic knowledge in HTML, CSS and JavaScript (Optional – Nice to have) Bootstrap and JQuery Let’s start! What is CEF CEF is abbreviation to Chromium Embedded Framework an open source framework that allow the ability to embed HTML webpages into applications. RAGEMP already integrates the CEF so you don’t have to download anything externally to begin using it. CEF and RAGEMP Client So now we are going to learn how to create a browser inside the RAGEMP client and interact with it. I am going to teach by giving example, it is going to be a basic login/register system. First download or or create your own webpage design, If you don't know how to create a webpage just use my sample (Attached to this thread) and follow the tutorial. Start by going to RAGEMP/server-files/client_packages folder and create a new folder name it “Login” then inside the Login folder we’ve just created place the HTML,CSS and JS files that is related to the webpage inside and then create the (clientside) script we will call it “Main.js” that will be the main connecting point between the CEF browser, client and the server. NOTE: In the Login folder you are going to place the webpage files and all dependences such as Bootstrap or JQuery libraries. So to this point you should’ve something similar to this Dependences folder contains the minified JQuery and Bootstrap libraries, Links below: https://getbootstrap.com/docs/3.3/getting-started/ https://code.jquery.com/jquery-3.3.1.min.js/ So I have pre-made this simple page for the sake of this tutorial, I will link download to all of the files that I have used at the bottom of this thread. But you can go with any page design you like. Disclaimer: I am new to web development so it may not look that good but it does the job. Now we need to interact with this page, Inside the Login.html (assuming you already have made/imported a page) find the main components that you want to interact with and give them the ‘id’ attribute, in my case I need the buttons and text input elements, image below for more understanding Also notice how we referenced the “Login.js” script. We are going to use these inside our “Login.js” file, so Open the Login.js file and write the following: (Code is written using JQuery) $('#loginButton').click(() => { mp.trigger('loginInformationToServer', $('#loginUsernameText').val(), $('#loginPasswordText').val()); }); $('#registerButton').click(() => { mp.trigger('registerInformationToServer', $('#registerUsernameText').val(), $('#registerPasswordText').val()); }); So what this basically does is once the loginButton/registerButton is clicked is going to trigger (mp.trigger) an event with the given name and pass the values inside the text fields as arguments, that later we are going to catch that in our “Main.js” script. (This point is where we send information from CEF Browser to RAGEMP Client). Now that we have send the information and they are waiting to be caught, But before we do that we are going to show the browser window when a player connect to our server. Open “Main.js” and use mp.browsers.new(‘package://path’); In our case: we have the html page inside our Login folder. var loginBrowser = mp.browsers.new('package://Login/Login.html'); Now at this point when the player connects to our server this will show him our page that we’ve just made, it is still not functional yet until we catch the information that we’ve sent before. Let’s catch them now, inside the “Main.js” add the following: mp.events.add('loginInformationToServer', (username, password) => { mp.events.callRemote('OnPlayerLoginAttempt', username, password); }); mp.events.add('registerInformationToServer', (username, password) => { mp.events.callRemote('OnPlayerRegisterAttempt', username, password); }); I am not going to go into much details here on the syntax but what we are doing is catching the 'loginInformationToServer' and 'registerInformationToServer' events (like you’d do in any other client event in ragemp) and sending them directly to the server to verify the information passed. But before we forget go back to the client_packages folder and create or open the file ‘index.js’ and place require('./Login/Main.js'); to let the server know that this file contains JavaScript codes that related to RAGEMP client (mp.events.add, mp.events.callRemote and mp.browsers.new), a complete list found on ragemp wiki https://wiki.rage.mp/index.php?title=Client-side_functions RAGEMP Client and RAGEMP Server Now that we have sent the information from the CEF client to the RAGEMP client, and then to the RAGEMP server via (mp.events.callRemote) we didn’t catch the event on the server yet, so let’s go ahead and do that. It can be done in same ways but different syntax depending on which programming language you are using, I am going to be using C# because I am more familiar with but it can be easily done with JS serverside once you are familiar with scripting in it. So go ahead and inside any resource file that you are using type the following: [RemoteEvent("OnPlayerLoginAttempt")] public void OnPlayerLoginAttempt(Client player, string username, string password) { NAPI.Util.ConsoleOutput($"[Login Attempt] Username {username} | Password: {password}"); if(username == "Max" && password == "123") { player.TriggerEvent("LoginResult", 1); } else player.TriggerEvent("LoginResult", 0); } So The above code catch the event that is triggered when player sends the information to the server so we validate them then send back a response to the client with either success or fail depending on the player data, in ideal case we should check the information from a database but that’s out of the scope for this tutorial so I am just checking if his username is Max and password is 123 then we send information back to the client with result 1 (success) else we send the result of 0 (incorrect username/password) Same thing apply for the register event handle. Now you can notice a pattern here is that whenever we send an event from one place to another we need to catch it, so back to the “Main.js” and let’s handle the response sent from the server, Add the following: mp.events.add('LoginResult', (result) => { if (result == 1) { //Success we destroy the loginBrowser as we don't need it anymore loginBrowser.destroy(); mp.gui.cursor.show(false, false); mp.gui.chat.push("You have successfully logged in."); } else { //Failed we just send a message to the player saying he provided incorrect info //Here you can be creative and handle it visually in your webpage by using the (browser).execute or loginBrowser.execute in our case to execute a js code in your webpage mp.gui.chat.push('Incorrect password or username.'); } }); Similar to what we did when we caught function from CEF we did for catching from server and we checked if the value passed is 1 then the player succeeds in logging in else he fails. Now you can just run your server and connect with your client and you should see the login page appear, enter anything and hit login - it should message Then try using the combinations of Max and 123 and you should see and the window should disappear. Same practice apply to the register I will leave it for you to practice and try to implement that by yourself! Good luck! Summary Important things to remember: - From CEF browser to RAGEMP client => mp.trigger caught by mp.events.add - From RAGEMP client to RAGEMP server (C#) => mp.events.callRemote caught by [RemoteEvent()] flag and a function Now the other way around: - From RAGEMP server (C#) to RAGEMP client => (Client).TriggerEvent caught by mp.events.add - From RAGEMP client to CEF browser => (Browser).execute For more information about the syntax for these you can check the ragemp wiki NOTE: Sometimes you don’t need to send anything to the server, For example a browser that contains information about your server, you just need to contact between CEF and RAGEMP client. NOTE: Similarly if you want to use JavaScript for serverside scripting you can find the equivalent to my functions used and do the same, however everything done in clientside scripts (Main.js) should remain the same for both languages!! The End And here you’ve just completed the tutorial! Thanks for taking your time to read and if you have faced any problems or any question post a comment below and I will do my best to answer it. Also feel free to correct me if there is any suggestions or any syntax/logical errors. Happy coding! Files used in this tutorial: https://www.solidfiles.com/v/nYR8xn43j57jv
  3. Kapricioza

    Play custom music using CEF

    Hello, I'm trying to play custom music in game using CEF, but It only works when audio is very short (less then 10s). I'm using .ogg format and this code: function playAudio() { let myAudio = new Audio("sampel.ogg"); myAudio.play(); myAudio.volume = 0.1; } Is there any limit to using custom songs?
  4. Kasimir

    Console

    Version 0.3.0

    343 downloads

    To access the console press F11 ingame. Motivation RAGE console is designed to be a simple and universal logging library with support for client-side, including CEF and server-side. The server-side currently logs all the logs into separate daily files. Installation Installation is extremely simple Copy "packages" folder inside your server "packages" folder, except config.json if you have edited it Copy "client_packages" folder inside your "client_packages" folder Edit your "client_packages" -> index.js to include the rage-console with: require('_rage-console'); (remember to paste this on line 1) Config The config exists inside your 'packages/_rage-console/config.json'. You can freely edit these, if no data is provided it will default to default settings. These options are accepted by the config: zippedArchive: A boolean to define whether or not to gzip archived log files. (default 'false') name: Filename to be used to log to. This filename can include the date placeholder which will include the formatted. (default: 'YYYY-MM-DD') maxSize: Maximum size of the file after which it will rotate. This can be a number of bytes, or units of kb, mb, and gb. If using the units, add 'k', 'm', or 'g' as the suffix. The units need to directly follow the number. (default: '30m') maxFiles: Maximum number of logs to keep. If not set, no logs will be removed. This can be a number of files or number of days. If using days, add 'd' as the suffix. (default: '30d') { "logs": { "name": "YYYY-MM-DD", "maxSize": '30m', "maxFiles": '30d', "zippedArchive": false } } Upgrading Upgrading is extremely simple Copy "packages" folder inside your server "packages" folder Copy "client_packages" folder inside your "client_packages" folder Usage Can be used on server-side or client-side. You do not need to require the file as these are available globally. Writes an info log to the console. console.log('Hey! Log something?'); Writes an info log to the console. console.info('Hey! Log something?'); Writes an warning log to the console. console.warn('Hey! Log something?'); Writes an error log to the console. console.error('Hey! Log something?'); Usage with CEF (Browser) To use with CEF you need to add the following line to your HTML <head> element, put this to the top of all your script files. <script src="package://_rage-console/CEF/debugger.js" crossorigin="anonymous"></script> Build in commands help — provides all the commands available clear — clears all the logs API Enable or disable access to console [client-side] terminal.active = true/false; Add command handler [client-side] terminal.commands.add('pos', { description: 'Gets the position of the player' }, function(...arguments) { return ` X: ${user.position.x.toFixed(2)}, Y: ${user.position.y.toFixed(2)}, Z: ${user.position.z.toFixed(2)} - R: ${user.getHeading(true).toFixed(2)}`; }); Todo Add options to disable and enable server-side log files Add options to custom style the console, mainly due to accessibility Run proper tests and clean the logic Add ability to see which file the log is coming from Add ability to be used with C bridge Bugs/Feedback Bugs should be reported currently in RAGE Discord channel to the username @Porn on private message, I appreciate any bugs being reported. If you have a feature request please do the same as mentioned above. This is currently in BETA and some stuff is still unpolished.
  5. MrPancakers

    How to Enable CEF Debugging

    Inside your server folder, open config.json and add the following line "allow-cef-debugging": true Now head to your registry (Windows Key + R ) and type regedit and hit enter. Head to the following path: Once you're there, right click and Go New > String Value and put "launch.cefPort" as the name and Hit Enter, then right click and hit Modify and set the data to the port you'd like to use (9222 for example) and it should look the same as below Now head to your browser using the following: http://localhost:9222/ or whatever port you had entered to enable it. You'll need to quit Rage and open it back up if you enabled this while in game, and make sure you restart your server when you change the setting. Credits to @kemperrr as I used his post on Discord to make this up.
  6. Angel

    CEF local storage

    Good morning, Just playing around with the window.localStorage to try to save some basic settings (default skin, vehicle colour). This seems to be working, but the data is lost when restarting the game. Turns out that if a CachePath (in CefSettings) is not provided to CEF, it runs in incognito mode. So my suggestion is that there is an option to enable a persistent cache. This would allow the server creators to pass off storage of non critical data (skins, colours, etc) to the client. The more that can be distributed to the client, the less that needs to be stored on the server.
  7. Один из способов работы с UI клиента, с помощью CEF(HTML), на примере модального окна со списком игроков(ник, ip, ping) Дабы не использовать хостинг, развернем веб-сервер прямо в игровом сервере. Начнём. Создаем в каталоге 'packages/keker' папку 'ui' (в ней будут лежать клиентские файлы) и файл 'web.js', и объявляем его в 'packages/keker/index.js' добавив туда строку: require('./web'); В 'web.js' вставляем этот код: const http = require('http'); const fs = require('fs'); const path = require('path'); const url = require('url'); const mimeType = { // mime типы по расширениям файлов '.ico': 'image/x-icon', '.html': 'text/html', '.js': 'text/javascript', '.json': 'application/json', '.css': 'text/css', '.png': 'image/png', '.jpg': 'image/jpeg', '.wav': 'audio/wav', '.mp3': 'audio/mpeg', '.svg': 'image/svg+xml', '.pdf': 'application/pdf', '.doc': 'application/msword', '.eot': 'appliaction/vnd.ms-fontobject', '.ttf': 'aplication/font-sfnt' }; http.createServer(function (req, res) { res.setHeader('Access-Control-Allow-Origin', '*'); // разрешаем кросс-деменые запросы let parsedUrl = url.parse(req.url); // отсекаем от url все лишнее let filePath = __dirname+'/ui' + parsedUrl.pathname; // Парсим url в путь к файлу let ext = path.extname(filePath); // получаем расширение файла if(req.url=="/api/players_list.json"){ // отдельная ссылка для генерации JSON списка игроков let pl = { online: mp.players.length, slots: mp.players.size, players: [] } mp.players.forEach(player => { pl.players.push({ name: player.name, ip: player.ip, ping: player.ping }); }); res.writeHead(200, { 'Content-Type': mimeType['.json'] }); res.end(JSON.stringify(pl), 'utf-8'); } else { fs.readFile(filePath, function(error, content) { if (error) { if(error.code == 'ENOENT'){ // если файл отсутсвует res.writeHead(404, { 'Content-Type': 'text/plain' }); res.end('404 Not Found'); } else { // другие ошибки res.writeHead(500); res.end('Error: '+error.code+' ..\n'); } } else { res.writeHead(200, { 'Content-Type': mimeType[ext] || 'text/plain' }); res.end(content, 'utf-8'); } }); } }).listen(8080); // вешаем наш веб сервер на свободный порт, у меня это 8080 Он создает веб-сервер для выдачи статики из нашей папки 'ui'. В папку 'ui' добавляем наш HTML и CSS и JS файлы, HTML и CSS комментировать не буду, тут у всех на свой вкус players_list.html: <div class="p-list"> <p>Игроков онлайн: 0/100</p> <table id="pl-table" border="0" cellpadding="5"> <tr> <th>Имя:</th> <th>IP:</th> <th>Ping:</th> </tr> <tr><td>Nick</td><td>0.0.0.0</td><td>0</td></tr> </table> </div> main.css: .p-list { cursor: none; position: absolute; top: 20%; left: 20%; width: 60%; height: 60%; background: rgba(96,125,139,0.8); text-align: center; align-content: center; color: #eee; font-size: 18px; overflow-y: scroll; border: 1px solid #eee; border-radius: 5px; display: none; } .p-list p { padding: 8px 0px; } .p-list table { width: 100%; color: #eee; } .p-list tr { text-align: center; } .p-list td { border-top: 1px solid #eee; width: 30%; } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; } ::-webkit-scrollbar-thumb { background: #37474F; border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } Туда же добавим и JS файл который будет отвечать за функционал. JQuery у нас уже подключен, его можно спокойно использовать. main.js: const addr = "http://127.0.0.1:8080/"; // Здесь обязательно задаем адресс вашего сервера и порт на котором висит веб var pl_enable = false; // флаг проверки открыто/скрыто окно со списком игроков var css_el = document.createElement("link"); // создаем элемент подключающий css css_el.rel = "stylesheet"; css_el.href = addr+"main.css"; $("head").append(css_el);// подключаем его в head $.get( addr+"players_list.html", function( data ) { // загружаем HTML нашего модального окна $("body").append( data ); // вставляем его в body }); $("body").keydown(function( e ) { // событие нажания на кнопку if(e.which == 9){ // 9 KeyCode кнопки TAB if(pl_enable){ // если модальное окно открыто скрываем его pl_enable = false; $('.p-list').hide(); } else { pl_enable = true; $.getJSON( addr+"api/players_list.json", function( data ) { // получаем список игроков $(".p-list p").html("<b>Игроков онлайн: "+data.online+"/"+data.slots+"</b>"); // кол-во онлайна let str = "<tr><th>Ник:</th><th>IP:</th><th>Ping:</th></tr>"; for(let i = 0; i < data.players.length; i++){ str += "<tr><td>"+data.players[i].name+"</td><td>"+data.players[i].ip+"</td><td>"+data.players[i].ping+"</td>"; } $("#pl-table").html(str); // запихиваем список в модальное окно }); $('.p-list').show(); // делаем его видимым } mp.invoke("focus", pl_enable); // отключаем игровой процесс делаем видимым курсор (он лагучий и находится под меню) //курсор можно накатать свой но нам это пока не надо } }); Теперь нужно отослать наш скрипт на исполнение игроку, я это сделал в 'common.js' на событие о подключении игрока: player.outputChatBox("<script src='http://127.0.0.1:8080/main.js'></script>"); // указываем ваш адрес сервера и веб порт /*кавычки только так, снаружи двойные внутри одинарные, по другому не сработало, если у вас обьем кода больше не забывайте экранировать кавычки */ Ну вот и все, теперь при нажатии на TAB в игре, должно открыться модальное окно со списком игроков. Так же в папку 'ui' можно полностью перенести стандартное меню и изменять уже его, переход на него будет выполнятся так: player.outputChatBox("<script>document.location.href = 'http://127.0.0.1:8080/index.html';</script>"); // не забываем подставить свой адрес и порт Так же в клиентских скриптах можно использовать этот метод для отправки команд на сервер: mp.invoke("command", "команда агрумент1 агрумент2 ..."); Веб-сервер выдает большинство mime типов так что можно подключать всякие фреймворки типа Bootstrap, Angular, React и прочие плюшки.
  8. radmir745

    Как закрыть CEF

    Как закрыть CEF?
  9. Приветствую всех! Возник у меня такой вопрос. Что такое CEF и для чего его используют, или будут использовать при создании серверов на RAGE-MP? Буду благодарен за ответ!