Start a new topic

White Screen instead of AR View trying wikitude samples for cordova

I'm looking into developing a Geo AR App and therefore want to try out wikitude's instant tracking and Geo AR functionalities. I have setup cordova, added the wikitude plugin, built several of the sample folders for android and ran them on my Samsung S8.
The App launches on my phone but instead of the AR View I only see a white screen with some UI elements and the ADE "button" on the bottom right. I have manually configured all permission settings for the app including camera permission. I have tried out different settings in ADE but it doesn't seem to make much of a difference

The only errors I'm getting from the console are for example these, while the latter two appear when I touch anywhere on the white space on the screen:

architect.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
ade.js:1 Uncaught TypeError: AR.js.click.executePlatformClick is not a function
at Object.executeClick (ade.js:1)
at HTMLDocument.touchendEvent (ade.js:1)
ade.js:1 Uncaught TypeError: AR.js.click.executePlatformClick is not a function
at Object.executeClick (ade.js:1)
at HTMLDocument.touchendEvent (ade.js:1)

I have also tried the Unity Wikitude samples and with those the camera work perfectly fine, but because I'm interested in the sensor-based Geo AR, this is (at least currently) not an option.
I have also found the other github sample repo here #https://github.com/Wikitude/wikitude-cordova-plugin-samples but the command line doesn't seem to work on Windows, at least that's what someone from Wikitude responded in an github issue.

How can I get the samples work properly with cordova?


I'm working on Win10 with Wikitude version 8.0.0, Cordova 8.0.0, Samsung Galaxy S8 with Android Oreo 8.0


Good morning Victoria,



could you describe the sequence of steps with which you set up your Cordova app in detail?



- Daniel


Hi Daniel,


I have installed cordova and already built apps with other plugins that work well so it doesn't seem to be a problem with my cordova setup.


The steps for my wikitude cordova app setup are:

I have downloaded the Wikitude cordova plugin from github https://github.com/Wikitude/wikitude-cordova-plugin and added it manually with the command cordova plugin add <THE_LOCAL_PATH> because I couldn't add it directly with the github link.

I have downloaded the Wikitude SDK samples from github https://github.com/Wikitude/wikitude-sdk-samples and copied the ade.js file to my "www/js"-folder and set the path accordingly later on in the index.html and .js file and copied for example the content of the sample "05_InstantTracking_2_3dModelonPlane" to my "www"-folder.

I check if all referenced paths are correct and run the app with the command cordova run android on my Samsung S8 which is connected via USB.

I've also built an .apk-file with cordova build android and copied it to my smartphone, installed it and opened it but I have the same problem there although the app runs smoothly on my phone there is no camera view only the white screen as you can see in the attached picture. I have granted all permissions as you can see in the 2nd screenshot and I have also added a screenshot of a Wikitude Unity Sample that I have built where the Augmented Reality view works fine.


Thank you in advance and best regards.



Good morning Victoria,



I think this might be related to the GitHub sample repository. These samples have not been updated for quite a while. Would you mind downloading the regular JavaScript SDK package, taking the samples from that and trying to run your app again?



- Daniel



1 person likes this

Thank you very much Daniel for giving me the link to the current samples! Is there any setup guide? I'm a bit confused with all the folders in there which I need to include in my cordova project. On an other note if the github samples are outdated you might want to update your documentation, because I got the repository from there:

https://www.wikitude.com/external/doc/documentation/latest/phonegap/samples.html#samples-on-github


Best regards!

Good morning Victoria,



the app package contains all the samples of the GitHub repository in their most recent version in the <PACKAGE_ROOT>/Examples/SDKExamples/wikitude-sdk-samples/src/main/assets/samples directory. I'd like you to try one of these samples rather than the ones from GitHub. You can ignore the rest of the package, none of it is relevant for your Cordova application.



- Daniel



1 person likes this

Good morning Daniel,


unfortunately even with the new sample files only the UI is working in the apps but theres only a white screen where the AR view is supposed to be.


I attached the console log for the "05_InstantTracking_5_SaveInstantTarget" sample, I have tried several samples from instant tracking, object tracking, 3dModels but I always seem to get those 3 errors:

Failed to load resource: net::ERR_FILE_NOT_FOUND

architect.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)

saveinstanttarget.js:15 Uncaught ReferenceError: AR is not defined


I know the first two can be ignored but what about Uncaught ReferenceError: AR is not defined? I have googled this error and found a few older issues from 5 years ago but the issue starters didn't have any problem with the AR/camera view.

Good morning Victoria,



would you mind letting me have a look at the index.html file of your Cordova app?


I think you might be missing the following line.


<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">


Since the AR object is undefined, the architect.js file seems to not be loaded.



- Daniel


Thank you for the quick reply, I just copied and pasted the particular folders and files from the sample project I wanted to try, for instance in the 05_InstantTracking_SaveInstantTarget sample index.html the line you provided is

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

instead of the code snippet that you provide, so I added your line and now I'm getting this error:

index.html:1 Refused to load the script 'https://www.wikitude.com/libs/architect.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval'".

 

So it does indeed not load the architect.js although the following line is included in the index.html
<script src="https://www.wikitude.com/libs/architect.js"></script>

 

html
(3.03 KB)

Do you have any idea what else I could do to make it load the architect.js file?


I created a completely new cordova project, added the Wikitude plugin and setup the sample app as suggested in the documentation, downloading the binary from https://github.com/Wikitude/wikitude-cordova-plugin-samples/archive/master.zip , extracting it and copying the folders and files from the SampleAppResources folder to my www/ directory. When building and running the app on my Samsung Galaxy S8 I can see the Menu with all samples, but when tapping on a sample nothing happens.

The debug console log shows the following error each time I tap on the screen:

index.js:56 Uncaught TypeError: Cannot read property 'applicationDirectory' of undefined
    at Object.loadExampleARchitectWorld (index.js:56)
    at <anonymous>:1:5

 I have already tried the sample app with the full selection menu from the documentation in my previous cordova project and if I recall correctly I also had the same error before.


When I try to add a particular sample app to my newly created cordova project adding the <meta http-equiv... line to my index.html I get the same error as before in my old project "Refused to load the script..." and I still only see the UI with the white screen as a background instead of the AR camera view.


I don't know what I'm doing wrong, I mean I just copied and pasted all of your files and folders, how come the index.html was missing a line?


I read through this https://developer.chrome.com/extensions/contentSecurityPolicy#relaxing and this https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/ and tried a few other  elaborations of the <meta http-equiv="Content-Security-Policy"  ... tag, but nothing seems to work.



Do you have any solution yet? I'm struggling with the examples, too.

Login or Signup to post a comment