Can this device make a phone call?
HTML5 mobile · 13 comments · 500 words · read ~259 times.
I want to detect if a web browser is running on a device which is capable of placing a telephone call. Is that possible?
I'm going to go with a cautious "no - not quite". Although there are several proxies which get you part of the way there.
Here's a link to a telephone number "call me!" - the HTML is:
HTML
<a href="tel:+441234815259">call me!</a>
You can use tel: in just the same way you'd use http: or mailto:. It tells the User Agent to open the correct program to deal with a task - either a web-browser, email client, or - in this case - the telephone dialler.
But what happens if the user is on a desktop browser? Or using a tablet computer? Or on their smart TV? Usually an error message about how the device doesn't understand the link.
So, is there a way to use feature detection to only show a tel: to devices which can handle it?
User Agent Sniffing
This practice has been discredited for over a decade. UA Strings tend to lie. And, even when they don't lie, they're not very precise.
You could use this to discover if someone is running Android - but that doesn't tell you if it's a phone, tablet, TV, or VR headset.
NetworkInformation type
The navigator object contains network information. That should tell you if the device is on a 2G/3G/4G/5G connection.
Of course, your tablet also uses those connections. And your phone might be on WiFi.
Other properties
It is possible to detect if a device is multi-touch, has a battery, is a mobile device, can vibrate, etc.
All of which, taken together, might indicate that the device is a phone. But it is far from certain.
A Big Database Of Products
Companies like 51Degrees will sell you access to their database - which includes reporting whether a specific device supports phone calls. As will DeviceAtlas.
There used to be an Open Source database called WURFL - but ScientiaMobile closed down open access to it.
To be fair, 51Degrees have a generous free tier - but it is a little depressing that this sort of feature detection is locked in a proprietary product.
If you have any ideas how to solve this please give me a call!
Slightly disconcertingly, because I didn’t realise the app knew how, clicking on that on my work MacBook prompted me to open in FaceTime, which then asked me if I wanted to make the call.
Impressed that it sensibly asked me for confirmation (once from Chrome, once from FaceTime), but I didn’t realise I could make calls from my laptop 🤯
Even if the device is capable of receiving a call, that doesn’t necessarily mean the person using the device wants a call or can hear one when it arrives - they may be Deaf or in a noisy environment.
Why not just send them a message to ask them - is it ok to call? - if so, is it ok to call on this device?
Or is there some other reason why you want to know?
@edent says:
I'm sorry that I wasn't clear enough. This is to allow the user to place a telephone call. It doesn't allow the web page to call the user.
Thanks, I understand the scenario now
@Edent Detecting phones is a dubious approximation nowadays, eg my Mac can seamlessly make calls via my iPhone from tel links. But I'm struggling to see anything better unless a property gets deliberately exposed for this
@Edent Or I might be on a Mac which will route the call attempt through my iPhone (in theory - I haven't tried), or maybe I've got a SIP setup on my PC. Probably enough different possible setups that it's not possible to figure it out without direct browser support.
@Edent How about this:
the phone number is displayed as plain text2. there is a “Call” button next to it3. clicking that button opens a custom dialog4. the dialog displays the tel: link (<a>) and an explanation that the link might not work
Just like Macs can forward phone call attempts to iPhones, Google Chrome (desktop browser) can do the same to Android phones. And I'm pretty sure there are a multitude of other ways (e.g. SIP software, Skype, using KDE to forward to the phone).
Thus, while reading your post, I kept asking myself: Why do you want/need to detect that? Should you even try? Should you be able to get this answer? And does this answer even matter, given the multitude of environments and user use-cases?
@Edent
I explored this as well for my contacts page. I ultimately opted for WEBRTC which will work for most any browser. Both Webcall https://f-droid.org/en/packages/timur.webcall.callee/ and Nextcloud Talk are free options for providing a link that will call my phone with no additional SW needed on caller's end. WEBRTC is also more secure and private, but it may lack the features of caller ID and voicemail. WebCall | F-Droid - Free and Open Source Android App Repository
@simevidas @Edent My thinking was of a similar line, but with the addition of using the Page Visibility API (https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) as an added heuristic.
If the page is no longer visible after clicking the link then there's a reasonable bet it's gone to a phone app. If it's still visible you've either got something that doesn't handle tel: or has multi-windows. Page Visibility API - Web APIs | MDN
Once you have detected that a device is capable of making a call, how will you detect that its user has sufficient remaining credit?
@Edent I’ve had trouble in the past with Safari on iOS mistaking numbers on a page as dialable when they’re not intended to be, no <a> needed. Maybe phone browsers do some of the lifting for you already?
@Edent It feels like something that should be possible with a CSS @media query. It isn't, but it should be.
More comments on Mastodon.