I have multiple different, independent VR applications running on different servers (I have access to all of them). They also use different frameworks: babylon.js, three.js and a-frame. Now the idea is to be able to enter each application from within an other VR webpage (basically a navigation). I've loaded each of them into an iframe and I am able to switch between them.
This works fine until the VR mode for mobile devices is used as it is different from the fullscreen of desktop webpages. I wouldn't mind a short exit and reentering of the VR but I'm not able to execute the functions responsible to do this because of the missing consent of the user. It will return: the requested session requires user activation.
Full error:
Is there a way around the user activation?
Is there any other way to switch between the vr applications?
Thanks for any help provided :D
Related
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
Is there a way in AFrame / three.js to check that the user is really looking at the program on a VR device such as Oculus Quest rather than just using a web page on a PC?
In particular is it possible to read back the device ID, such as the Quest ID from AFrame?
My problem is that I really want to be sure that users are running the program from within a VR headset, and not just running it on a PC based browser.
thanks.
My problem is that I really want to be sure that users are running the program from within a VR headset, and not just running it on a PC based browser.
Instead of sniffing for hardware details (reading out the Quest ID is not possible for good reasons), you can check if the user is in XR mode. This can be done by evaluating the isPresenting flag:
console.log( renderer.xr.isPresenting );
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
});
I have a codeigniter application for desktop can it be converted to a mobile app when accessed from a mobile using the same code?
You have two options, create a responsive design or create one desktop design and a mobile design based on the user agent.
If your design is easy to adapt for both worlds (desktop and mobile) with a little tweaking and a responsive design should be enough to do the trick. But before you choose this way remember that you have plenty of mobile devices with many screen resolutions.
I advise you to read this slideshow about the mobile web:
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
And just for information the types of mobile devices we have on the market.
http://jquerymobile.com/gbs/
To help you out with responsive design you can use some of the frameworks available on the internet:
Twitter bootstrap : http://twitter.github.com/bootstrap/index.html
Foundation 3: http://foundation.zurb.com/
Skeleton: http://www.getskeleton.com/
YAML 4: http://www.yaml.de/
You can see more frameworks here http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
In case your desktop layout doesn't fit as a proper mobile layout you can rely on the user agent, although he is not 100% accurate, and build two different layouts.
On the desktop side you can use some of the responsive frameworks mentioned before, for the mobile side you can use:
jQuery Mobile: http://jquerymobile.com/
iUI: http://www.iui-js.org/
UI ON TARGET: http://www.rikulo.org/
The best is a mix of the two worlds, a responsive design for small and large screens for users on a desktop and a proper design for mobile users.
the different between two is in the template or view part of application .
basically you have to identify visitor device and if it is a mobile show him the mobile view that you have prepared .
you can create great responsive mobile template using jquery mobile .
Yes, I've done exactly this in the past.
What I did is I used the user agent class to detect whether the user agent was a desktop or mobile client, and used that to set a flag in the sessions. Based on that, I served different views depending on the value of that flag. This approach has the advantage that the URLs remain the same regardless of which interface you're using.
I would recommend adding a way to manually override this, though, since detecting the user agent is never going to be 100% accurate.
This question is part user experience, part engineering.
I am trying to find a nice, clean way to have a user communicate with my web page while they are on another web page. I have web services that will accept HTTP POST/GET, so AJAX and other asynchronous niceties are welcome - don't worry about the details of their communication, they can easily be modified to fit a solution.
The problem I'm running into lies within the user interaction. Ex., say the user is viewing a web page and they want to send my system the web site's URL. I would like it if they could do it while still looking at that page, and without too many "crazy clicks" - currently they have to go back over to my page and enter the information (as you can imagine this has tested horribly).
I have ruled out browser tool bars (easy to do in FF, but a lot of my users use IE) and local applications (they won't want to install Java or Adobe Air apps).
Have you ever solved a problem like this before, or do you have an idea of how I could solve it? Should I be looking at separate solutions for FF and IE (ex., a tool bar for FF and something else for IE)? Don't worry about Safari and Chrome, though a solution that supports them too would be nifty.
Thanks.
p.s. The user would have an account on my system already.
Have you thought about something like the Digg Bar?
Users can access it through a bookmarklet, or you can do a url prefix like http://yoursite.com/<other_site_url>. When users click links, the bar stays active.
What if you wrote a system tray application. Something similar to Pixel Ruler
This could sit in their tray, and it would know you're website. That would eliminate browser toolbars, and could conceivably work on several browsers. You could probably even set it up as an install if they visit your website.
Then you could expose a webservice on your site that this control would pass back info to (like the user's name, current website, etc)
I don't know about the details of your application, but the only solution I can imagine is that you have a page split into two frames, with your toolbar at the top. stumbleupon.com does this, but it makes sense because they're providing the web content.
Simply, your users would have to visit your site before they could do their own browsing. Is that reasonable for your project? That sounds like it could be a user experience disaster of its own. Also, if most of your users are using IE, I'm going to assume that they're not the most web savvy users out there.