Spaces:
Sleeping
Sleeping
File size: 4,159 Bytes
746d2f1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
---
title: Media elements
slug: /develop/api-reference/media
---
# Media elements
It's easy to embed images, videos, and audio files directly into your Streamlit apps.
<TileContainer>
<RefCard href="/develop/api-reference/media/st.image">
<Image pure alt="screenshot" src="/images/api/image.jpg" />
<h4>Image</h4>
Display an image or list of images.
```python
st.image(numpy_array)
st.image(image_bytes)
st.image(file)
st.image("https://example.com/myimage.jpg")
```
</RefCard>
<RefCard href="/develop/api-reference/media/st.audio">
<Image pure alt="screenshot" src="/images/api/audio.jpg" />
<h4>Audio</h4>
Display an audio player.
```python
st.audio(numpy_array)
st.audio(audio_bytes)
st.audio(file)
st.audio("https://example.com/myaudio.mp3", format="audio/mp3")
```
</RefCard>
<RefCard href="/develop/api-reference/media/st.video">
<Image pure alt="screenshot" src="/images/api/video.jpg" />
<h4>Video</h4>
Display a video player.
```python
st.video(numpy_array)
st.video(video_bytes)
st.video(file)
st.video("https://example.com/myvideo.mp4", format="video/mp4")
```
</RefCard>
</TileContainer>
<ComponentSlider>
<ComponentCard href="https://github.com/whitphx/streamlit-webrtc">
<Image pure alt="screenshot" src="/images/api/components/webrtc.jpg" />
<h4>Streamlit Webrtc</h4>
Handling and transmitting real-time video/audio streams with Streamlit. Created by [@whitphx](https://github.com/whitphx).
```python
from streamlit_webrtc import webrtc_streamer
webrtc_streamer(key="sample")
```
</ComponentCard>
<ComponentCard href="https://github.com/andfanilo/streamlit-drawable-canvas">
<Image pure alt="screenshot" src="/images/api/components/drawable-canvas.jpg" />
<h4>Drawable Canvas</h4>
Provides a sketching canvas using [Fabric.js](http://fabricjs.com/). Created by [@andfanilo](https://github.com/andfanilo).
```python
from streamlit_drawable_canvas import st_canvas
st_canvas(fill_color="rgba(255, 165, 0, 0.3)", stroke_width=stroke_width, stroke_color=stroke_color, background_color=bg_color, background_image=Image.open(bg_image) if bg_image else None, update_streamlit=realtime_update, height=150, drawing_mode=drawing_mode, point_display_radius=point_display_radius if drawing_mode == 'point' else 0, key="canvas",)
```
</ComponentCard>
<ComponentCard href="https://github.com/fcakyon/streamlit-image-comparison">
<Image pure alt="screenshot" src="/images/api/components/image-comparison.jpg" />
<h4>Image Comparison</h4>
Compare images with a slider using [JuxtaposeJS](https://juxtapose.knightlab.com/). Created by [@fcakyon](https://github.com/fcakyon).
```python
from streamlit_image_comparison import image_comparison
image_comparison(img1="image1.jpg", img2="image2.jpg",)
```
</ComponentCard>
<ComponentCard href="https://github.com/turner-anderson/streamlit-cropper">
<Image pure alt="screenshot" src="/images/api/components/cropper.jpg" />
<h4>Streamlit Cropper</h4>
A simple image cropper for Streamlit. Created by [@turner-anderson](https://github.com/turner-anderson).
```python
from streamlit_cropper import st_cropper
st_cropper(img, realtime_update=realtime_update, box_color=box_color, aspect_ratio=aspect_ratio)
```
</ComponentCard>
<ComponentCard href="https://github.com/blackary/streamlit-image-coordinates">
<Image pure alt="screenshot" src="/images/api/components/image-coordinates.jpg" />
<h4>Image Coordinates</h4>
Get the coordinates of clicks on an image. Created by [@blackary](https://github.com/blackary/).
```python
from streamlit_image_coordinates import streamlit_image_coordinates
streamlit_image_coordinates("https://placekitten.com/200/300")
```
</ComponentCard>
<ComponentCard href="https://github.com/andfanilo/streamlit-lottie">
<Image pure alt="screenshot" src="/images/api/components/lottie.jpg" />
<h4>Streamlit Lottie</h4>
Integrate [Lottie](https://lottiefiles.com/) animations inside your Streamlit app. Created by [@andfanilo](https://github.com/andfanilo).
```python
lottie_hello = load_lottieurl("https://assets5.lottiefiles.com/packages/lf20_V9t630.json")
st_lottie(lottie_hello, key="hello")
```
</ComponentCard>
</ComponentSlider>
|