[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.

    Einmal editiert, zuletzt von Ibrendie (22. April 2015 um 23:06)

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

    Code
    if (navigator.getVRDevices) {
        	navigator.getVRDevices().then(YOUR_FUNCTION);
      	} else if (navigator.mozGetVRDevices) {
        	navigator.mozGetVRDevices(YOUR_FUNCTION);
      	} else {
        	console.log('WebVR API not supported');
      	}
  • 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:
    https://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

  • Hi Klaus,

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

    Code
    <script>  var krpano = document.getElementById("krpanoSWFObject");  var vr_support = krpano.get("webvr.onavailable") );  if(webvr.onavailable){  alert('Success!');  } else {  alert('Error!');  }  </script>
  • 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.

  • 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?

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

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

  • 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:

    Code
    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):

    Code
    <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:

    Code
    <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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!