How to take photos every 60 sec using the CameraPreview Plugin for Mobile

Hi there, 

I want to use CameraPreview Plugin (for mobiles) to take photos every 60 seconds and send it to the server—just like a webcam would do. 

What is the easiest way to trigger the 'TakePhoto' action with a thread that calls this action every 60 seconds? 

Thank you for your help and comments,

Christian 

Hi Christian,

You could add a JavaScript widget and use JavaScript setInterval function, in the setInterval you can the call he action using the following line of code

$actions.TakePhoto();

Regards,

Daniel

Daniël Kuhlmann wrote:

Hi Christian,

You could add a JavaScript widget and use JavaScript setInterval function, in the setInterval you can the call he action using the following line of code

$actions.TakePhoto();

Regards,

Daniel

Thank you Daniël,


That sounds elegant solution. I'll try that!





I tried different approaches but nothing worked as intended so far:


First attempt to use SetInterval() that is triggered by a button to start the process however it is only triggering once then stopped and didn't take a new photo as the SetInterval function would suggest on w3 school:


The second attempt was to use a SetTimeout() (see below) in a loop that should execute until acceptance criteria are FALSE. The pause of 10000ms was ignored photos taken as quickly as the app allowed it. 


What am I am doing wrong here?


Yo do not need the IF only the JavaScript, and instead of the setTimeout you need SetInterval.

You should code it in the onready event of your screen.

The loop you created with the if will not wait at the JavaScript code, as that is executed async.

Csn you share an oml?

Daniël Kuhlmann wrote:

Csn you share an oml?

Thank you Daniël,

I had the JS call in the OnRender initially however it didn't work. You can find the OML attached with JS call in the OnRender. Unfortunately, it only takes a photo once without repeating to take a new shot every 10sec.

Any ideas why that is?

 




I will have a look at it

Daniël Kuhlmann wrote:

I will have a look at it


Thank you much appreciated. 


To give you context, we want to use Android phones to use them as wireless cameras to send photos every minute to a server for image processing. We hoped that OS would offer a fast solution to accomplish this on different phones. 

Solution

Hi,

I got it working there where some things missing.

  • I gave you incorrect instruction the javascript in the SetInterval you need to pass a function, not the result of a function: so instead of $actions.TakePhoto() it needs to be $actions.TakePhoto
  • Adding the javascript in the onrender is ok.
  • Second the screenshot that you want to show in the image corner in the right bottom, was pointing to static image User. So you never see a screen shot. I changed this to see below and added a local variable image of type Binary Data to the screen too.

  • Added a boolean local varialbe to stop the recording. When the STOP button is pressed the boolean is set to true and in the action that takes the picture i first check if the value is true and exit in that case.
  • For testing I added an entity WebCamPhoto, to which each screen shot is written, you might want to remove that logic.
  • Also for testing i set the interval two 2 seconds, couldn't wait 10 seconds that is such a long time haha.

Please see attached the updated OML.

Regards,

Daniel

Solution

Thank you that is fantastic, thank you Daniël! 

I'd love to try your solution unfortunately when I open in OS I edit and publish it, however, it doesn't show up in my development dashboard nor can I create a mobile app to deploy on my phone.

What has changed in OML to cause this? 






It is probably in the independent modules app, check there and use the move to other module button to move it to your mobile app.

Open Independent Modules, search for SimpleCamera module and click on the -> button then select your mobile app. 

Thank you for all your help! Amazing support!

How can I pass in an OS variable into JS for the time interval? 

Double click on the javascript node, and add an input parameter of correct data type.

Then back to your client action pass the parameter.

Please see https://success.outsystems.com/Documentation/11/Extensibility_and_Integration/JavaScript/Extend_Your_Mobile_App_Using_JavaScript

Section

Use input and output parameters