Hello I am expecting some kind of directions/solution here. I have a react web app which enable user to record screen and video. So i use JS getDisplayMedia() to get the screen recording. So for enhancing the experience I have a timer of 5 seconds shown before the recording starts . In this timer screen I had added a keydown listner to catch space and esc button. esc button will abandon the recording and space will pause the timer. Now I will come to my issue. When I use getDisplayMedia() the chrome will prompt a floating window asking what to share (window, tab, screen). and if I choose something there will be a floating bar shown in the bottom by chrome which says stop sharing or hide. If in the options I choose share my entire window then automatically the focus got to the floating bar below(stop sharing one) and my keydown listners won’t work until i click on the screen. So is there a way in which I can avoid the chrome focussing its floating bar. All other sharing options (screen, tab) it is not getting focussed.
Please don’t down vote the question, if you know some links please point me there or if you know a solution please tell me here. If you find the question irrelevant please let me know that also with some reason.