Although I have read all documents of wikitude (phonegap plugin for iOS), i still couldn't understand how to open up live camera view. In the example project of wikitude, camera view shows up by native code and there is no example project for phonegap plugin at all.
In my project, i have installed wikitude plugin properly as shown here. At the page which is supposed to show augmented reality view, i have included necessary .js files such as WikitudePlugin.js, ade.js and architect://architect.js however the page shows only html view like normal page. What am i supposed to do to turn this page out to live camera view?
You should not include architect://architect.js together with the WiktiudePlugin.js.
Basically the AR html, js, css content is separated from your usual phonegap code. Just add the augmented reality content (that includes architect.js) as assets.
Inside your phonegap application call
WikitudePlugin.loadARchitectWorld(successCallback, errorCallback, "path/to/your/world")
This will open the ar content at "path/to/your/world" inside the Wiktiude SDK. The Wikitude SDK than displays the camera live view.
Again keep in mind that the augmented reality content is conceptional different to the phonegap application.
Disclaimer: I work for Wikitude.
Related
I am trying to build a Progressive Web Application (PWA) using angular framework and I am trying include functionality for speech to text. I scouted over the internet and I am not able to find anything that would help me to implement speech to text functionality in Safari, for Iphone.
Try integrate annyang (speech recognition library) within your Angular project
Save the library js file within the application. You can save it to an asset folder.Also, you have to add the js file path within angular.json file.Now, you can directly access library options/callbacks within a component class.
I am trying to create a Hybrid iOS project using Phonegap. I have got the www folder contents (html, js, css and all required data). I just wanted to build iOS container and put the www contents into it. It is done.
Now I want to call a POST web service method (should pass image and text contents), written in iOS native code from one of the html page. I have followed few links to implement the plugin, but nothing seems to be working and I couldn't figure it out what am I missing.
Given below the links which I have followed:
http://www.jkrause.io/blog/2013/07/25/example-of-a-native-ios-plugin-for-using-phonegap-3/
https://cordova.apache.org/docs/en/latest/guide/platforms/ios/plugin.html
and some videos as well.
I'm working on a project where we are using React Web and React Native. I already implemented a React Web component which allows you to load 3D models from OBJ, MTL and image files, once the model is loaded you can edit it, attach 3D labels on it and stuff, and finally save your edited 3D model back into the server, and my implementation uses THREE.js behind the scenes.
Now, the next step is to be able to retrieve these files from the server and render the edited 3D Model within a React Native app (mobile). So my question is: how should I go about doing this? I was thinking of using some embedded web view for react native so that I could reuse as much code as possible from the React Web component, and then somehow implement some sort of communication between the web view and the native app but I'm not very sure about how to actually implement this.
I've done some research so far and what I found is the following:
Native WebView for React and A bridge between webview and native app
By reading those pages I got a sense that what I want to do might be doable but I am still not really sure about how to actually implement this. How do I make the React Web component live inside a Webview, and then how do I make the injected code interact with the inner workings of my web component inside the WebView?
If my intended approach turns out not being feasible, is there any alternative approaches to render a 3D model natively in a React Native app, hopefully with a high level of abstraction comparable to that of THREE.js (some sort of THREE-like library for React Native)?
Expo, the framework in which an app is created via create-react-native-app has a GLView which provides access native OpenGL.
There's a tutorial for using Three.js in expo.
It's not proper for you to use webview to render complex contents, such as 3D models, it not well support among devices.
Though I've not write some react native app, but I've write an android app.
In the App, I tryed to use webview to render the stlloader demo of three.js projects, but with no success. And I also found mobile can render some simple 3D scene, here the webview render ability is lower than the mobile browser. Finally I use crosswalk an web engine which can added to the app. I use XWalkView of crosswalk to replace webview to render the 3D models. Here is the answer of mine about the process.
To use crosswalk in react native app, reference this:
https://github.com/iwater/react-native-crosswalk-android
https://github.com/jordansexton/react-native-webview-crosswalk
Hope it helps.
I implemented Three.js Module in HTML file. HTML file is responsible for rendering 3D Model [Here is the link to understand the same].
Now you can use react-native-wkwebview-reborn to load the html page on your device.
<WKWebView
ref={(wbref) => {
this.webview = wbref;
}}
source={{uri: 'http://localhost:8080/index.html'}}
onLoadStart={this.onLoadStart}
onLoad={this.onLoad}
onLoadEnd={this.onLoadEnd}
onError={this.onError}
renderError={this.renderError}
onMessage={this.onMessage}
scalesPageToFit
bounces={false}
scrollEnabled={false}
/>
HTML to React-Native
To post anything from your HTML file to react-native you need to postMessage().
From your HTML
window.webkit.messageHandlers.reactNative.postMessage(JSON.stringify({key: "sendMessageToReactNative"}));
window.webkit.messageHandlers.reactNative.postMessage() calls onMessage={this.onMessage} of react-native-wkwebview-reborn method.
To React-Native
onMessage = (e) => {
const message = JSON.parse(e.nativeEvent.data);
console.log(message);
};
React-Native to HTML
From your React-Native
//on some action like button click and etc..
this.webview.postMessage(JSON.stringify({key: "sendMessageToHTML"}));
In your HTML
document.addEventListener('message', function(e) {
let message = JSON.parse(e.data);
console.log(message);
})
Edit: so apparently adding class="button" make it work... Can someone provide a reference on what other classes are there? We can't find any information on this.. Thanks
We are making an app in HTML5 using XDK, it has quite a few different views. We were planning to just link to another html page each time we want to go to a different view. But we quickly found out that hyperlinking does not work, is disabled, and button does not link either.
One of the people in my group said she saw an example about having a bunch of and then just show and hide them and use that as UI navigation... is that the only way?
Thanks in advance!
The Intel XDK doesn't insert any class definitions or require that you use a specific framework. It is a tool for assembling an HTML5 hybrid mobile app using the CSS, HTML and JS files that you supply.
If you look at the samples and the default "blank" project that is created when you create a new project you'll see that there may be references to one or more of the following "phantom" JS files:
intelxdk.js
cordova.js
xhr.js
The first two (intelxdk.js and cordova.js) are special "device API" JavaScript libraries. You won't actually find them in your project directory, they are automatically included when you use the emulator and when you build your project (which "wraps up" your HTML5 code and assets into a native wrapper that is specific to the target you are building -- it does not compile anything, it just converts it into a hybrid native/HTML5 container app that can be installed on the target platform that you built for).
The third one is a special helper JS library for dealing with CORS issues from within your app.
None of these three JS files define any classes or HTML tags, etc. They simply implement target-specific device APIs that consist of JavaScript on the "top end" and native code on the "bottom end." Your application only sees and interacts with the JavaScript interface, and only with the APIs that you need to use (which is totally optional).
For an intro to all of this, please see the Intel XDK Documentation page.
So, that means you determine which frameworks and structure your app takes. In other words, if you want to use Bootstrap and jQuery you can do so. If you decide to use the App Designer or the App Starter tools, they will define some classes that impact your layout. However, you are not required to use these tools to define your HTML and CSS, you can do it by hand or use your favorite UI framework library.
Keep in mind that your code is not being rendered by a desktop browser but the embedded "webview" that is part of the device. These webviews don't have the same memory and CPU resources that you're used to working with in a desktop browser, so you need to learn to be "lean and mean" for the best results. You are using HTML5 technologies to build a mobile app -- not creating a web site on a phone.
Hope this helps, please see our HTML5 web site for more background material. It's a little slim right now, but we're adding examples and background material as time and resources permit.
Hope that helps...
I am building hybrid for ios using cardova. intially what cardova is doing , it is loading index.html in webview. I just want the same index.html to load in my native webview instead of cardova webview where i can use all the cardova features.
How can i go for this , what the steps for it.
Why i need this because we have some pages completly in native and 80% in hybrid. So within html i can't call my native page right but within webview i can call native also and html also. How should i do this.
You can embed a CordovaWebView into your native application. In this way you can build a native application that then also uses your Cordova hybrid pages. Check out the docs here: http://cordova.apache.org/docs/en/3.2.0/guide_platforms_ios_webview.md.html#iOS%20WebViews
You will still need to use a CordovaWebView and not the native browser or WebView though because of all of the hooks and overrides that have been made to the WebView. (You may be able to take a look at the CordovaWebView files and duplicate that but it seems like more work that you'd want to do.)