175
Views
10
Comments
[CameraHTML5] how to save as picture and send to destination?
Question
camerahtml5
Web icon
Forge asset 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. 


UserImage.jpg
Paul Davies

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

2018-12-07 20-18-37
jpoo

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


UserImage.jpg
Paul Davies

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.


2018-12-07 20-18-37
jpoo

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. 

UserImage.jpg
Paul Davies

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.


2018-12-07 20-18-37
jpoo

Thanks a lot Paul for speedy code  

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

UserImage.jpg
Paul Davies

If it helps Azure do a free trial. 

2018-12-07 20-18-37
jpoo

Hi Paul

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

UserImage.jpg
Paul Davies

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.


UserImage.jpg
Paul Davies

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.