Using multimedia in Microsoft PowerApps

[suvidha1]

Microsoft PowerApps provides an option to add multimedia in the mobile applications. In this blog, I would like to briefly describe how we can use the available media controls in our Apps.

Image: This control is used to display an image from local file or a data source. This control mainly uses Image property where the source of the image is specified.

For example, if we have to display a picture from the web, we need to add an image control in our App screen and then set the Image property to the URL of the picture. We can also show a set of images from records in a data source. Both examples are shown below.

You can read more about Image control and examples at: https://powerapps.microsoft.com/en-us/tutorials/control-image/

Add Picture: This control is used to load images from local device and then update it to a data source.

When we use an Image control alone, there is no option for the end user to update an image on the mobile device. With the Add Picture control, end users will be able to update an Image control and update the data source in turn.

Add Picture control has 2 parts, outer control  (Click once) and inner text control (Click twice). (Note: In the following picture, I have resized the inner text control to distinguish the 2 controls easily)

The following example shows how an Add Picture control can be used.

In a blank screen add an Add Picture control (Note: Make sure the name of inner text control is AddMediaButton1). Below that, add a button and set the Text property to Update and set the OnSelect property to Clear(UploadedPicture); Collect(UploadedPicture, AddMediaButton1.Media). uploaded picture will be locally stored in the App under Collections (Content tab > Collections) and this is achieved using collect function. The previously uploaded picture will be removed first using Clear function.  Below the button, add an Image gallery (Insert tab > Gallery > vertical image only) and set the Items property of the gallery to UpdatedPicture.

Below is the screenshot of the application before and after using an Add Picture control.

More details on Add Picture control at: https://powerapps.microsoft.com/en-us/tutorials/control-add-picture/

Video: This control plays a video clip from a file or from YouTube if we specify an URL. The Media property should point to the source of the video.

More details on Video control at: https://powerapps.microsoft.com/en-us/tutorials/control-audio-video/

Microphone and Audio: Microphone control is used to record sounds and an Audio control is used to play an audio clip from a file or an audio track from a video file or the recording from Microphone control.

Microphone control can record the sound from wherever the app is running and update the data source with this sound. The recorded sound can be locally stored under Collections (Content tab > Collections) and this can be achieved using collect function.

Add a Microphone control in a screen and name it Mic1. Select the control and set the OnStop property to Collect(RecordedSounds, Mic1.Audio). The OnStop property determines how the app responds when the user stops recording with a microphone control. By using Collect function in this property, we are telling the application to save the recorded sound in RecordedSounds collection (If RecordedSounds collection is not available, it will be created automatically).

Place a vertical custom gallery (Under Insert tab > Gallery > Vertical (under Custom Gallery)) below the Microphone control, and set the Items property of this custom gallery to the collection: RecordedSounds. In the template of the custom gallery, insert an Audio control and set the Items property of this audio control to ThisItem.Url

Use the preview button to record a sound using Microphone and play it using Audio control.

More details on Microphone control at https://powerapps.microsoft.com/en-us/tutorials/control-microphone/

More details on Audio control at: https://powerapps.microsoft.com/en-us/tutorials/control-audio-video/

Barcode : This control is used to scan barcodes of type code39,Code128, Ean etc., on your mobile device. To test this control, add a Barcode control in a screen and name it Scanner, set ShowLiveBarcodeDetection property to true and BarcodeType property to BarcodeType.Code39 (or any other type of barcode that you’d like to scan). Below the barcode control, add a text box which reads the barcode and prints the value. Set the Text property to Scanner.Text.

Save and publish the application. On your mobile device (which has camera support), open the app and try to scan a barcode (matching the type you’ve selected in BarcodeType property). The barcode control should be able to scan the barcode and display the barcode text below:

Below picture sows the design and the use of barcode control side by side:

More details on Barcode control at: https://powerapps.microsoft.com/en-us/tutorials/control-barcodescanner/

Camera: A control with which the user can click pictures by using the camera on the device. Insert a Camera control to an empty screen and set the OnSelect property to Clear(Mypix);Collect(Mypix,Camera1.Photo). Tapping on the camera control will click a picture and the picture will be locally stored in the App under Collections (Content tab > Collections) and this is achieved using collect function. The previously uploaded picture will be removed first using Clear function.  Below the camera control, add an Image gallery (Insert tab > Gallery > vertical image only) and set the Items property to Mypix.

Save and publish the application. On your mobile device (which has camera support), open the app and click a picture (tap once on the camera control). A picture should be captured and shown:

Below picture shows the design and the use of camera control side by side:

More details on Camera control can be found at: https://powerapps.microsoft.com/en-us/tutorials/control-camera/

You may also like to read the following blog which covers similar topics: https://powerapps.microsoft.com/en-us/tutorials/add-images-pictures-audio-video/

[hpkeong]

hi

Thanks for sharing.

May we always use ClearCollect(X,..) at the same time instad of Clear(X); Collect(X,..)?

Just sharing.

[Audrie-MSFT]

This is such an awesome example of using media in our apps! P.S. Those puppies are too cute! Thank you for sharing this with the community. We love hearnig from you!-Audrie

[UB400]

Thanks for sharing this excellent articel. I have a question on using the video control. I want to display videos in a gallery with the URL stored in a CDS entity. If I store it without quotes it works on a Windows Pc, but does not work on IoS devices. the only success I've had with IoS devices is when you embed the link directly into the Video Control, as you've done in your example in this blog. Any suggestions?

[Anonymous]

Great article.

I am looking for more details on the options available for storing microphone captured audio files. 

I am only able to save them to local file storage on mobile devices.  I would like to be able to capture microphone audio using the Android or iOS apps and move them to blob storage. 

I've tried to adapt this example for the storage of Audio into OneDrive storage, but haven't had been able to get it to work. 

I have tried Patch calls to move microphone captured audio into various data sources without success. It seems only a string reference to the local file storage path is stored (rather than the file). 

Can you offer any direction / advice / examples of storing captured mic audio into datasources? 

Thank you!

[AdrianMitroiu]

Hi there,

I am trying to add a picture in my app via "Add Image" and send the added/taken picture to SharePoint.

First of all, I add the picture to a collection and instead of a picture, it saves a strig. Something like this: "appres://blobmanager/xxxxxxxxxxxxxxxxxxx/xxxxxxxxxxxx/x".

Do you have any idea how can I convert this in app or using flows to add the added/taken picture to my SharePoint folder?

Best regards!

[robertinligo]

Great article but useless, it says nothing about saving the data or recalling it