# 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:

```python
import streamlit as st
```
## 1. Image
It displays an image or list of images.

### Syntax
```python
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.

import streamlit as st
from PIL import Image
image = Image.open('educativeImage.jpg')
st.image(image, caption='Educative')

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


media elements

React

Dart

GoJS React

Typescript React

Vue.js

### 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
```python
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.




import streamlit as st
audio_file = open('audio.mp3', 'rb')
audio_bytes = audio_file.read()
st.audio(audio_bytes, format='audio/mp3')

audio

### 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
```python
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.




import streamlit as st
video_file = open('video.mp4', 'rb')
video_bytes = video_file.read()
st.video(video_bytes)

video

### 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.

dockershots.tar.gz

image

How to add the media elements to the Streamlit Web Interface

Streamlit allows embedding images, audio, and videos in web apps using st.image, st.audio, and st.video functions with specific parameters.