• There is NO official Otland's Discord server and NO official Otland's server list. The Otland's Staff does not manage any Discord server or server list. Moderators or administrator of any Discord server or server lists have NO connection to the Otland's Staff. Do not get scammed!

OTClient for Web Browsers

New build for the modular version is up (0a20f03), now the filesystem is case-insensitive.


There's another issue I've just found - if you login the game, and keeps the client open for a longer time while watching other tabs (it disconnects you and client is being stucked - you cannot do anything aslong as you won't refresh the site) - Firefox
Indeed seems to be Firefox related, happens when it's trying to reconnect while the tab is in the background. Could not reproduce on Chrome.

Edit: happened on Chrome.
 
Last edited:
Indeed seems to be Firefox related, happens when it's trying to reconnect while the tab is in the background. Could not reproduce on Chrome.
That has been fixed few days ago - wrote about that on prev topic :p
Any ideas about reworking the client to work with ios system < 18?
 
That has been fixed few days ago - wrote about that on prev topic :p
Yeah, still not fixed on Firefox. It's freezing when it's trying to reconnect while the tab is in the background.
Any ideas about reworking the client to work with ios system < 18?
If the issue is SharedArrayBuffer, nothing can be done as it is required for threading. I will try to borrow an iPhone from someone and debug it to confirm this is the case. Damn Apple and iOS giving me headaches even with hobbie projects...
 
Yeah, still not fixed on Firefox. It's freezing when it's trying to reconnect while the tab is in the background.

If the issue is SharedArrayBuffer, nothing can be done as it is required for threading. I will try to borrow an iPhone from someone and debug it to confirm this is the case. Damn Apple and iOS giving me headaches even with hobbie projects...
The reason is that... Apple sucks

when it comes to the Web client... I don't see a reason why anyone would ever want to play tibia in the browser (there's even been a server out there like 1.5year ago, possibly 2 years ago, with a such feature and literally noone used browser to play, the same case was with rl tibia). If I were capable of coding, I'd rather improve the OTC than make a conversion for a browser...
but! the above is just my opinion.
The truth is that you've done amazing job, congrats! & Thank you for sharing this with our community for free! lots of people wouldn't even bother to think about posting something here without a possibility to earn some money, lol
good luck in further development!
 
New version is up: ec2c4e6.
Now the client will only enforce port 443 if the world port is 7172. This allows you to set your own in charecterlist.lua, example:
LUA:
g_game.loginWorld(G.account, G.password, charInfo.worldName, "game world ip", 444,
                      charInfo.characterName, G.authenticatorToken, G.sessionKey)
 
Last edited:
@Niebieski
So, I was able to debug using a real iPhone. Turns out it's not because of SharedArrayBuffer and instead it's because of Shared Memory. There is a bug in Safari that was solved only in iOS 18. I've tried a few things like limiting the max memory to 1024mb or increasing the initial memory to 512mb, nothing worked. I'm ready to treat this as a no-fix and mark the client as compatible only with iOS 18+.
 
Something fun 👀

Here is something very fun we can do with the web client: PWAs.

I've setup a basic web worker for the demo version. Now users can easily install the client as an app:
1728956828376.webp

But it doesn't end there. We can now create a TWA (Trusted Web Activity), meaning that we can build a small android app that the user will be able to install and launch, without having to navigate to the client URL.

And it gets better! We can use pwabuilder.com to automatically create the app for us, ready to be published. I've done just so:

1728957511658.webp

It gave me all the files necessary to make it work.

And there we have it, a self-updating mobile client that is extremely easy to distribute:
1728957897547.webp

I've attached WebOTClient.zip containing the apk for you to test it yourself. Also, here are the sources of the demo.

And by the way, yes, it's also possible to create an app for other platforms, such as Windows Store and iOS. I've done it before for OT Archive and other projects.
 

Attachments

Last edited:
@Gesior.pl, latest mehah main commits will introduce some incompatibilities with your game data. I have updated the link in my guide to force it to use version ec2c4e6:
Code:
https://webclient.otarchive.com/?gameData=https://downloads-oracle.ots.me/data/MehahWeb860/otclient-otarchive.zip&version=ec2c4e6

Edit: also added a redirect.
 
Last edited:
@Gesior.pl, latest mehah main commits will introduce some incompatibilities with your game data. I have updated the link in my guide to force it to use version ec2c4e6:
Code:
https://webclient.otarchive.com/?gameData=https://downloads-oracle.ots.me/data/MehahWeb860/otclient-otarchive.zip&version=ec2c4e6

Edit: also added a redirect.
Hmm.. I've packed newest data from GitHub - OTArchive/otclient at browser (https://github.com/OTArchive/otclient/tree/browser) into:
Code:
https://webclient.otarchive.com/?gameData=https://downloads-oracle.ots.me/data/MehahWeb860/otclient-otarchive_2024_10_16.zip
but arrows walking throws some errors:
Code:
ERROR: /game_interface/gameinterface.lua:500: attempt to call method 'setNextWalkDir' (a nil value)
webclient.js?v=6:84 ERROR: /game_interface/gameinterface.lua:185: attempt to call method 'setNextWalkDir' (a nil value)
I've left old version of .zip under old URL, so https://webclient.otarchive.com/?gameData=https://downloads-oracle.ots.me/data/MehahWeb860/otclient-otarchive.zip&version=ec2c4e6 works.
 
Hmm.. I've packed newest data from GitHub - OTArchive/otclient at browser (https://github.com/OTArchive/otclient/tree/browser) into:
Code:
https://webclient.otarchive.com/?gameData=https://downloads-oracle.ots.me/data/MehahWeb860/otclient-otarchive_2024_10_16.zip
but arrows walking throws some errors:
Code:
ERROR: /game_interface/gameinterface.lua:500: attempt to call method 'setNextWalkDir' (a nil value)
webclient.js?v=6:84 ERROR: /game_interface/gameinterface.lua:185: attempt to call method 'setNextWalkDir' (a nil value)
I've left old version of .zip under old URL, so https://webclient.otarchive.com/?gameData=https://downloads-oracle.ots.me/data/MehahWeb860/otclient-otarchive.zip&version=ec2c4e6 works.
I will update the default build to the newest soon. In the meantime, manually setting it as 3048c56 should work:
Code:
https://webclient.otarchive.com/?gameData=https://downloads-oracle.ots.me/data/MehahWeb860/otclient-otarchive_2024_10_16.zip&version=3048c56
 
Last edited:
I played a bit with the nginx configuration and managed to do it a bit more simply, using a single "input" port:

NGINX:
server {
  server_name example.com;

  location /login {
    proxy_pass http://localhost:5000;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

  location /game {
    proxy_pass http://localhost:5001;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

  listen [::]:443 ssl; # managed by Certbot
  listen 443 ssl; # managed by Certbot

  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

and further as in the example post, i.e. two screens with the websockify commands:

Bash:
websockify -v 5000 1.2.3.4:7171
websockify -v 5001 1.2.3.4:7172

This way, in the client you can use example.com/login with port 443, and in the response as the server address (or hardcode in the client in Lua) example.com/game, which by default will also connect to port 443.
 
I played a bit with the nginx configuration and managed to do it a bit more simply, using a single "input" port:

NGINX:
server {
  server_name example.com;
  location /login {
    proxy_pass http://localhost:5000;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }
  location /game {
    proxy_pass http://localhost:5001;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
  }

  listen [::]:443 ssl; # managed by Certbot
  listen 443 ssl; # managed by Certbot

  ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # managed by Certbot
  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

and further as in the example post, i.e. two screens with the websockify commands:

Code:
websockify -v 5000 1.2.3.4:7171
websockify -v 5001 1.2.3.4:7172

This way, in the client you can use example.com/login with port 443, and in the response as the server address (or hardcode in the client in Lua) example.com/game, which by default will also connect to port 443.
This is a good way to make it work and have everything behind Cloudflare too, though not recommended with a free plan and medium to large servers.
 
Last edited:
Something Cool :cool:
In the same vein of packaging the client as an apk, we can do it as an exe.

Using Tauri, this time I've done it with a remote URL. With @Gesior.pl's client as an example and loading this link inside the small app:


1729257478374.webp
1729257857710.webp


I've attached the installer for you to try it out.
 

Attachments

So to the Mehah version of OTClient that can be compiled to exe you added browser support and now you have additionally compiled it to another executable?
Exactly! And it self-updates too 👀

But in truth, it's just a glorified shortcut to open the URL inside a compact window.
 
It actually makes sense. The only way to play the client can be the browser engine. Meh this directx and etc support for windows. :)
 
This gives me a great idea for those working on bot detection. @kor, you could create a system that flags potential botters and records their cam activity. For an admin, it would be easy to log in and review all the flagged players, allowing them to watch the recorded cam footage directly through the browser?
 
@iNux

As for the cam system - I already have one and I've already shared it - Feature - Cam system (https://otland.net/threads/285399/)

As for the players watching such videos - why should they have access to it? So they know what they did wrong, change it and continue using the bot?

As for the bot detection system - why are you tagging me here?
 
@iNux

As for the cam system - I already have one and I've already shared it - Feature - Cam system (https://otland.net/threads/285399/)

As for the players watching such videos - why should they have access to it? So they know what they did wrong, change it and continue using the bot?

As for the bot detection system - why are you tagging me here?


I may be mistaken, but I believed you worked with clients and that this might interest you. The purpose is not for players to watch their cams directly through the browser, but for an admin to monitor flagged cams directly in his or her browser instead of downloading cams, but perhaps there are better ways.

I apologize for tagging you; I thought you might find this relevant
 
Back
Top