Adding Camera capability to the PowerApps visitor registration app
In my previous post, I demonstrated how a simple Visitor Registration app could be built using PowerApps and Microsoft Flow. There are several improvements to the app that I’d like to implement. Microsoft Azure Cognitive Services include the Face API which checks the likelihood that two faces belong to the same person. It would be fantastic if the users of the Visitor Registration app could quickly check out by simply facing the camera and therefore bypassing the check-out screen. I need to add camera capability to the app before doing any experiments with Microsoft Azure’s Facial Recognition service. In this post, I’ll be showing you how to capture a photo and upload it to SharePoint.
First I added the Camera control to a new blank screen.
On device’s that have multiple cameras, the Camera property of the Camera control decides which camera the app uses. A toggle control is added, and its value will be used to switch between the front and rear cameras.
This is how the app looked like with the front camera.
When the toggle button was clicked, the app switched to my rear camera (it was quite a gloomy day in Wellington)
The OnSelect action of the Camera control is set to capture photos from the camera and store them in the VisitorPhotos collection.
Photos captured by the camera are stored in the VisitorPhotos collections in the Data URI format. A data URI consists of data:[<media type>][;base64],<data>. For example:
data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7We’ll need to convert the data from the Data URI format to binary before uploading to SharePoint, this will be done using Microsoft Flow. From PowerApps, I created a new Flow.
To convert Data URI format to binary, a Data Operations — Compose action is added to the new flow.
The Inputs of the Compose action is set to use the dataUriToBinary() function which is a function of Azure Logic Apps.
A SharePoint — Create file action is then added to the flow.
The Site Address is set to the URL of the site collection and the Folder Path is set to the relative path of the Picture library that I created in the site collection. Please note that the File Content is set to the Output of the Compose action.
I have also created a Preview screen as below.
The Gallery control in the Preview screen has its data source set to the VisitorPhotos collection.
The OnSelect action of the Gallery’s image is set to the following value to trigger the flow that was created earlier.
To verify the result, I went to SharePoint and could see that a photo has been created successfully in the Photos library.
The Camera feature of the Visitor Registration app still needs a lot of refinements and considerations until it can be used in Production. However, What I have demonstrated so far is another example of what you could develop with PowerApps and Flow.
That’s it for now.
