Create a persistent pop up floating window using JavaScript/HTML/CSS - javascript

I've been looking around, but I can't think of the correct terminology to describe what I want (and hence get the results that I want from searching).
I'm going to be integrating the QuickBlox video chat into an existing web app. I've been asked to display the video window in a type of persistent floating window that will allow the user to continue using the website while they still have the video chat window open and chatting with the person (eg they could be chatting with a trainer, who might ask them to visit a specific page).
Is this type of thing possible with html/js/css? I need this special pop up window to be persistent and stay connected to the video chat.

Related

Communicating two tabs on two devices in javascript using broadcast channel

I need some advice on whether I need to reimplement my project or I can make the current implementation work. I have implemented a user interface to do some wizard of oz testing. I have a user-side page (Page A), which fires up a second page, the wizard page (Page B). When the user asks questions on page A, the question is sent to page B using a broadcast channel, and the answer is received through a broadcast channel. Everything works great on the same computer.
But my problem is that I want to open the wizard page on a second device, so the user doesn't see the wizard is answering the user's question. When I open the wizard page on a second device (my first device is an apple MacBook, and my second device also is an apple MacBook), the communication between the two pages doesn't happen. Both pages are located on the same server and have the same host name.
Is there any way I can make my current implementation work on two devices?
Or should I just re-implement the communication part?
I would very much appreciate any solution or hint.

Force one tab only on web app (e.g. similar to WhatsApp and Google Messenger)

I have a strict requirement to only allow a logged in user to open my web app in one tab. I've noticed that WhatsApp and Google Messenger's web apps have implemented this. For example, trying to open those apps in more than one tab (be it on the same browser, different browser, or even different device) results in these warnings:
Anyone know how this is done? There must be some sort of sync happening between the server and the client to ensure that only one tab is open. But this would require a unique tab identifier, which can get quite complicated to build reliably. Anyone know how WhatsApp and Google Messenger are doing it? Their technique seems to work flawlessly.
I don't know exactly how this is done at WhatsApp and Google Messenger, but if you work with WebSockets (your post hast the tag "websocket", so I assume, you do) every tab has its single connection to the server, and if your users need to be logged in you could check if the user has already a open weboscket connection to your server.

Webhost/webpage - is it possible to keylog users PC or Opened Tab

Say that I am a website developer/host; and someone comes to my page (eg: “my page.com”) and opens a link in my page to another site (eg: “test.com”). This opens in a new tab.
Is there a way for my page to keylog the user as they interact with the other page (or just Keylog their pc for x agreed duration)? (After accepting pop up that says by opening this link you agree to having keystrokes/mouse tracked)
I’m thinking it’s not possible because it’s potentially dangerous (does this fall under cross site scripting?) but my interest case is similar to selenium (browser recording extension), but without the need for an extension. I’m interested in the security around this and better ways to record user interaction with an external page (cookies??). I’m quite new to all this

How can I implement sound for notification like whatsapp?

I'm trying to implement a sound on my appliaction when it receives some updates (like whatsapp web) using Audio Context API (currently using howler.js).
But I have a problem when the user didn't interact or refresh the page:
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page
It works after the user does some gestures, but after refreshing it asks again and doesn't play the audio.
I looked on whatsapp web, and I realized that it's chat sound always works even without interacting and after refreshing the page.
How can I resolve this issue? Is there another way to solve it?
I think you did not notice that WhatsApp does not make a notification sound until you interact with the page, and the same note that appears for you appears on the WhatsApp web page if you receive a notification without interacting with the page (See the last log in image bellow):
Autoplay is only allowed when approved by the user, the site is
activated by the user or media is muted.
Here is the power of the frontend frameworks (Like Angular) that make all website as a single page, as you only need to interact once so that you continue to receive notifications sound even when you change the page.

How to find whether the user is watching our website or not(it should work when switching applications also)?

I am creating a chat application, where I need to send notifications when the user is not watching my website or working in another application.
Now, most of the use cases can be handled using the page visibility API. But there is a particular use case when the user is switching the application from browser to any other application(ex: Outlook), I want to send a notification at that time.
But the issue here is page visibility API does not provide anything on switching applications. That is if the browser active tab has my website and the user switches the application from browser to any other application, it still thinks the user is looking at my website which is wrong because the user is in anther application right now.
I have done R&D on this and I see it is impossible because browsers can't detect these kinds of changes due to security reasons.
But when I checked with Whatsapp web there, javascript is able to find weather user opened the current application or not and based on that they are sending notifications.
So, How can I implement same feature that Whatsapp guys implemented? Is there any web API I am missing here. Are any hacks available to implement this kind feature?
Thanks in advance.

Categories

Resources