You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Ibrendie

Trainee

  • "Ibrendie" started this thread

Posts: 68

Location: The Netherlands

  • Send private message

1

Tuesday, April 7th 2015, 9:36am

[WebVR] Detect if browser supports WebVR through external Javascript interface *SOLVED*

I know the WebVR plugin has an onavailable event which can be called when either WebVR or MobileVR is supported.

However, what I want to achieve is really simple. I want to show a text like "WebVR and/or MobileVR supported" on a HTML page through the external Javascript interface of krpano.

Is this possible?

E.g. intro.html is a page prior to the WebVR.html page (with the pano). On the intro.html page I want to show the above text "WebVR and/or MobileVR supported".


Thanks for any tips.

This post has been edited 1 times, last edit by "Ibrendie" (Apr 22nd 2015, 11:06pm)


Ibrendie

Trainee

  • "Ibrendie" started this thread

Posts: 68

Location: The Netherlands

  • Send private message

2

Tuesday, April 7th 2015, 11:31am

- double post -

This post has been edited 1 times, last edit by "Ibrendie" (Apr 7th 2015, 1:51pm)


benji33

Intermediate

Posts: 244

Location: France

Occupation: Senior Software engineer

  • Send private message

3

Thursday, April 9th 2015, 9:31am

Javascript test for real WebVR api (only for mozVR and Chrome with WebVR support) :

Source code

1
2
3
4
5
6
7
if (navigator.getVRDevices) {
    	navigator.getVRDevices().then(YOUR_FUNCTION);
  	} else if (navigator.mozGetVRDevices) {
    	navigator.mozGetVRDevices(YOUR_FUNCTION);
  	} else {
    	console.log('WebVR API not supported');
  	}

4

Thursday, April 9th 2015, 11:03am

Hi,

that's just for the WebVR API, but this way you don't cover the mobile VR support.

I would recommend using the 'onavailable' event of the krpano WebVR plugin:
http://krpano.com/plugins/webvr/#onavailable

There you could also call custom JS code using the js() action.

This event detects also the VR support for mobile devices - roughly explained it's checks for WebGL support and it waits for the devicemotion event and checks there if all required data (gyro+gravity) is available.

Best regards,
Klaus

Ibrendie

Trainee

  • "Ibrendie" started this thread

Posts: 68

Location: The Netherlands

  • Send private message

5

Thursday, April 9th 2015, 12:20pm

Hi,

that's just for the WebVR API, but this way you don't cover the mobile VR support.

I would recommend using the 'onavailable' event of the krpano WebVR plugin:
http://krpano.com/plugins/webvr/#onavailable

There you could also call custom JS code using the js() action.

This event detects also the VR support for mobile devices - roughly explained it's checks for WebGL support and it waits for the devicemotion event and checks there if all required data (gyro+gravity) is available.

Best regards,
Klaus
Hi Klaus,

Yes, that is exactly what I want, I also want to detect MobileVR through the onavailable event like I stated in my opening post.

I will try the js() action! Thanks.

Ibrendie

Ibrendie

Trainee

  • "Ibrendie" started this thread

Posts: 68

Location: The Netherlands

  • Send private message

6

Friday, April 10th 2015, 10:54am

Hi,

that's just for the WebVR API, but this way you don't cover the mobile VR support.

I would recommend using the 'onavailable' event of the krpano WebVR plugin:
http://krpano.com/plugins/webvr/#onavailable

There you could also call custom JS code using the js() action.

This event detects also the VR support for mobile devices - roughly explained it's checks for WebGL support and it waits for the devicemotion event and checks there if all required data (gyro+gravity) is available.

Best regards,
Klaus
Hi Klaus,

I'm trying with the following code, but I think I'm doing something wrong:

Source code

1
<script>  var krpano = document.getElementById("krpanoSWFObject");  var vr_support = krpano.get("webvr.onavailable") );  if(webvr.onavailable){  alert('Success!');  } else {  alert('Error!');  }  </script>

benji33

Intermediate

Posts: 244

Location: France

Occupation: Senior Software engineer

  • Send private message

7

Friday, April 10th 2015, 10:59am

You have to be sure that krpano player is ready and also the webvr plugin loaded.

You can use the isready attribute of the embed script for krpano player
And the onloaded attribute of the webvr plugin.

But the onavailable event returned by the WebVR plugin is the best and simpliest way to detect the browser+mobile device vr ability.

Ibrendie

Trainee

  • "Ibrendie" started this thread

Posts: 68

Location: The Netherlands

  • Send private message

8

Friday, April 10th 2015, 11:58am

You have to be sure that krpano player is ready and also the webvr plugin loaded.

You can use the isready attribute of the embed script for krpano player
And the onloaded attribute of the webvr plugin.

But the onavailable event returned by the WebVR plugin is the best and simpliest way to detect the browser+mobile device vr ability.
I'm sorry, I don't understand you. Do you mean the ONready?

http://krpano.com/docu/html/#onready

Can you post a sample code so I can learn from it?

Ibrendie

Trainee

  • "Ibrendie" started this thread

Posts: 68

Location: The Netherlands

  • Send private message

9

Wednesday, April 22nd 2015, 11:04pm

I used another method instead of detecting WebVR support through the external Javascript interface, I just show a message when WebVR isn't available.

Solution:

webvr.xml (plugin)

In the plugin definition at the beginning of the file I added the action name of my warning layer to the onunavailable:

Source code

1
onunavailable="show_warning();"


xyz.xml (pano xml)

I created a layer and set the alpha to 0.0 and autoalpha to 1.0 (autoalpha does the trick to also set visible to true based on the alpha setting):

Source code

1
<layer name="webvr_warning"            url="%SWFPATH%/plugins/textfield.swf"	       html="Unfortunately your browser doesn't support WebVR and/or MobileVR. Click [u]here[/u] for more information (new window)"	       backgroundcolor="0xFFFF99"	       alpha="0"	       autoalpha="true"	       css="color:#000000;font-size:14px;"	       padding="12 16"	       align="bottom" y="24"           zorder="10"           onclick="openurl('http://webvr.info, _blank)"           />


And finally the action to simply set the alpha of the warning layer to 1.0:

Source code

1
    <action name="show_warning">        set(layer[webvr_warning].alpha, 1.0);    </action>


Hope this helps someone to easily show a warning message when MobileVR/WebVR isn't available.