How to initilise the plugin

Question

How to initilise the plugin

alexbogo opened this issue 6 years ago · 17 comments

Hi,

I've installed plugin successfully but it doesn't load the object, and it doesn't open the "scan/camera".

I am using PhoneGap. As I am novice to all this, I am using default Hello world project. Here is the code:

<body>
    <div class="app">
        <h1>PhoneGap</h1>
        <p>asdfasdf</p>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();

        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            console.log(scan);
            scan.scanDoc(0, onSuccess, onFail);

            function onSuccess(imageURI) {
                //var image = document.getElementById('myImage');
                //image.src = imageURI;
            }

            function onFail(message) {
                alert('Failed because: ' + message);
            }

        }

    </script>
</body>

The console.log(scan); shows that object is not loaded:

scan is not defined

Can you please provide fully working example, or let me know how to make it work?

Thanks

UPDATE:

When including scan.js, the scan object is loaded, but now I am getting this error, which I do not have clue what it means:

exec proxy not found for :: Scan :: scanDoc

The plugin is installed with "cordova install ... "

The error is now: Failed because: Missing Command Error
from the "onFail" function...

Can you please help

Answer 1 · 2018-07-02T07:54:01.000Z

Hi, @alexbogo

I have not used phonegap yet, but I will look into it and get back to you.

Cheers,
Chris
Neutrinos

Answer 2 · 2018-07-03T09:01:31.000Z

Thanks Chris, it would be great if you can test it with Phonegap, please post your solution here,
Thanks

Answer 3 · 2018-07-03T11:35:44.000Z

Hey @alexbogo it seems phonegap works almost exactly the way cordova does. I was able to get this to work. Here is the link to the project i created, it uses gallery not camera. Since the project is a bit huge, I think it would be easier for you to correct your code rather than download.

So this is what you have to do for your code. i suggest starting from a blank project because then we can avoid any unforeseen problems. I am assuming you are using PhoneGap CLI

Create the project phonegap create phonu where phonu is a random name we give to our project
Change to the directory cd phonu
Add plugin phonegap cordova plugin add cordova-plugin-document-scanner
Within the file index.js (Example location :- E:\phonu\www\js\index.js), find the following function onDeviceReady : function () and change it as follows :-

    onDeviceReady: function() {
        app.receivedEvent('deviceready');

            scan.scanDoc(0, onSuccess, onFail); //0 for gallery & 1 for camera
            function onSuccess(imageURI) {
                var image = document.getElementById('myImage');
                image.src = imageURI;
            }
            function onFail(message) {
                alert('Failed because: ' + message);
            }
    },

Within the file index.html (Example location :- E:\phonu\www\index.html), find the following <p> tag <p class="event received">Device is Ready</p> and below it add :-
<img id="myImage">
Add platform phonegap cordova platform add android (In cordova you need min cordova android version 6.4.0)
Note :- You might need to change in config.xml (Example location :- E:\phonu\config.xml) <preference name="android-minSdkVersion" value="14" /> to <preference name="android-minSdkVersion" value="16" />
Build phonegap cordova build android
Run phonegap cordova run android

I hope this helps you :)
Cheers,
Chris
Neutrinos

Answer 4 · 2018-07-03T12:23:02.000Z

Closing this for now. Leave a comment if it helped and will reopen if you still have queries.

Cheers,
Chris
Neutrinos

Answer 5 · 2018-07-04T06:53:37.000Z

Hi, thank you for reply. Unfortunately it still doesn't work. I am getting this error now:
Error: exec proxy not found for :: Scan :: scanDoc

I have created blank phonegap project, followed your instructions, added this into my index.html ( the default index.js wasn't created ):

<body>
    <div>Test</div>
    <p class='event received'>Device is Ready</p>
    <div><img id='myImage' src=''></div>
    </div>    
        <script type='text/javascript' src='cordova.js'></script>
        <script type='text/javascript'>

            alert('inindex');
            document.addEventListener("deviceready", onDeviceReady, false);
            function onDeviceReady() {
                console.log(scan);
                scan.scanDoc(1, onSuccess, onFail);
            }

            function onSuccess(imageURI) {
                var image = document.getElementById('myImage');
                image.src = imageURI;
            }

            function onFail(message) {
                alert('Failed because: ' + message);
            }


        </script>
    </body>

The object scan is shown in console but nothing helps, only error: Error: exec proxy not found for :: Scan :: scanDoc

Browser console:

{…}
scanDoc: function scanDoc()
: Object { … }.
....
Error: exec proxy not found for :: Scan :: scanDoc

On my phone ( ASUS ) app starts, displays my TEST text and Device is ready, but nothing happens.
It just stays there doing nothing?

In browser it displays popup error: Failed because: Missing Command Error

Any advice please? I would really like to have it going.

Answer 6 · 2018-07-04T08:29:31.000Z

Hi,

When I install your code ( from download link ) - I am getting this error in browser console:
adding proxy for Battery
adding proxy for Camera
adding proxy for Device
adding proxy for File
adding proxy for Globalization
adding proxy for InAppBrowser
adding proxy for Capture
adding proxy for NetworkStatus
Received Event: deviceready
Error: exec proxy not found for :: Scan :: scanDoc

And the pop-up on the page - Failed because: Missing Command Error

There is no pop-up failed message on the phone.

Thanks
Alex

Answer 7 · 2018-07-04T09:17:29.000Z

Starting from scratch with CLI, I am getting error:
ReferenceError: scan is not defined

I am using Mac OS, if that makes any difference.
Alex

Answer 8 · 2018-07-04T17:59:01.000Z

please share your entire blank project folder and I will look into it.

Cheers,
Chris
Neutrinos

Answer 9 · 2018-07-04T23:19:03.000Z

Hi Chris,

Here is the link to my complete project files. It is very strange, as other plugins, like camera, work just fine. It must be something that I am doing wrong...

I created it with Phonegap CLI.

https://drive.google.com/open?id=19aNO5P6wKfgatSNcCoap_6N5-c7mjEJH

Thank you.

Answer 10 · 2018-07-05T04:57:48.000Z

Hey @alexbogo

I downloaded your project and directly ran it. It works just fine. Are you trying to run it on a browser? In which case it won't work. You need either an android or iOS mobile device. Browser support still hasn't been added to the plugin, only android and iOS support is currently present, as mentioned in the documentation under Supported Platforms.

To test on an android mobile device, connect it via USB in USB debugging mode and if you use phonegap cordova run android it will install and run the app on your phone.

In case you are using a mobile device for testing and still have this issue please let me know the following details

Device being used.
OS version of device.
Phonegap version.
Cordova version.
Cordova android version and Cordova ios version (To get this info use cordova platform in CLI)

Cheers and happy coding :)
Chris
Neutrinos

Answer 11 · 2018-07-05T07:59:30.000Z

Hi Chris,

First of all - big thank you for looking into this and your prompt help, and sorry for wasting your time! And mine... :o(

The reason why it didn't work on my setup is because I didn't use Android Studio but PhoneGap Visual builder. The Desktop App and Mobile App that talks to it: https://phonegap.com/getstarted/
Your last comment made me thinking that I am using wrong tools. And I was...

For anybody reading this - do not use PhoneGap Desktop App. According to documentation on phonegap site, that is all what you need. Well... not really. Or I didn't understand how to use it... but there is nothing to it. Also, do not use phonegap_cli, use Cordova CLI and install Android Studio that will install all needed SDK's and dependencies to build the app and deploy on device.

Once I've installed Android Studio and other requirements, all worked!

However, I have now different problem. The image taken from gallery or taken by camera/scanner is HUGE. Even I have cropped it - selected the area that I want to save, with blue dots/lines. It doesn't fit on the screen and it is very low quality. Am I missing some settings?

Can you please advise?

Thank you again for great plugin and your time! I hope I'll be able to contribute one day.

Answer 12 · 2018-07-05T12:36:26.000Z

Hey @alexbogo

I'm glad you got it to work :) It was my pleasure to help you out!
Will be looking forward to your contributions ;)

Will add this info to the documentation soon. Also image resizing you should be able to do with JavaScript pretty easily (Source : Quick google search). Maybe use viewport to get the window size of the device and then use this to set the width or height of the image accordingly. Since it is out of scope of this plugin, I would prefer not going too much into detail. If you are absolutely stuck, let me know, I will see what help I can do.

Image quality for gallery used to be low, now it is high. Image quality for camera was always high. Are you getting low image quality while using both sources if so please post before and after images so I can evaluate.

Cheers,
Chris
Neutrinos

Answer 13 · 2018-07-05T21:28:38.000Z

Hi Chris,

I think that image quality is bad because of the size of the image. I'll play with resizing it and see what I'll get. That part shouldn't be difficult to sort out. If I am really stuck, then I'll contact you again.

I hope to add OCR functionality to it, one day... it is part of my project. If successful, will send you the code.

Thank you again for help, very much appreciated.

Alex

Answer 14 · 2018-07-06T05:14:44.000Z

Hey @alexbogo

Sure, just let me know if you need help! :)
We are actually working on ocr as well, since the ocr plugins out there right now, seem to be either outdated or non-functional. But it will be a seperate plugin. You will be able to use the output of this plugin or camera plugin and get the ocr text. Will let you know once it is live and then maybe you can share your experience with ocr on that plugin.

Closing this issue for now. Was a pleasure working on this issue with you.

Cheers,
Chris
Neutrinos

Answer 15 · 2018-07-06T10:31:35.000Z

Hi Chris,

No worries, I'll be happy to test and report back.

Thanks again.

Answer 16 · 2018-07-16T15:53:34.000Z

Hey @alexbogo as promised the OCR plugin. Have fun with it :)

Cheers,
Chris
Neutrinos

Answer 17 · 2018-07-18T11:47:42.000Z

That is great, thanks Chris. I'll give it a go and report back.
I didn't even started yet on my implementation. Lol...

Cheers
Alex