Unlock the power of WebVR in your WebView using krpano!

After successfully running krpano with WebVR on Chrome and Firefox, I encountered an issue where the cardboard button was not visible or enabled when embedded in a WebView on Android. However, to my surprise, the compiled apk with the WebView showed the cardboard button on another device.

Now, I am puzzled about how to force the same behavior on my phone. I know that it works on Chrome and Firefox Mobile but not within my WebView implementation. What configuration settings do I need to tweak to ensure WebVR is universally enabled across all Android devices capable of supporting it?

static final String BASE = "http://app.imaginarydomain.com";
static final Pattern PATH_PATTERN = Pattern.compile(Pattern.quote(BASE) + "/(.*)");

...

WebSettings webSettings = webView.getSettings();
webSettings.setBlockNetworkLoads(false);
webSettings.setJavaScriptEnabled(true);
webView.setWebViewClient(new TestWebViewClient());
webView.loadUrl(BASE + "/tour.html");

...

class TestWebViewClient extends WebViewClient {
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, String url) {
        Matcher matcher = PATH_PATTERN.matcher(url);
        if (matcher.matches()) {
            String asset = "sample-tour-cardboard/" + matcher.group(1);
            try {
                InputStream is = getAssets().open(asset);
                String extension = MimeTypeMap.getFileExtensionFromUrl(url);
                String type = "application/octet-stream";
                if (extension != null) {
                    type = MimeTypeMap.getSingleton().getMimeTypeFromExtension(extension);
                }
                return new WebResourceResponse(type, "UTF-8", is);
            } catch (IOException e) {
                Log.e("ERROR!", "Asset loading error: " + asset, e);
            }
        }
        return null;
    }
}

Despite attempting to enable WebVR fake mode in the krpano WebView plugin, I still faced challenges.

It seems like the WebVR plugin may be conducting a specific check within the WebView context that only passes on Chrome Mobile, Firefox Mobile, or other implementers by different devices.

Answer №1

To utilize the WebVr plugin in krpano, WebGL compatibility is necessary, which is only available in the Android WebView post the release of Android L Developer Preview.
For more details regarding this restriction, developers can refer to the chrome developer page: https://developer.chrome.com/multidevice/webview/overview
Due to this limitation, the cardboard icon may not be displayed in the Android WebView.
If there is a need to cater to devices running on versions prior to Lollipop, XWalkView from the XWalk Project can serve as an alternative solution. Link: .

To find additional assistance on embedding xwalk, check out my forum discussion link on the krpano platform:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing an existing item from shared preferences into an array list in an Android application

I have a pre-existing array list stored in shared preferences, and I want to add an additional item to it. However, whenever I try to do so, it ends up removing all the data that was previously stored in the array list. Is there a way for me to add an ite ...

There is an issue with my HTML due to a MIME type error

I am currently facing an issue with my project. I have developed a node js server and now I want to display an HTML file that includes a Vue script loading data using another method written in a separate JS file. However, when I attempt to load the HTML f ...

Continuously generate new objects every second

I am working on a function that involves adding the RandomBlock object to the scene and then moving it downward on the screen. function enemyPaddleMovement() { scene.add(RandomBlock); RandomBlock.translateX(-8); } The RandomBlock object is created using ...

Utilizing CDN script with Shopify: A guide to optimization

I am currently utilizing VueJs in the development of a Shopify theme using Shopify Cli and Store 2.0. To incorporate Vue, I initially attempted to install it through a CDN script within my theme.liquid file. <script src="{{ 'vue.global.js&apos ...

What is the process for validating a JWT token using an x.509 certificate in a Node.js environment?

I need assistance with making a node script capable of validating a JWT token. I possess the public key, which is an x.509 certificate, along with the JWT itself. My attempt to utilize https://github.com/auth0/node-jsonwebtoken proved unsuccessful as it d ...

Guide to verifying the update of user information with sweet Alert on ASP MVC

I'm currently working on an ASP MVC web application that involves using stored procedures with SQL Server. My goal is to implement a confirmation alert (Sweet Alert) to confirm the data update for a logged-in user. The code for editing works fine wi ...

The functionality of sending a response to a client in Node.js Express seems to be malfunctioning

I am facing an issue with sending a response back to the client. Despite not receiving any errors, it seems like the response is not working as expected. Can anyone help me figure out why? Below is my code snippet: exports.login = function (req, res, next ...

axios interceptor - delay the request until the cookie API call is completed, and proceed only after that

Struggling to make axios wait for an additional call in the interceptor to finish. Using NuxtJS as a frontend SPA with Laravel 8 API. After trying various approaches for about 4 days, none seem to be effective. TARGET Require axios REQUEST interceptor t ...

Tips on setting an expiration time for verification codes in a Node.js environment

What is the best way to implement an expiration time for this verification code? I need it to be deleted from the database after 10 minutes. var fourcode = Math.floor(1000 + Math.random() * 9000); app.post("/sendforgetpassword", async (req, re ...

Exploring the depths of deep populating in Mongo and Node.js

I am currently struggling with a complex data population issue. var commentSchema = mongoose.Schema({ name: String }); var userSchema = mongoose.Schema({ userId: { type: String, default: '' }, comments: [subSchema] }); var soci ...

The rejection of the WordPress custom plugin was due to the use of the reason 'Directly accessing core loading files'

I created a plugin for personal use and later decided to make it available to the public. However, my submission was rejected after a code review citing the reason ##Calling core loading files directly. I have addressed all the issues pointed out, except ...

Create a randomized string of numbers that includes specific digits while excluding others

I am struggling with generating strings in JavaScript. Specifically, I have an array of numbers from which a string needs to be generated. The string must contain at least 1 number from the array, but must not contain a specific number given by the user. A ...

Create an unordered list using the <ul> tag

Creating a ul as input is my goal, similar to this example on jsfiddle: http://jsfiddle.net/hailwood/u8zj5/ (However, I want to avoid using the tagit plugin and implement it myself) I envision allowing users to enter text in the input field and upon hitt ...

Building a Node.js view to display an OpenLayers map

I'm new to working with node.js and am currently trying to incorporate an OpenLayers map onto a webpage. However, I'm facing an issue where the map is not displaying as expected. Code: app.js var express = require('express'); var ap ...

Category-specific WP_Query with Ajax Post Filter only triggers one time

I have successfully implemented an ajax post filter based on a helpful guide I found. The filter currently allows me to sort lectures by speaker and date, but I am now attempting to add a feature that filters lectures by category (which in this case is a s ...

Problem with Bootstrap 3 navbar on mobile devices - not tappable or responsive

After years of using Bootstrap, I've come across a new issue with my implementation of a Bootstrap 3 Nav. While testing on a desktop browser with device emulation, the nav collapses and functions properly. However, when tapping on the header on an ac ...

The operation failed because the property 'dasherize' is inaccessible on an undefined object

While attempting to execute the following command: ng generate component <component-name> An error occurred saying: Error: Cannot read property 'dasherize' of undefined Cannot read property 'dasherize' of undefined The confi ...

Which is better for creating a gradual moving background: Javascript or CSS?

I'm attempting to discover how to create a background image that scrolls at a slower pace than the page contents. I'm currently unsure of how to achieve this effect. A great example of what I'm aiming for can be seen here Would this require ...

Leaflet Draw determines whether a polygon encompasses another polygon

I have a question regarding the Leaflet Draw plugin. I am able to determine if a polygon contains markers or if a marker is placed within a polygon using the code snippet below: polygon.getBounds().contains([latitude, longitude]) I'm interested in f ...

Removing a select menu in Discord.js once a selection has been made

Currently in the process of creating a ticket tool that utilizes a select menu for choosing a topic const row = new MessageActionRow() .addComponents( new MessageSelectMenu() .setCustomId(`select_menu`) .setPlac ...