We Keep Coding

Solution to get the stream of mirrored screen from AirServer and display in HTML5 videos

I'am developing a browser based application (React.js) specifically for my own custom touchscreen device. The OS of my touch screen device is window 10 enterprise edition.
I want to acheive screen sharing from laptop or mobile to my custom made touchscreen device.
I use
navigator.mediaDevices.enumerateDevices().then((devices) => { /**/})
To successfully list all my mediasource such as Camera, Captured card (for HDMI cable connection).
It's work well and I can get the stream to assign to videoSource object.
However, I also want to do wireless screen sharing. So I install Airserver on my touchscreen device.
I wish I could get its listed as one of my mediasource in javascript. So I can mirror the screen shared from other mobile device in browser (Chrome) using HTML video tags.
But there is no AirServer as a media source available.
I really appreciate in advance for any suggestion or tips sharing.
Thank you

Detect browser keyboard IME feature

The problem: I'm working hard to implement a responsive UI in my app. But the keyboard IME on Android squishes my entire page layout into a frame that's about 96 pixels high when in landscape orientation. Typically this means that the input control being edited is not visible in the space above the IME. And one cannot edit a value that's not visible in Chromium. I'm assuming iOS has the same problem.
Setting a minimum height for the page helps. But the Chromium scroll-into-view implementation is not robust enough to keep up with some of the more complex page rewrites that are triggered by a change in window size in my app.
Ideally, I'd like to run the keyboard IME in "extract" mode, where the page is entirely hidden, and only the value being edited is displayed in the space above the IME. But as far as I can tell, there's no way to do that, even in Android native apps. Chromium never runs the keyboard IME in "extract" mode, even in landscape orientation.
The solution I'm current implementing: simulate "extract" IME mode by perform editing of values in a full-screen dialog that contains nothing but a single dedicated <input>.
The question is: how should I detect when to use this solution. it's easy enough to check the browser's navigator.userAgent. The Mozilla foundation recommends checking for /Mobi|Android/ (although I've seen solutions that have 40 or 50 patterns). But I'm wondering whether there's a feature-driven way to check for this instead -- something more along the lines of if ("geolocation" in navigator) ....
But as far as I can tell, there are no features related to whether and how a keyboard IME will change the layout of a page. If there are, I'd like to know. The "feature" I'm looking for is something along the lines of "Will this browser lay out my entire page in a frame that's 96 pixels high (in landscape) whenever an input control gets focus". But "does this browser uses a keyboard IME" would be satisfactory.
Any ideas appreciated.

How to force landscape orientation in a webapp in the browser

I have a webapp that is running in the chrome web browser on Android.
I want to lock the orientation to landscape.
I tried several options according to this tutorial:
using ScreenOrientation.lock(), which is experimental.
The example code here does not work in my mobile phone (Pixel3, Android 11) - when the device is rotated, the orientation changes.
I also tried a CSS trick, which rotates the screen by 90 degrees, if it detect that the device is in portrait mode.
The screen is rendered in landscape mode in the simplified example, but the functionality of the real application is broken. For example, when moving the finger in the x direction is interpreted as moving in y direction.
Other tries also failed on my Pixel3 phone in Chrome in Android (when rotating the device the orientation changes)
I am able to lock the orientation by installing the page as a PWA "Add to Home Screen" and using a manifest with
cat manifest.json
"display": "standalone",
"orientation": "landscape",
But this requires that the user installs the app as a PWA
I want to lock the orientation of the webapp while it is running in the regular browser.
Is this possible?
Thanks

The best bet you could do is generate a simple popup that disallows input, ie; covering the screen. Then use the following code [which can be better fine-tuned] to detect if the user is in portrait or landscape mode.
setTimeout(() => {
if(window.innerHeight > window.innerWidth){
document.body.getElementById('custom-popup').classList.add('show');
// Obviously you'd have to make a popup that is visible when the class 'custom-popup` is added.
} else {
document.body.getElementById('custom-popup').classList.remove('show');
// The user switched to landscape presumably
}
}, 3000);

Responsive Design Mode on desktop does not behave the same on the actual device

I am having a frustrating CSS problem. I am building a a single page JS map application and am trying to synchronize styles across browsers/devices. I thought I did a successful job using Responsive Design Mode in Safari/Firefox. It looks the same to me when I switch between iPad/Galaxy/iPhone/desktop in the browser emulator.
However, when I actually open the page on my phone in Firefox/Safari, it does not appear the same. Specifically, the ? button is wider than the rest of the buttons below it. I specifically have the width property explicitly set to 40 pixels in the CSS.
What is happening here? Why is the ? button wider?
Here are some screenshots of what I mean:
Desktop
Desktop/Responsive Mode iPad
Desktop/Responsive Mode iPhone
My actual iPhone
I tried connecting my phone using Remote Debug but I don't really know how to use it without visualizing the actual phone screen so I can't see what I'm editing. Anyone have any ideas?

I found the problem. For some reason, padding was being added in iPhone and not in responsive mode or other browsers. Adding padding:0 to the button fixed the problem.

Mobile YouTube in High-definition

I am trying to play a video on the YouTube mobile website (https://m.youtube.com) in 720p or more. So far I am failing.
My analysis so far
When accessing the mobile website, YouTube doesn't offer controls for the quality setting. I am employing JavaScript to add this functionality. My intention is to later inject that later with a browser extension.
Here are two angles I have tried so far:
1) using loadVideoById
player = document.getElementsByClassName("_msc")[0];
id = player.getVideoData()["video_id"];
player.loadVideoById(id, 0, "hd720");
// debug information
player.getAvailableQualityLevels(); // --> reports ["hd1080", "hd720", "large", "medium", "small", "tiny", "auto"]
player.getPlaybackQuality();
player.showVideoInfo(); // shows statistics below in viewport
However, the new player is still in quality medium. The script works for setting it to a smaller quality small and tiny. Often this happens when the viewport is to small. However in our case it is large enough to support a the large (854 x 480) quality setting, see on the picture below. Still switching to it doesn't work. It only loads up to medium (640 x 360).
2) using setPlaybackQuality
This is the official way of switching the quality, which works perfectly on the desktop version of the website (https://www.youtube.com).
player.stopVideo();
player.setPlaybackQuality("large");
player.seekTo(10);
Then calling player.getPlaybackQuality() still only reports medium. Note that this script doesn't work to set it to a smaller value small, tiny. So it doesn't seem to work at all.
On the desktop version both versions work. However to retrieved one has to use:
player = document.getElementById('movie_player');.
Also when testing this on the desktop, accessing the mobile site requires me to to a user agent switch to one of a mobile browser.
Question
How can I sucessfully change the quality to anything higher than medium?