How to Get BabylonJS working in a Microsoft Teams App - microsoft-teams

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});

Related

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

MS Teams Personal Tab (Custom App) is not displaying in the side App bar

I have the below queries:
We were trying to expose the SharePoint portal in Microsoft Teams by creating a Personal Tabs App. In order to display it in the side app bar, we have added the app in Global Policy (admin.teams->Teams app->setup policy) and rearranged the App to top.
But the app is not getting displayed in the app bar for any user. Are there any more configurations need to be implemented?
Will this take hours to get displayed in the Teams UI, does E3 subscription will take more time to render the APP in Teams compare to E5?
If so, how many hours do we need to wait to see the update in Teams UI?
Please note this app is created via App Studio, not custom code.
Reference links:
https://www.youtube.com/watch?v=WyB4MBQwICs
https://learn.microsoft.com/en-US/microsoftteams/teams-app-setup-policies
Yes it is taking 24 hours to get displayed in the side bar. The configured tabs are displaying successfully in Teams web app/via browser. But not rendering in the desktop version. The tabs url changed in the below format to overcome this issue but not sure why this is replicating. Tab url format: https://tenant.sharepoint.com/_layouts/15/teamslogon.aspx?spfx=true&dest=/SitePages/Home.aspx

How do I redirect to another page in my custom app for Microsoft Teams?

I have a simple webapp that I am showing as an app in Teams. I have set it up in App Studio and everything works as I expect and it's all great. It is showing my web app and that is what I want.
For some cases, I need to redirect to a different web app on a different domain. When testing from Microsoft Teams in my browser, it works fine. But when I test from Microsoft Teams in the desktop app, then the screen just turns grey when the redirect was supposed to happen.
I already added the domains to this dialog in Manifest Editor.
Because the screen just goes grey with no explanation, I am having a hard time troubleshooting this issue.
#NielsBrinch Could you please take a look at Redirect across domains in a Microsoft Teams tab? Also please make sure that the tab you want to redirect to, is iframable and that it meets all the Requirements for tab.

Square POS Web API Android browser error

having an issue with Square POS Web API on Android.
We are trying to implement a kiosk app and the kiosk browser is Android based.
If run in Chrome browser the Square app loads fine with no error however if loaded in an Android browser (eg Dolphin) it fails with the following error.
Point of Sale API must be started with startActivityForResult() in the same task. It looks like the caller either used startActivity() or used startActivityForResult() from a finished activity or with the FLAG_ACTIVITY_NEW_TASK flag.
How can we fix this so the app can be used in kiosk apps that use android browser?
Square POS Web API only works with Chrome intents. Therefore you must use the Chrome browser with your Android device. We are in the process of updating our documentation to reflect this information, sorry for any confusion!

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

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
});

Resources