[CameraHTML5] how to save as picture and send to destination?

Forge Component
(3)
Published on 3 Jul (13 days ago) by Paul Davies
3 votes
Published on 3 Jul (13 days ago) by Paul Davies

Pardon me as I'm novice with outsystem. 

When i click capture it will show a snapshot of image on the right, but i cant figure out how to save the picture and send to destination?


In nodejs, i will do this... 

ctx.drawImage(video, 0,0, canvas.width, canvas.height);        

var img1 = new Image();        

img1.src = canvas.toDataURL();


No clue how to achieve here. 


Are you looking to save the image on the device or save it into a database table? 

hi Paul

no. i don't want to save into DB. 

I want to pass it as an image to a REST API to perform image recognition. 

in my nodejs, the drawimage canvas is saved in an image object (in-memory) and then send via REST api to https\://api.kairos.com/recognize for facial recognition. 


camerahtml5 is able to snap a picture from webcam, but i have no clue how to achieve the same


The Davies March produced application https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=4806&ProjectName=launch-from-image-web is using the module to send images to Azure face API.  I recognise that this requires installing a number of components so will look to build an example into the demo over the weekend that you can cut and paste into your apps.


Hi Paul

That's exactly what i want to use in my app. 

Shall look forward to your sample app  :)

perhaps can try on faceplusplus (as it is free) .. Azure will expire in 7 days. 

Thanks a lot. 

jpoo wrote:

Hi Paul

That's exactly what i want to use in my app. 

Shall look forward to your sample app  :)

perhaps can try on faceplusplus (as it is free) .. Azure will expire in 7 days. 

Thanks a lot. 

The demo is now built into the HTML5 demo.  It shows how to call the AZure Face recognition API. Is based on the ARproduct method.


Thanks a lot Paul for speedy code  

Have to register with azure first .. and try it out. 

If it helps Azure do a free trial. 

Hi Paul

Refer to your demo logic, where should i input the Azure cognitive api key?

jpoo wrote:

Hi Paul

Refer to your demo logic, where should i input the Azure cognitive api key?


If you go into the Azure Cognitive Connector component that downloaded with the demo it has a site property called OcpApimSubscriptionKey_FaceAPI enter the value into there.


you can also use the Azure cognitive Sample module (which you can download) to manage the upload of your training images to Azure