I've created a game using html5 and websockets that is played with both a pc and a mobile device (multiple mobile devices can also be played):
The game has a Stage - The PC or a tablet device.
And several players — Other mobile devices
The current connection between the Stage and Players is with a number (the Stage shows a number and a player can join through that number), however, I'm searching for a way that the Players can join just by being in the same local network as the Stage - meaning auto-discovery through a local network.
I've been searching WebRTC and other p2p solutions but I can't find anything. Is there something else I can use or is it completely impossible?
You can try this cordova-plugin-networkinterface plugin that supports Android, Blackberry 10, iOS and Windows devices.
There's no javascript only way to the local ip address from inside a browser. There do seem to be a good number of cordova/phonegap plugins that purport to do this:
http://plugreg.com/plugin/weconstudio-it/phonegap-plugin-ipaddress
https://github.com/jcesarmobile/my-phonegap-plugins/tree/master/iOS/NetworkInterfacesPlugin
As well as the one pointed out in the comment above. It looks like it's either android or IOS. Someone should write one that works on both!
If it was me. I would probably work with the browser headers on the Stage: REMOTE_ADDR, HTTP_CLIENT_IP, etc. There are some fine points to doing this: http://roshanbh.com.np/2007/12/getting-real-ip-address-in-php.html
On a local network, you'll be able to get the real IP address of each device. Private networks fall into a particular address space:
10.0.0.0 - 10.255.255.255
172.16.0.0 - 172.31.255.255
192.168.0.0 - 192.168.255.255
So your Stage will know when its clients are connecting to it on a LAN. Does that get you where you need to go?
Related
I am testing web blue tooth through
https://whatwebcando.today/bluetooth.html
one of the use cases there is from the browser, it should be able to detect BLE devices and extract the battery service, which should provide a facility to determine battery level of bluetooth connected device,
However during scanning, the site cannot detect my mobile phone, I have read that Web bluetooth only supports BLE
is this compatibility issues? Upon reading i see that Blue tooth 5 of galaxy note9 is supports BLE or am i wrong?
As far as I know, Galaxy Note 9 supports BLE. As per to the documentation, even though the Web Bluetooth API specification is not finalized yet, the Google Chrome team still in progress for the implementation. It is suggested to use the navigator.bluetooth.requestDevice function that takes a mandatory Object that defines filters. These filters are used to return only devices that match some advertised Bluetooth GATT services and/or the device name. From this, you can check if your device is compatible with Web Bluetooth API specification.
Your phone does not advertise BLE packets automatically. You should have an app that starts BLE advertising.
Your Phone needs to simulate a BLE device and send advertisements of the specific service. In this case the batter_service.
You can use the BLE Peripheral Simulater for testing
I have done some research on SO but the similar Q&A are for detecting if it has connection or not, but not about connection type.
The purpose of my website is that, if a user is on mobile(phone or tablet) and on wifi, play a video clip; if a user is on mobile and not on wifi, play a video clip; if a user is not on mobile, then play the video clip.
The reason for the different behavior is to avoid possible surcharges happen to the user due to the relatively larger size of the video clip. That is not related to speed - nowadays speed difference of LTE v.s. wifi maybe only little; it is more for the concern of users getting charged for the data usage without wifi connection.
So my question is, using AngularJS(<2.0),
1) How to detect the device is desktop or mobile
2) How to detect the device is connected to wifi or not
(I guess for Q1, the fallback is to use Bootstrap #media, but it isn't ideal.)
You don't need Angular to do such check.
In order to detect if a device is a desktop or a mobile, use navigator.userAgent, see this answer
In order to detect the connection type, use navigator.connection, see this answer
Be careful, this API support is not universal, see here.
Another way to do it is to try this plugin, which relies on internet speed check, but I have never used it.
Finally, if you REALLY need this info for smartphone users, convert your website on Cordova, then distribute your app.
With respect to finding out whether what device is used, this angular plugin can save some headaches:ngx-device-detector
install it: $ npm install ngx-device-detector --save,
add to the constructor. Then call this.deviceService.IsMobile() forexample to check if device type is mobile. It has other methods for checking if device is tablet or desktop and other methods that return usefull information about the browser.
i encourage devs to use feature detection, not browser or desktop/mobile detection. e.g modernizr has a feature detection for low-bandwidth connections, though it won't work in all browsers:
https://modernizr.com/download#lowbandwidth-setclasses&q=connect
the danger, as it states, is that unknown devices are assumed to be fast.
to get a sense of desktop vs mobile, there's a technique for listening to touch events. c.f.:
What's the best way to detect a 'touch screen' device using JavaScript?
regarding whether you should autoplay a video clip, if it's an HTML5 player, it won't autoplay on mobile anyway, for the reasons you mention, unless it's tied to a touch event (like hitting play).
i have gotten around this by "saving off" a touch event from earlier, like getting to the screen with the video player, and then re-using that event to autoplay. all that said, please consider if auto-play is truly what you want, as a lot of users find it annoying.
Recently we worked on reading a QR code in our website, with manual focus camera in the System browser (Chrome) and the same is tested with Mobile browser (chrome) with mobile camera. We succeed in doing it but, according to the end user feed back its actually taking time to read/scan with manual focus camera and its easy with mobile camera. But as per our requirement we need to implement it on PC browser with manual focus camera.
Is there any way that we can use Mobile device camera to integrate with the PC browser. Currently we are working with few JAVA based mobiles which allow mobile camera to use as web cam. Any help would be appreciated to crack this.
what I have used is cordova has many plugins that can consume using Javascript or if you use angularjs there is a version called ng-cordova.
Cordova https://cordova.apache.org/
Ng-cordova: http://ngcordova.com/
I hope that will help.
You Can Use Mobile Camera With PC Browser But It Is Difficult
Step:
Write An Application To Capture Picture From Phone And Send It To Browser .
Phone And PC Should Be At Same Network And Phone Accessed From Browser with It Local IP address To Get Pictures .
Users Most Install Your Application On They Phones And Set Static IP Adderss For Phones Example 192.168.1.100
In Website You Most Get Picture From 192.168.1.100 And Show It.
So, I am developing this VR website online with JavaScript.
I have a function that instantiates an object in the 3D room, at the given location that the user is "watching".
However, I don't see how I can execute that function when my iPhone is locked away in the VR headset. I have been thinking about volumeup-button on my headset that is connected to it or something, but haven't found anyone that has done that before.
Do you guys have any advice? Could there be a way of connecting a BlueTooth remote to it? Or is it simply impossible?
TLDR; How to execute a function in the browser on your phone, when you can't touch your phone.
It is possible to connect Bluetooth keyboard to iOS devices, as you suggested in your post.
You might also leverage the other sensors in the phone (such as accelerometer, gyroscope, microphone), but I'm not certain if Safari has access to those. You would have more options if you developed a standalone application rather than trying to go through a browser.
I am specifically asking about javascript on a mobile webpage, not an objective-c application. Is there something like Apple Reachability for javascript so I can tell when Edge, 3G or Wifi connection is made or changed?
Not unless browsers start giving this information away through the DOM which, currently, they don't. There is a navigator javascript objects which holds many things but not what you're looking for. I've also read in the news recently that some cellular carrier was adding cookies to HTTP requests made on their phones. They were found to be adding customer IDs to cookies (huge security breach!!).
Mobile Safari does add some new DOM additions but not what you're asking for.
Short of these options, you can't. Layers of the Internet Protocol are meant to encapsulate & hide the details of the bottom layers. You can't detect Edge, 3G or Wifi any more than you can detect cable, DSL or finer optics.
Finally, even if you could get this information, it wouldn't do you any good unless you had details of every single node in your TCP connection. For example, I could have the following setup :
iPad ---WiFi----> iPhone's Hotspot ---3G---> Carrier ---unknown--->>>
Addendum
In 2012-2013, the W3C was fleshing out The Network Information API which was aimed at providing "an interface for web applications to access the underlying connection information of the device". At the time, the API stipulated that an "estimated" bandwidth for the browser would be obtainable via navigator.connection.bandwidth. As of April 2014, that work has since been discontinued!!
Update 1: As of 20th October 2015, work continues on this API. You can find the latest Editor's drafts for the Network Information API on the W3C's github pages.
Update 2: In June 2020, Apple declined to implement the Network Information API in Safari due to privacy concerns
Although you cannot use data from a browser to detect if the user is on Wifi or a cellular connection - capturing the user's IP may be one way to differentiate between a Wifi and Cellular connection.
In this article about how cellular impacts your IP address (http://classroom.synonym.com/wifi-change-ip-17586.html) it states the following:
While on Wi-Fi, your device's public IP will match all other computers on your network, and your router assigns a local IP. While using a cellular connection, your cell carrier assigns a public IP. Connecting to the cellular Internet does not use a router, so your device won't have a local IP.
IF ip = localIp, then connection = wifiConnection
IF ip = publicIp, then connection = cellularConnection
Here's a screenshot of my IP when I'm on cellular:
Here's a screenshot of my IP (right after turning off cellular) on Wifi:
This could be one answer to the problem without browser help.
At the moment this limitation has improved, but there are still restrictions with the Network Information API supported in the different browsers ( mobile or not ), https://caniuse.com/#search=network
If this helps you, In our case as our specific mobile application is hybrid and developed using Ionic, we have been able to do it on either iOs or Android using this cordova plugin: https://github.com/apache/cordova-plugin-network-information that works like a charm.