How to make an app ready for 'ovrweb' protocol (to be viewed in Gear VR)? - three.js

I have a web app that uses ThreeJS. I am currently trying to include WebVR to be used with Gear VR.
I am aware that I need to link to that web app using the ovrweb protocol in order to open it in Gear VR. My problem is that it does not.
Whenever I use window.location.href = "ovrweb:http://my-app-url", I am asked to attach the device to Gear VR. But once I do so, the screen remains black. I noticed that the same thing happens whenever I use some non-VR webpage as the URL (like ovrweb:https://www.google.com).
However the ovrweb protocol works fine as expected with certain URLs - such as ovrweb:https://playcanv.as/p/VNTAx5Eu/.
I am not sure what I am missing. My app has a VR button, on clicking which the display.requestPresent API call gets fired & the screen splits into two (works in Chrome Canary). Is that any list of requirements that my app needs to satisfy to be recognized via ovrweb protocol? If so, what are those?
I went through the Oculus docs, but did not find anything that could help me. How do I make my app run via ovrweb protocol?
Update: I found that ThreeJS example links (such as https://threejs.org/examples/webvr_rollercoaster.html) are not working over ovrweb protocol either.

Okay, found the solution myself.
Whenever we try to use ovrweb protocol, the device will try to open the URL provided in its Carmel Developer Preview browser (different from the "internet browser" one can use when inside Oculus Home experience).
Now the Carmel Developer Preview supports only "3D" websites. Navigating to 2D websites is not currently supported in Carmel Developer Preview. (https://developer.oculus.com/documentation/vrweb/latest/concepts/carmel-launching-content/). That's why my own web app, as well as links such as google.com, appeared black.
So all that I had to do was simply trigger display.requestPresent at the very start - thereby differentiating it from a 2D website.
Now display.requestPresent does not work without some kind of user interaction (such as click of a button). Same is the case with other JS APIs (such as fullscreen), for security concerns.
However it seems like navigating to a link over ovrweb protocol and thereby viewing it in Carmel Developer Preview also satisfies the user interaction condition. Hence now my VR scene is perfectly visible in Gear VR.
This solution should also work in the ThreeJS webvr examples (including the rollercoaster example linked in OP).
All one needs to do is trigger this snippet on page load.
display.requestPresent( [ { source: canvas } ] )
.then(function() {
// Presenting to WebVR display
}, function(e) {
// On error
});

Related

How to Get BabylonJS working in a Microsoft Teams App

In a Microsoft Teams app, I am using
await app.shareAppContentToStageAsync()
with a page that hosts Babylon JS - this exact page that should show a ball on a plane with a blue background.
https://doc.babylonjs.com/setup/starterHTML
This works fine on Teams on the web running on Microsoft Edge.
In the Teams Desktop client on Windows 11 Version 1.6.00.2573 (64-bit), all I see is the blue background.
Is there anything I need to do to in order to get this to work?
If you are talking about the playground frame, you may need to enable the playground origin in the tab manifest (see validDomains parameter) because the ball and the blue background thing is rendered from an origin that is different from the main page origin (https://playground.babylonjs.com/full.html#WJXQP0)
If you try to add the playground page directly as a tab (using the link above and the built-in "WebSite" app for example) it seems to work fine in the Desktop Client as well.
It turns out that the Windows Microsoft Teams desktop client has a bug in the WebGL2 component and I have to initialize the engine with a parameter disabling the WebGL2 Support:
const engine = new BABYLON.Engine(canvas, true, {
disableWebGL2Support: true});

MediaDevices.getUserMedia throws exception on Windows when Zoom or MSTeams desktop clients are running (with camera on)

Environment
Browser: Chrome 87.0.4280.141
OS: Windows 10 Home
Zoom Version: 5.4.6(59296.1207)
I have a website that can access the the user's camera and take a short video on request. I am attempting to achieve this using the MediaDevices web api.
This is all working fine except in two scenarios. When I am in a Zoom or MS Teams meeting on my Windows laptop (with camera on), I have noticed that my webapp fails to capture my video. If I use the web clients for zoom or msteams then it works as expected. Also, if I use mac OS instead of my Windows laptop then this works fine.
When I debug this I get the following error message thrown when trying to access userMedia.
DOMException: Could not start video source
The code that I am using to access UserMedia is the following:
return await navigator.mediaDevices.getUserMedia({video: true});
Is there anything I can do to allow me to user my webcam in the browser as well as on the MS Teams or Zoom clients?
Is there anything I can do to allow me to user my webcam in the browser as well as on the MS Teams or Zoom clients?
No, sorry to say.
The native videoconference client programs attach to your webcam, and so does the browser when you use gUM. The first process to attach wins.
A second webcam may solve your problem by letting your videoconference progam use one and your browser use the other. If you use Chrome, pick the camera you want to use with your browser from the pulldown menu on this page.
chrome://settings/content/camera

Chromecast home screen development options?

I've been reading through Google's Chromecast developer documentation and I can't seem to find any developer docs that discuss how to develop customizations for the Chromecast home screen, such as HTML overlays, etc.
There are Chromecast apps available that do show stuff on the Chromecast home screen, such as Dashboard Cast, https://play.google.com/store/apps/details?id=com.rir.dashboardcast&hl=en.
Does anyone know what approaches can be used with the Receiver API to allow this?
You cannot customize the home screen (backdrop); users can change what sort of feeds (images) can be used to be shown there. You, as a developer, do not have control over that and if it seems that some developers have customized that, in reality they have not; they are running an app there (like any other chromecast app).

AVFoundation CoreMedaIO virtual camera not being detected in browser

I have been testing the Apple CoreMediaIO sample camera on Mac OS X 10.9 Mavericks.
Locally the applications i have tried could detect and recognize the sample camera automatically (like Skype, AVRecorder - Apple's AVFoundation capture API sample)
In Mozilla Firefox and Opera browsers the camera has been detected automatically on the Flash Player based sites that i have checked (for example Adobe's Cirrus sample), although in Safari and Chrome the sample camera was missing from the video input devices list.
How could i make these browsers recognize the CoreMediaIO sample camera on such a website?
Safari:
The problem causing this to happen is that on Mavericks the current Safari uses a sandboxed Flash Player which refuses to detect the sample camera.
You can solve this by allowing sites to run Flash Player in unsafe mode: (make sure you have allowed the website to use your cameras on the Flash Player pop-up window)
Go to Safari/Preferences.
Go to the Security page.
Click Manage Website Settings.
On the left pane select Adobe Flash Player.
Select the website you have allowed to use the camera and want to use the camera with.
Click on the combobox.
Select Run in Unsafe Mode.
On the pop-up window choose Trust.
Refresh the website.
From now on, Safari can detect the sample camera on the specific website.
I could not find a better/all-around solution yet.
Chrome:
This problem is mainly based on the Mac OS X AVFoundation API being disabled by default in the current Chrome (the CoreMediaIO sample uses it).
There are various methods to make Chrome detect the sample camera.
So far my best solution is the following:
Open a new tab in chrome.
Go to chrome://flags.
Search for "Enable use of Mac OS X AVFoundation APIs, instead of QTKit, Mac" entry.
Set the above-mentioned entry to Enabled.
Relaunch Chrome.
As far as i could get, the key AVFoundation flag's internal ID is IDS_FLAGS_DISABLE_AVFOUNDATION_NAME.
As long as you try to use AVFoundation based things in Chrome (OS X Mavericks) you will probably need this. (I don't really know why the default value is disabled, but i hope they will change it as Apple tends to deprecate QTKit.)
Other solutions that i prefer less:
Disabling Pepper Flash (PPAPI) and using NPAPI Flash Player instead.
Open a new tab in chrome.
Go to chrome://plugins.
Hit the plus (+) sign in the upper right corner next to Details.
Search for the Adobe Flash Player plugin section.
Locate the Pepper Flash version (PPAPI type).
Click Disable.
Refresh the website.
Google intends to deprecate NPAPI Flash Player soon, which leaves the Pepper Flash (PPAPI) as the only alternative, that was the reason to try and find a better solution than this. I don't recommend to rely on this solution considering the future of NPAPI Flash Player.
There is another temporary solution involving Mozilla Firefox. I don't know why exactly this works and i think this might easily change in the future, but i tried and verified that it works at the moment:
Close Chrome entirely (Chrome/Quit Google Chrome or Command+Q).
Start Firefox.
Go to the website you would like to use the camera with (any Flash Player based site works that calls for camera list).
Open Chrome.
Close Firefox.
Go to the website in Chrome.
If you close Chrome you will have to redo the process from Step #2. It seems like Firefox initializes something that makes the Chrome startup different and causes it to detect the sample camera. I don't recommend to rely on this though.

iPad - Test an HTML5 site on a Win7 PC

I'm looking to target a website specifically for an iPad but we don't have any Macs in house for testing. What's the most accurate way to test the site on a PC? I image I could use the Safari browser and shrink the window down to approximate the iPad screen size but I wonder if there's a better method out there.
If you target a website specifically for a particular device, buy that particular device. This doesn't only apply to iPad.
Two caveats I noticed a lot of websites have for a touch-oriented device like an iPad, iPhone:
The mouse-hover event isn't generated. So, the HTML/CSS/Javascript menu structure which works without clicking on a WebKit browser (like Safari) on a mouse-oriented device might stop working completely.
The scrolling event (coming from a flick of a finger) is not passed to elements inside a page; instead it just scrolls the entire page. A subelement shown with a scroll bar on a non-touch-oriented device might be shown without the scroll bar at all. So, sometimes you lose the ability to scroll inside a subelement.
There might be other caveats. It's really difficult to imagine all the way a device might behave differently from a mouse-oriented device; so, buy an iPad.
By the way, it's of no use to buy a Mac in this situation: Safari on a Mac still behaves (as far as the mouse/touch events are concerned) rather differently from Safari on an iPad/iPhone. An iPad can be paired with a Windows PC.
See this Apple document for a few advices for preparing a web page for the iPad.
I'd just use Safari, as the mobile version uses the same rendering engine (though possibly modified to fit the iPads resources).
It should display the same, if not close.
You can try to use online imitation services.
For example http://app.crossbrowsertesting.com/, or https://saucelabs.com/. They provide lots of imitations environments, for different devices and OS. You can test the site, that is already in the web, or your local files.
I myself am working currently with app.crossbrowsertesting.com for the first time. It really shows the problem, that the client encountered on his iPad. Also have good notices about these services from experienced developer, a friend of mine.

Resources