How should I create "screen sharing" with SignalR - javascript

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.

Related

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.

Create an extension to the browser to acces local scanner

I would like to access a special hardware (a penta scanner, for the wisest ;) ) from a web page.
The aim is to retrieve the information from the scanner and compute it on server side.
The problem here, is that I have to summon functions from a DLL that has to be on the client side. I have two leads for that:
Develop a COM DLL and use ActiveX
Try to get through a homemade extension for a web browser in order to communicate with the local DLLs.
I've tried the first option, and I got stuck and I've posted another thread about it. Anyway, even if it works, there are too many constraints about it (as to use IE or the fact that even Microsoft is not fond of this feature and banned it from edge).
The second method is something that I found on another forum but, I do not understand how I can interact with a browser extension (whatever the browser).
So what I am asking is:
Is it possible to use a web browser extension as a medium to a local DLL and if so, would you be so kind as to give a hint about how to do ar anything that might look like a start about how to do it (even just some key words to use on google, since mine didn't get anything)....
Thanks.
Based on my understanding, the motive to develop an Extensions is to enhance the feature and functionality for particular web browser.
You cannot control any hardware devices like printer or scanner with it.
So if your goal is to control the scanner from your web page with the help of any kind of extension than I think you cannot do this with Extension.

Signal Strength of Bluetooth devices using Web-Bluetooth

I am looking to obtain the bluetooth strength (RSSI or similar) of a signal using a web-based application (in this case attempting with the Web-Bluetooth API). From what I've seen this feature is not supported in a browser (yet at least).
The result was intended to be used on a mobile device rather than a desktop but if there is a solution for either I am unaware at the current minute. Since I cannot see much on the matter of it other than it working within downloaded/compiled mobile apps (which I guess I will have to resort to if this is completely unachievable).
This would also apply to if HTML5 p2p connection strength if that was an obtainable value as well.
Maybe I have completely missed something out and my googling skills are terrible, otherwise any relevant links / information is appreciated :)
I recently implemented the watchAdvertisements() API that will enable the page to listen for advertisement packets from the device. When a packet is received, an advertisementreceived Event is fired on the device, and the Event contains the RSSI and TX Power of the device. You can give this API a try by enabling chrome://flags/#enable-experimental-web-platform-features in Chrome 85.0.4165 or higher.

Web Notification API - website doesn't need to be open?

I noticed some news sites such as Washington Post are able to pop up Web Notifications even though I don't have the site open in a tab. I don't recall this being possible before. How is it even possible for a website to execute the JS necessary if the site isn't open? How does one accomplish this using Web Notifications, is there a particular setting to accomplish this?
I believe they are using Push Notifications via Service Workers.
You can check the current support status to see if it's fit for you. It's well supported in modern browsers (although perhaps not the full specification).
A service worker is a script that your browser runs in the background,
separate from a web page, opening the door to features that don't need
a web page or user interaction. Today, they already include features
like push notifications and background sync.
and
A service worker has a lifecycle that is completely separate from your
web page.

offline, cross-tab communication (javascript-only)

Is it possible to find foreign instances of certain website? Ofc theese are independently opened tabs (not by window.open). I need to prevent user from opening 2 tabs, and send message to previously opened tab to inform that it's impossible to open 2 tabs. 2 Intependent tabs may break page offline storage and webSQL structure, so that I can't allow people to use 2 tabs. It's also semi-offline app so it needs to be client-side solution.
You can communicate across tabs using localStorage. Every time you write a value, a "storage" event is fired on the window object on every tab (except the current one).
http://diveintohtml5.info/storage.html
Scroll down to "Tracking changes in the html5 storage area"
The event will include event.key, event.newValue, event.oldValue.
This only works in modern browsers.
In 2021, you can use service worker:
https://github.com/gyteng/service-worker-event
notice: service worker only works in https protocol
localStorage can be used to track windows. You should take into account a situation when window crashes - it will leave the garbage in localStorage.
Accessing a common resource from several windows simultaneously may be done by mutex based on localStorage.
I've recently published the interwindow communication library (all features are described in readme). It provides thread-safe data sharing, cross-window locks and event broadcasting. It also solves some IE issues.
Broadcast Channel is design for this
https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
but the native api only support modern browsers.
there is a npm package support all old browsers as well
https://www.npmjs.com/package/broadcast-channel
You don't have control over that. The user can do basically whatever he/she wants on the computer.

Categories

Resources