Code Monkey home page Code Monkey logo

webarkit-testing's Introduction

webarkit-testing

This is a repository testing for WebARKit. This will not became the official repository, it's only a testing repository to test the code and the features of WebARKit. When it will be ready and mature, the code wiil be hosted in a new repository.

Features to add / issues to solve

  • Tracking inside a WebWorker to improve performances
  • Refactor the example and avoid Grayscale class to be used directly in WebARKitController
  • Fix jittering in detection phase.
  • Solve issue: Uncaught exception in processFrame #11.
  • Reduce code size of the final bundled library file.
  • Improve stability and tracker detection.

Building

Pre-requisites

You need emscripten 3.1.26 because openCV may be built with this version.

Instructions

Before all, you need to clone this repository with the WebARKitLib and opencv submodules:

git clone --recursive https://github.com/kalwalt/webarkit-testing.git

then if you plan to modify the C++ source code, you need to build opencv, run ./build_cv_w_docker.sh, the script will build OpenCV with docker.

You are ready to modify the code and remember to re-build the project every time with: npm run build and re-build js code with npm run build-es6 if you want a dev build use npm run dev-es6. It is possible to build a debug version of the library with npm run build-debug and then run npm run dev-es6 to update the dist library.

Examples

Go in examples folder try one of the examples... point the camera to the pinball.jpg image and you will see some messages. At the moment it support Akaze or Orb, when the pinball image is detected and tracked it should display a colored image and blue rect border around.

Try the live examples at https://kalwalt.github.io/webarkit-testing/

webarkit-testing's People

Contributors

kalwalt avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

webarkit-testing's Issues

Testing new WebARKitLib Trackers

@ThorstenBux @EdwardLu2018 i'm testing a new class that i created inside WebARKitLib see here in my testing branch feature-webarkittrackers . You can see the WebARKitOrbTracker.cpp that implement the necessary functions for initializing and to track.
WebARKitOrbTracker is a class, but i think we should implement a base class that may serve as base class for all future trackers. I also created a WebARKitUtils.h file to store functions that can be shared by trackers. For example we could store the im_gray(uchar data[], size_t cols, size_t rows) and maybe other functions.
There is also an example, but it only provide a test to verify the setup. It is just a beginning, a lot of work must be done! 😄
At least i can say the project may be built without errors, from emscripten....

WebARKit development

I will share with you some thoughts:

  • Bundler
    Actually i'm using webpack as a bundler, but we are free to use another bundler, for example Rollup or Parcel. We should understand what better fits our needs.

  • Entry point of the library:
    At the moment we export as a module the two WebARKit and WebARController in the index.js file

    import WebARKit from './WebARKit'
    import WebARKitController from './WebARKitController'
    export default {
    WebARKit, WebARKitController
    }

    Does it is what we want/needs?
    in CommonJS code to initalize the module you need
    WebARKit.WebARKitController.init().then(wark => {
    wark.webarkit.test();
    wark.initTracking()
    })

    maybe better would be write:
    WebARKitController.init().then(wark => {
    but this is not allowed because the lib is exported in that way.

This list is not complete, i will update while issues will emerge in the development.

RangeError: WebAssembly.instantiate(): Out of memory

While testing on Mobile(Android) i get:

RuntimeError: Aborted(RangeError: WebAssembly.instantiate(): Out of memory: Cannot allocate Wasm memory for new instance)
    at mA (WebARKit.js:2:22558)
    at WebARKit.js:2:25463
onError @ worker.js:42
Promise.catch (async)
initTracker @ worker.js:47
self.onmessage @ worker.js:11

this is caused because the Memory option

var MEM = 512 * 1024 * 1024; // 64MB
in the Emscripten is too big

Uncaught exception in processFrame

As said in #10 i get sometimes this error:

__resumeException WebARKit.js:2

  $emscripten::internal::MethodInvoker<void (WebARKit::*)(emscripten::val, ColorSpace), void, WebARKit*, emscripten::val, ColorSpace>::invoke(void (WebARKit::* const&)(emscripten::val, ColorSpace), WebARKit*, emscripten::_EM_VAL*, ColorSpace) 00d78de6:0x12cf0
  WebARKit$processFrame VM21:10
  value WebARKit.js:2
  value WebARKit.js:2
  processFrame  worker.js:53
  self.onmessage

Note that this happens only on Mobile device.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.