Develop Reference

Challenge to uniquely identify a computer from any of its browsers

In an HTML5 web app, I'm building a feature that relies on client-to-client communication (with pusher). It's made of PHP on the server-side and Javascript with Vue on the client side.
The typical scenario is: a window popup is opened, and from there it communicates directly with some other windows opened into any another browser on the same computer. Let's say you have 2 browsers installed, you open the web app popup with Firefox and it communicates with its web app sister page you did open previously into Chrome.
The only (half-)way we have found so far is to use the public IP address to build a private channel named with the IP address… It's basic and efficient.
However, if there is more than 1 computer connected to the same router, all of them will share the same public IP, and that's where things become difficult!
A solution could be to add the computer's local IP to the channel name (that was already built with the public IP), but despite a few nice workarounds I found to get this info from an initiated RTC Connection, this looks quite unreliable and often goes against browsers privacy rules…
Obviously, I cannot use session information with PHP on the server-side, nor cookies / local storage on the client-side, as all those solutions are tightly coupled with the browser itself (thank God Chrome won't share its cookies with Firefox on your computer). Those solutions would be perfect (and no need for a pusher) if we were using 1 single browser, but we need to handle multiple browsers on the same machine.
That's where I'm wondering if anyone would have already dealt with this design challenge and shared some tips, it would be awesome! Thanks for reading so far!

You can check the user agent of the browser.
You can check a combination of the request headers coming from different browsers.
You can explicitly throw and catch an error in the user's browser and send it in the request header/body to determine what browser they're using.
You can do canvas drawings to see the user's GPU/CPU information (since you're already using html5 that's a bonus).
You can directly use webgl to do the same with perhaps different metrics (since canvas uses webgl anyways).
You can check their typing speed or even build up a profile of their vocabulary and use of language.
If you ask for permissions you can see all of their connected media devices like headphones, even just asking for audio permissions will show you all of them.
You can benchmark their CPU with things like the time it takes to find primes or encrypt a key.
You can use audio fingerprinting, which is almost as unique as your voice, since each browser and CPU architecture slightly differ in the digital pattern and oscillations created from audio, which can be captured.
You can check their window size and screen size and screen resolution.
There's probably even more I didn't think of now, you can also use any of them in combination to fingerprint a device.
For more information research browser sniffing and digital fingerprinting. What's more is that you can uniquely identify the user across their own browsers on the same computer and also different users from different devices using a combination of browser sniffing/digital fingerprinting.
In your specific case you can't use all the browser sniffing techniques but you can still use some of them, like the user agent since it will still give you the user device information even if they're using a different browser.
The idea with digital fingerprinting is that you want to build up a probability high enough that you can be fairly certain it's the same user, you can't ever be truly sure, but sure enough. Something like screen size doesn't mean much by itself, there's millions of devices using i.e. a size 1600 screen, however consider the following hypothetical example:
User's device has screen size of 1600, that's i.e. ~1/8 users.
User's device took 20ms to encrypt a 4096 key, that's i.e. ~1/8 users.
User's device took 40ms to draw a canvas image, that's i.e. 1/8 users.
Now you already have a 8 * 8 * 8 = 1/512 probability of knowing what user it is and that value goes up way higher very quickly, based on 3 fundamentally unidentifiable things.
However it should be noted that using any browser sniffing or digital finger printing techniques like above fall under privacy regulations (at least in some countries). A lot of things like the user agent is being deprecated and if you do things like this on a site you'll get into trouble with things like GDPR. I believe you can get around that if you explicitly ask the user for their permission and let them know that i.e. their browser is being fingerprinted. However you have to be careful because doing this can get you in trouble if it's malicious, doing things like this without a user's knowledge is unethical.

How should I create "screen sharing" with SignalR

I know this is not a specific question, but I just want to get design ideas about a screen sharing web site with SignalR.
We want to add a link on our website which is called "Share My Screen" and then our support team be able to see the content of the browser (not whole desktop) and even they be able to click or type on customer browser.
I was thinking to do it as
Taking screen shot from browser by js (by http://html2canvas.hertzen.com for example)
send taken screen shot to server constantly (I don't know how yet)
Server sends the received screen shot to our support team browser
Capturing mouse move and key press on support team browser
Sending this captured data to customer browser
Since each part of this needs a lot of work I just want to gather all possible ideas to find a tested solution

First of all, I do not think your idea of capturing screen is really doable with javascript technology. Security would be a huge issue, you would need to process a high amount of data, and syncing events would be a nightmare no matter how you approach it. Capturing and sharing tab content and events is a much more manageable goal.
If you are aiming to use this for people who can not manage to install a remote control app, then we can count newer technologies such as WebRTC out due to browser compatibility issues.
There is a good blog post discussing this issue here - (Screensharing a browser tab in HTML5?).
I especially like the first method, using Mutation Observer (browser support) and Web Sockets (browser support). It basically syncs two html documents through the use of mutation observer and uses web sockets for communication. You could use SignalR instead of standard web socket API for communication if you prefer.

How to initiate a new device pairing using the Chrome web bluetooth API?

Using navigator.bluetooth.requestDevice(), I can access bluetooth devices I've already set up a pair with using native OSX bluetooth pairing, but no previously-unpaired devices appear, even when their attributes match my generic query. Available devices show up in a Chrome modal requesting user consent to pair, but the only device that shows up is the one I've already paired with.
Am I misunderstanding the intended use case here, or is there another way to establish a connection with a nearby (previously unpaired) device from Chrome?
Docs: https://webbluetoothcg.github.io/web-bluetooth/
(See Example 2)
function bluetoothConnect() {
navigator.bluetooth.requestDevice({filters: [{services: ['generic_access']}]})
.then(device => {console.log(`Connected to: ${device.name}`)})
.catch(console.error);
}

First, Mac OS X is not yet fully implemented as we speak. Only discovery and GATT server connect/disconnect are working for now. See the Chrome Implementation status at https://github.com/WebBluetoothCG/web-bluetooth/blob/gh-pages/implementation-status.md. Check out Chrome OS, Linux and Android M (Android Lollipop workaround).
Regarding your specific issue, I believe that generic_access is not broadcasted by a nearby BLE device but is found because you've already paired (cached) this device. If your device is named "foo" for instance, you can go to https://googlechrome.github.io/samples/web-bluetooth/device-info.html and fill "foo" as the Device Name and hit "Get Bluetooth Device Info" button.
I would recommend you give a try to all Web Bluetooth samples at https://googlechrome.github.io/samples/web-bluetooth/index.html as well.

To complement the other answer, please be aware of the Chrome's chrome://bluetooth-internals tab/tool. This tool can not only list available devices and their services (which I don't think you can do with the Web Bluetooth API unless you requested the services in optionalServices or filters/services) and the characteristics of those services.
In the device list, there is a Forget button which becomes active once you connect to the devices GATT server using the Inspect button. This should allow you to full unpair and pair again in cases where you need to test the flow end to end.
Edit: Actually after doing some experimentation around this, the device still remains paired even after using the Forget button. Probably a bug in Chrome, however, the cache of the paired devices seems to be per-profile. This means the real answer is to:
Use the Incognito mode and in there the pairing flow will initiate from the get-go for each new Incognito session.

Detect if monitor is powered on from IE Kiosk mode

I developed a web app to display a slideshow, and want to display it on my secondary monitor (Connected via HDMI) with IE's Kiosk mode on Windows 10. Because of CPU and other resources on the shared server, I want to pause the slideshow when the monitor is powered off. (And therefore nobody is seeing it)
Is there a way to detect connected displays from Internet Explorer? Since this is a one-pc kiosk setup, add-ons, etc. are accepted. Triggering javascript/jquery events would be ideal. Thank you!

No, there is no reliable way to detect if a second monitor is physically switched off but still connected via the cable.
I have to ask though: why do you need to physically switch the second monitor off?
As an alternative could you not:
Have the slideshow stop after a timed duration unless it receives an input?
Have the slideshow only on display at certain times of the day?
Accept events from, say, a node server to control when to and not show the slideshow?
Having said that these threads could provided you, albeit unreliably apparently, what you need:
Is there any way to detect the monitor state in Windows (on or off)?
Monitoring a displays state in python?

You can't do in javascript. Why not try some asp component.
http://msdn.microsoft.com/en-us/library/windows/desktop/dd162617%28v=vs.85%29.aspx

You could potentially write a command line program that sits on a particular port, continuously checks for that locally and then use HTML5 WebSockets in IE to communicate with it?
i.e. C# PowerModeChangedEvent
SystemEvents.PowerModeChanged += new PowerModeChangedEventHandler(
SystemEvents_PowerModeChanged
);

I don't think so....
CPU cycles are paused when the client computer is put into Sleep mode. (win+L)
Start>Control Panel>Power
configures how the monitor(s) behave when the client is powered down or put to sleep mode.
the screen object in js returns the metic values (height/width) of the screen object but not its powered state.
the impact of wasted CPU cycles on a powered down secondary monitor should be un-noticable....
probably you have not selected the option to "Use software rendering instead of GPU rendering" on the Advance tab of internet options....
You will notice that your CPU on your desktop will throttle up and the cooling fan will race if you haven't set the above setting when running graphic intensive web pages or canvas scripts.

Getting mobile device hardware information via javascript

via Javascript you can get a lot of information about your hardware and other components about your system, like shown here
With mobile devices you are not getting that much information. I'n not asking how to find out the mobile device name, that's easy, or even the udid. I want to know, if I can access some device characteristics, like some sort of installed plugins used by the browser, or new developments on this topic.
On this site I discovered, that I can access the battery status, Or with window.navigator.mozVibrate([200]); I can activate the vibrate function. So far both work only on firefox mobile (android).
An interesting information would be about the built in camera, something like how much megapixel does it have, or does it have a flash light? Or what kind of cpu (single-, dual-, or quad-core) is built in?
To sum it up: what hardware information can I get about a mobile device (iOS/Android/Windows Phone) via javascript?
Thanks for any hints!

You may be able to get a limited set of information about the device by using PhoneGap i.e. placing the PhoneGap script on your server and checking the appropriate values if the device is mobile. Check this link: http://docs.phonegap.com/en/2.0.0/cordova_device_device.md.html#Device