In this blog post, I will walk through how we can set the camera mode on a canvas app based on the device the user is using the app on. This is helpful for scenarios when trying to enable a front camera only based functionality on the app.
Problem Statement
When devices have two cameras (front/rear) on Mobile and Tablet devices and if you want to open the front camera by default on mobile phone and the same on a laptop device, the setting differs because of primary and secondary camera setting. Power Apps understands the primary camera for a laptop device as the front camera by default and for mobile phone or tablet based devices the primary camera is set to the rear camera. So the question is how to configure the camera to automatically adjust based on the device?
Solution
To make sure that the app opens the right camera based on Tablet, Mobile and Laptop devices, we will need up to setup a few configuration as below:
We will use a variable and Timer control to configure this. As we want to capture an image from the front facing camera, we will default the camera mode to 1 and if the app is opened in Mobile/Tablet it will point to front camera. In case of a laptop device, this will not show appropriate results. To enable this, we will add a 1 second timer which checks if the camera stream is returning data. If the stream appropriately returns data, we are on the right camera mode setting for the app and if the stream is empty, we will switch the camera mode.
Screen OnVisible
Expression: Set(modeCamera,1);Set(StartTimer,false);Set(StartTimer, true)
Explanation: By default, set the modeCamera variable as 1. This variable will be passed on to the "Camera" property of the camera control. Next variable StartTimer is for starting the timer and will be set to false first and then true. (The reason we are setting this as false first is to make sure that there is no garbage value in the variable that affects the trigger of the timer control).
Camera configuration:
Camera: modeCamera
StreamRate: 100 (1/10 of a second)
Timer Configuration:
Duration: 500 (0.5 Second)
Repeat: false
AutoStart: false
AutoPause: false
Visible: false - Because we do not want this timer to be displayed on the screen.
Start: StartTimer
OnTimerEnd: If(IsBlank(Camera1.Stream),Set(modeCamera,0));Set(StartTimer,false)
Explanation: After half second, on timer end, it checks if the Camera control is streaming anything. For a laptop device it will be blank as there is no secondary camera. If the stream is blank, it will switch to primary camera and reset the timer start variable.
Note: Resetting the timer variable (StartTimer) is necessary for running the timer again if needed.
DEMO
This post shows how to detect the device on which an app is being run and auto set the camera control configuration. This can be integrated in the canvas app to make your apps auto switch the camera settings based on the device.
I hope this was useful for you. In case of any questions or suggestions, feel free to reach me out on twitter at @agarwal_ritika
Comments