Unsupported Browser Error IOS

I’m getting this error message when I try to use jitsi meet on IOS when I try to use chrome or firefox:

I don’t have any unsupported browsers configured

UNSUPPORTED_BROWSERS: [],

Here is the user agent string from chrome on my IOS device:

Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/91.0.4472.80 Mobile/15E148 Safari/604.1

I was able to reproduce the issue in the Brave browser on my desktop by changing the user agent manually:

The user agent string from my phone caused the issue, as do the user agent strings built in to DevTools for IOS Iphone/Ipad Chrome/Firefox.

Is anyone else facing this issue? Perhaps user agent strings have changed and the detection method in jitsi is out of date?

I’m a bit confused: is this on your own self-hosted server or on meet.jit.si?

This is on a self hosted instance.

Here is the version info of my instance:

Does it work when you check on meet.jit.si? If so, this is something peculiar to your deployment as opposed to Jitsi’s detection method being out of date.

It does work on meet.jit.si. Maybe my version is out too out of date? Or are there any settings that I’m missing that control this?

Your Jitsi version is outdated, but I don’t think that’s the issue (unless there’s been some new development I’m unaware of). Sometimes, it’s also the actual phone you’re testing with and the OS version it’s running.

I think it’s probably not the phone since I can reproduce this on my PC. When I use the agent string generated by chrome dev tools for IOS chrome it doesn’t work either. That option in dev tools generates this user agent string:

Mozilla/5.0 (iPhone; CPU iPhone OS 13_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/91.0.4472.124 Mobile/15E148 Safari/604.1

User Agent detection is not a recommended technique for modern web apps. You can use JavaScript window.matchMedia() method to detect a mobile device based on the CSS media query.

if (window.matchMedia("(max-width: 767px)").matches)
{
// The viewport is less than 768 pixels wide
document.write("This is a mobile device.");
}

Another approach would be a responsive media query. You could presume that a mobile phone has a screen size greater than x and less than y.

For example:

@media only screen and (min-width: 320px) and (max-width: 600px) {}

You may also use navigator.userAgentData.mobile .

const isMobile = navigator.userAgentData.mobile;

With that approach you cannot get the versions. There are many aspects here, not only certain feature is it implemented, but also from time to time we need to disable some stuff based on the versions when there are known bugs that affect user experience.