[CameraHTML5] how to save as picture and send to destination?
Question
Forge component 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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.