Camera control doesn't display selected camera and option for shutter sound effect on Android wanted

[dime2022]

@RandyHayes @Drrickryp @BCBuizer @NandiniBhagya20 

I built a custom PowerApps canvas app. On one screen there is a camera control, a dropdown menu to select the various cameras on the device, some text in a text label and a button to navigate to the next page (after the user has taken a photo). The next page contains a form which collects the date and time for the current activity by means of a text input control, the photo taken using an image control and three other text input controls which hold plain text information.

However, there are two issues with the camera control:

1) When we test the app on an older iPhone, the "shutter" sound is being played when tapping and taking a photo with the camera. However, this doesn't happen when testing the app on two separate Android devices (this is probably related to whether or not the OS being used has this feature). Is there a fix for that? Can a sound be played or is it possible to display some animation/text/give the camera some animated border effect that confirms to the user, when no photo and then respectively a photo has been taken?

2) When the user progresses to the last page containing the form and where the photo taken is displayed in the image control, an issue arises with the behavior of the camera control. We decided to add a back arrow that navigates to the previous page so the user can retake the photo if it for some reason isn't satisfactory. This in turn removes the photo from local storage and repeats the process of taking a new photo, which is what we want. However, when navigating to the previous page on the Android devices, the camera control displays a black screen and the error message as seen in this post (black image with white text).

https://powerusers.microsoft.com/t5/Building-Power-Apps/Camera-isn-t-set-up-properly-message-appeari...

The only way of getting the camera to work/activate it again is by selecting one of the other cameras from the dropdown or pushing the on/off-button on the Android device twice in rapid succession, which is a real issue. This behavior doesn't happen with the older iPhone though, which might indicate an issue with the OS/PowerApps or a camera issue on older vs newer devices.

Is there any way of fixing this problem?

I am respectfully addressing and including some of the best professionals of this forum in the top of this post.

[dime2022]

*bump*

Does anyone have some input on the above, please? Thanks.

[JasonWS · Accepted solution]

As for question number 1, I was able to build my own animation using a couple of timers. I wanted to give users a five second countdown before the photo was taken to give them time to position a webcam over transmission type-plates, so I have a label overlaying the camera control that displays the countdown:

With(
    {tmr: tmr_CountDown.Value},
    If(
        tmr > 0000 && tmr < 1000,
        "5",
        tmr > 1000 && tmr < 2000,
        "4",
        tmr > 2000 && tmr < 3000,
        "3",
        tmr > 3000 && tmr < 4000,
        "2",
        tmr > 4000 && tmr < 5000,
        "1"
    )
)

Then in the OnTimerEnd attribute of the timer, I am collection the image into a collection, however this did not work with Camera1.Photo. I instead had to use Camera1.Stream.

Then for my photo "taken" animation, I have a 750ms timer triggered after the Camera1.Stream collection, with a rectangle over the camera control that has the following in the Fill attribute:

RGBA(
    255,
    255,
    255,
    1 * ((tmr_PhotoTaken.Duration - tmr_PhotoTaken.Value) / tmr_PhotoTaken.Duration)
)

This essentially makes the rectangle full-white, then fades back to transparent, all over 750 ms.

[dime2022]

Hi @JasonWS!

First of all I am sorry for the late answer but I fell ill for the last couple of days and have first returned to work today. Secondly, thank you for your help and time which you put into this effort.

I marked your solution as the accepted solution since you came up with a slick and neat answer on how to approach and solve the problem. Although it is more technical than what I finally came up with myself it's still worth for others, having the same question, to explore and to apply to their application in the future.

What I finally did however, was a more simple and practical solution by adding a label "Photo taken" under the camera control which is set to invisible on load. When the user accesses the camera control, the white border thickness around the camera control changes from a small to a bolder focused border thickness. The on select of the camera then sets the invisible label to true when the focused border thickness is triggered. And the whole thing resets on load again. Voilà!

Anyhow, many thanks for your kind help. Much appreciated!