• Commodity
  • 3 minutes to read

You can add images, audio and video files to a sail app. Add together video from streaming services such equally Microsoft Stream, Azure Media Services, or 3rd party streaming services, such as YouTube. Or employ input controls such as Pen Input to collect signatures.

This article walks you through working with multimedia, streaming, and input control scenarios. The data source used in this article is an Excel file in OneDrive for Business.

Prerequisites

Sign up for Power Apps, and and then sign in using the aforementioned credentials that you lot used to sign up.

Sentry this video to acquire how to use multimedia files in canvass apps:

You can choose the kind of media file to add (for example, images, video, or sound). You lot can add images using the media pane, or using the images command.

Media pane.

Add images, audio, or video using the media pane

To utilize the Media pane to add, remove or use media files in your app:

  1. Select Media from the left pane.

    Media.

  2. Select Upload from the media console.

    Upload media.

  3. Select the file(s) that you want to add together, and then select Open.

  4. Select the file from the media pane to insert into the screen.

    Add media.

  5. Save and Publish you lot app.

  6. Share app with others.

Add images, audio, or video using the controls

To add images, audio or video using the Paradigm, Audio or Video controls:

  1. Select Insert from the top menu.

  2. Select Media driblet-down.

  3. Choose from Image, Audio, or Video controls.

For Paradigm command, update the Image holding with the image file name, without extension. For Audio or Video control, update the Media belongings with the file name, or the URL such as YouTube video URL in double quotation marks.

  1. From your Azure Media Services account, upload and publish your video nugget from AMS > Settings > Assets.

  2. Afterward the video is published, copy its URL.

  3. From Power Apps, add the Video control from Insert > Media.

  4. Gear up the Media belongings to the URL that you copied.

    As this graphic shows, you can choose any streaming URL that Azure Media Services supports:

    Set media property.

  5. Salvage and Publish you app.

  6. Share app with others.

To larn how to add together a Microsoft Stream video control, go to Microsoft Stream video command example.

Add images from the cloud to your app

In this scenario, you save images in a cloud storage account, OneDrive for Business. You use an Excel table to contain the path to the images, and y'all display the images in a gallery control in your app.

This scenario uses the CreateFirstApp.naught that contains some .jpeg files.

Note

The path to these images in the Excel file must employ frontwards slashes. When Power Apps saves paradigm paths in an Excel table, the path uses backslashes. If y'all use image paths from such a table, modify the paths in the Excel table to use forward slashes instead of backslashes. Otherwise, the images won't brandish.

  1. Download CreateFirstApp.zip, and extract the Avails folder to your deject storage business relationship.

  2. Rename the Assets folder to Assets_images.

  3. In an Excel spreadsheet, create a one-column table, and fill information technology with the following data.

    Jackets table.

    To copy the file path from OneDrive for Business concern, select a file, and then select Path (Re-create straight link) from the details pane on the right side of the screen.

  4. Name the tabular array Jackets, and proper noun the Excel file Avails.xlsx.

  5. In your app, add the Jackets tabular array equally a data source.

  6. Optionally, update your app orientation to Landscape.

  7. Select Insert > Gallery, and so select Horizontal.

  8. Optionally, select text field and then the heading field under the first image, and delete them to keep only images on the screen.

    Delete fields.

    If yous run across a formula error, press Ctrl+Z to undo the delete and then ensure to first delete the Subtitle field and and so the Title field.

  9. Set the gallery's Items belongings of the gallery to Jackets.

    Items property.

  10. Select the get-go image in the gallery, and set its Image property to ThisItem.Images:

    Items images.

    The gallery is automatically updated with the images:

    Jacket images.

    When y'all set the Items property, a cavalcade named PowerAppsId is automatically added to the Excel table.

  11. Salve and Publish you app.

  12. Share app with others.

Upload pen drawings to the cloud

In this scenario, you larn how to upload pen drawings to your data source, OneDrive for Business, and examine how the drawings are stored in that location.

  1. In Excel, add Image [prototype] to cell A1.

  2. Create a table using the following steps:

    1. Select cell A1.

    2. On the Insert ribbon, select Tabular array.

    3. In the dialog box, select My table has headers, and then select OK.

      Create a table.

      Your Excel file is at present in a table format. For more information about table formatting in Excel, see Format the information every bit a tabular array.

    4. Proper name the table Drawings:

      Rename table to Drawings.

  3. Save the Excel file to OneDrive for Business every bit SavePen.xlsx.

  4. In Power Apps, create a blank app with Tablet layout.

  5. In your app, add together the OneDrive for Business business relationship every bit a data source:

    1. Select View card, and then select Data sources.

      Choose data source.

    2. Select Add together data source, and and then select OneDrive for Business concern.

    3. Select SavePen.xlsx.

    4. Select the Drawings table, and so select Connect.

      Connect.

      Now, the Drawings table is listed equally a data source.

  6. Select Insert > Input, and then select Pen Input.

  7. Rename the new command MyPen:

    Rename.

  8. On the Insert tab, add a Button control, and set its OnSelect belongings to this formula:

    Patch(Drawings, Defaults(Drawings), {Epitome:MyPen.Image})

    Button OnSelect.

  9. Add together a Horizontal gallery control (Insert tab > Gallery).

  10. Optionally, select text field and so the heading field under the showtime prototype, and delete them to keep only images on the screen.

    Delete fields.

    If you run across a formula error, press Ctrl+Z to undo the delete and so ensure to offset delete the Subtitle field and and then the Title field.

  11. Set gallery Items belongings to Drawings. The Prototype belongings of the gallery control is automatically set to ThisItem.Image.

    Accommodate the controls so that your screen resembles as shown below:

    Sample screen.

  12. Printing F5, or select Preview ( Preview button. ).

  13. Draw something in MyPen, and then select the button.

    The kickoff paradigm in the gallery control displays what you drew.

  14. Add something else to your drawing, and select the button.

    The second image in the gallery control displays what you lot drew.

  15. Close the preview window by pressing Esc.

    In your cloud storage account, a SavePen_images folder has been automatically created. This folder contains your saved images with IDs for their file names. To show the folder, you lot may demand to refresh the browser window by, for example, pressing F5.

    Note

    The folder proper noun may be different if your Excel file name is different. For example, if your file name is Pen.xlsx, the binder name will be Pen_images.

    In SavePen.xlsx, the Epitome column specifies the path to the new images.

  16. Save and Publish y'all app.

  17. Share app with others.

You tin remove all unused media from the app to clean up or reduce the size of the app using Media > Remove unused media option.

Remove unused media from the app

Known limitations

  • To enable better performance while loading an app, following size restrictions apply:
    • The full size of all media files uploaded to an app can't exceed 200 MB.
    • Maximum size of an individual media file in an app tin can't exceed 64 MB.
  • Supported media file types: .jpg, .jpeg, .gif, .png, .bmp, .tif, .tiff, .svg, .wav, .mp3, .mp4, .wma, .wmv.
  • Deject-storage known limitations apply when connecting your app with deject-based storage.

See also

  • Control reference
  • Working with formulas