How can I manage video conferencing "allow" requirements from browsers? - javascript

I have a rails app with JS and am using TokBox api for peer to peer video conferencing. When a user first signs into the video conferencing they are prompted by the web browser by the following prompt
"COULD NOT ADD IMAGE DUE TO REPUTATION" - The first prompt is at the top of the browser and says "example.com wants to use your camera and microphone allow--deny"
That only happens the first time they visit the site. They are then prompted by the next allow request. This second allow request happens every connection while the first prompt is only for the first connection.
"COULD NOT ADD IMAGE DUE TO REPUTATION" - The second prompt is at the space where the users own video will be viewed and says "camera nad micrphone access, example.com is requesting to access your camera and microphone. If you click allow, you may be recorded"
How can I tell if the user allows or declines either of the prompts? I would like to walk my user through the prompts but am having trouble identifying if they click allow or decline and am having trouble knowing if the first prompt is triggered or not (unless I just track their site visits).
Thanks!
PS any help with reputation would be much appreciated, the pictures make the question much clearer.

You can add event listeners to Publisher object to listen to accessAllowed/Denied events that will be fired when the user clicks on allow or deny: http://tokbox.com/opentok/libraries/client/js/reference/Publisher.html#events

Related

How to set the microphone ask(default) for all the time in getUserMedia()?

I'm working on a project which is kind of speech-to-text. It has only a microphone option. Whatever you speak, it reads the input and shows you the converted text in the text area.
What I want is whenever I click on the stop button, it should turn off the permission allow to ask(default). Because it will only ask for the first time in https. So, how can we make it ask for permission all the time?
In HTTP it will ask all the time. Likewise, I want the same for https as well.
Please help.
I'm tired searching that piece of code which could do the job.
Thanks in advance.
Edited
navigator.permissions.query({name:'microphone'}).then(function(result){
if(result.state=="granted"){
result.state="prompt"
}
});
Can I manipulate the permission states of browser like changing from granted to prompt?
navigator.permissions.revoke('microphone') might work. But, unfortunately the revoke() method is deprecated.
So, you would be wise not to rely on this requirement in your app.
On iOS Safari, it does ask every time.
Normally, this is not your job. This is controlled by client setting. When user starting the app(web app also), system will check the permission for camera/microphone/contact etc. User will decide if ask him to grant every time. For yours, if running in browser, system will check the browser permission, NOT YOUR WEB APP. If other web require the microphone permission first, when starting your app, normally no need to ask again. Also, your app revoke the microphone will disable other web app also. It is not correct!

Ways to notify/alert the user in Firefox's WebExtensions

I'm developing cross-browser extension using WebExtensions API. It's focused on monitoring some HTTP request and blocking potentially malicious ones. I need to get user input for each blocked host (because it could have been falsely blocked and user might want to unblock it right away). Originally I wanted to use popup, but then I found out, that popups are only allowed to be thrown up in User Action event handler, which is a problem, I need to to that independently on the user's action. After that I found second option - the Chrome's notification API. But again, found out, that Firefox does not implement buttons in notifitacions (even though Chrome does). OnClicked event is supported for notification, but that's not enough (mainly because of users accidentally clicking on the notification to close it).
TL;DR - Looking for a way to alert/notify user and get the input from him by clicking on one of two presented buttons. Popups and Notifications does not seem like sufficient way.
Can you suggest ways to implement desired behaviour?
Possible solutions:
1) Injecting content script that implements popup window and communicates via messages with bacgkround script.
2) Simulating animation of extension's icon to draw user's attention.

How to remove and then re-add a twilio video-track playing in a div?

I am using the twilio video chat api to make a video calling app. I want to allow users to manually enable and disable video from other participants in the room without disabling the audio during low bandwidth scenarios, using a toggle button. To do this I think I need to get hold of the track playing in a particular div and then use track.detach. How can I get the twilio track from its container div?
After I remove it, how can I add it back when(if) the bandwidth improves?
Twilio developer evangelist here.
Currently with the Video SDK you can't unsubscribe from tracks, all tracks are sent to each member in the conversation. So, while you can detach a track from the DOM and stop showing it, the media will still be sent to the browser.
You could get the sending client to use smaller constraints to send the videos and we do have bandwidth controls in the SDK on the roadmap, so more control is coming.

How to develop live chat using node js

I want to develop live chat using node js. Can anyone guide me how to do this? The use cases I decided :
User will see a link or icon on the app screen labeled ‘Online chat support’.
Clicking on this, chat window will open up. Either it will indicate the name of an agent who is online and ready, or it will indicate that agents are busy, and change that status once an agent is available.
On the agent’s side, upto 3 windows (from 3 users) will be opened up before the busy message is generated for further users. This number (3) will be configurable.
The agent will get the name of the screen the user is pinging him from.
Since there will be multiple agents, we need ability to tag a bunch of screens (or apps) to a particular agent.
A load distribution mechanism is required whereby a new query gets routed to any agent who is free, and tagged to that screen or app.
"We need ability to set up an unavailable message for certain time windows –
if chat support is only available say between 9 Am and 6 PM IST, we should be able to set up a message for users who log in outside this window that says ‘Online chat support is only available between….”"
Please advise how to proceed.
You can use socket.io module for creating live chat.
Check this tutorial.

how to find particular site is already open or not in the browser?

I have sent Email to My client with some links.. (http://example.com?id=1234).
When the User click this link, It will open a new tab and play same Video's using iFrame.
if the site is already open, no need to open a new window, and just launch the video on the already open window.
if the site is not yet open, then open a window with the site and play.
How can i find the site (http://example.com) already opened or not?
Is there option in JavaScript?
There is no way to run any client side code in an HTML formatted email. So this is impossible.
The closest you could come would be to:
use some kind of token to identify a user (e.g. stored in a cookie)
run some heart beat code to see if they are still on the page (e.g. use XMLHttpRequest to request a 1 byte file every 15 seconds using a page id generated when the page was loaded and the user id in the cookie)
check on the server to see if a heart beat from a different page was received recently when a new copy of the page is loaded
serve different content if it is
For security reasons this is not possible directly in JavaScript.
But you can work around and add a marker in the URL then detect server side if the site is already streaming the video to that computer (match with URL marker, IP and browser).
Upon response the server can say close or not...

Categories