How to add the media elements to the Streamlit Web Interface

Overview

In Python, Streamlit allows us to easily embed images, videos, and audio files into our Streamlit web apps.

To add media elements, we’ll first import the streamlit module with the following command:

import streamlit as st

1. Image

It displays an image or list of images.

Syntax

st.image(image, caption=None, width=None, use_column_width=None, clamp=False, channels="RGB", output_format="auto")

Parameters

• image: This can be a monochrome image or a color image, or an RGBA image. It may be a URL to fetch the image or a path for the local image files, or an SVG XML string, or a list to display multiple images.

• caption: This is an image caption for a single image, but if displaying multiple images, the caption will be a list of captions for each image.

• width: This is the image width. If we pass None, then it means it will use image width but not exceed the width of the column.

• use_column_width: If we set auto, it will be set as the image’s width to its natural size. If we set always or True, it will set the image’s width to the column width. If we set never or False, it means it will set the image’s width to its natural size.

• clamp: This will clamp the image pixel values to a valid range [0-255].

• channels: If image is an nd.array, then this parameter denotes the format used to represent color information.

• output_format: This parameter specifies the format to use when transferring the image data.

Example

Let’s run the app below to first read the image and then display it on the Streamlit web interface.

Explanation

• Line 1: We’ll import the streamlit module.
• Line 2: We’ll import the Image module for image io.
• Line 3: We’ll read the image.
• Line 4: We’ll display an image on the interface with the caption.

2. Audio

It displays an audio player.

Syntax

st.audio(data, format="audio/wav", start_time=0)

Parameters

• data: It can be a file name, a URL pointing to the file to load, and Raw audio data.

• start_time: This is the time from which this element should start playing.

• format: This is the type of audio file. The default type is audio/wav.

Example

Let’s run the app below to play an audio file on the Sreamlit web interface.

Explanation

• Line 1: We’ll import the streamlit module.
• Line 2: We’ll open the audio file audio.mp3.
• Line 3: We’ll read the audio file.
• Line 4: We’ll add the audio file to the audio player on the interface.

3. Video

It displays a video player.

Syntax

st.video(data, format="video/mp4", start_time=0)

Parameters

• data: This can be a file name, a URL pointing to the file to load, and Raw video data.

• start_time: This is the time from which this element should start playing.

• format: This is the type of video file. The default type is video/mp4.

Example

Let’s run the app below to play a video file on the Streamlit web interface.

Explanation

• Line 1: We’ll import the streamlit module.
• Line 2: We’ll open the video file video.mp4.
• Line 3: We’ll read the video file.
• Line 4: We’ll add the video file to the video player on the interface.