Skip to content

Quickstart

Real-time video and audio processing in Streamlit apps ✨

Transform your Streamlit applications with live video and audio streams. streamlit-webrtc bridges the gap between web browsers and Python, enabling real-time media processing with WebRTC technology.

✨ What You Can Build

  • Live video apps - Object detection, image filtering, and video processing in real-time
  • Live audio apps - Live audio filtering, effects processing, and sound analysis in real-time
  • Recording tools - Capture video/audio streams with custom processing pipelines
  • Media streaming - Stream and transform pre-recorded files or live camera feeds
  • Interactive demos - Build engaging ML showcases with immediate visual feedback

🚀 Quick Start

import streamlit as st
from streamlit_webrtc import webrtc_streamer

st.title("Quick Start Example")

# Stream live video and audio from user's camera and microphone
webrtc_streamer(key="example")

🔧 Processing video/audio streams

Real-time video and audio processing with custom frame callbacks:

import av
import streamlit as st
from streamlit_webrtc import webrtc_streamer

# Simple video flip control
flip = st.checkbox("Flip")


def video_frame_callback(frame):
    # Convert video frame to numpy array
    img = frame.to_ndarray(format="bgr24")

    # Apply flip transformation if enabled
    img = img[::-1, :, :] if flip else img

    # Create new frame with processed video
    return av.VideoFrame.from_ndarray(img, format="bgr24")


webrtc_streamer(
    key="video",
    video_frame_callback=video_frame_callback,
    media_stream_constraints={"video": True, "audio": False},
)

import av
import streamlit as st
from streamlit_webrtc import webrtc_streamer

# Simple volume control
volume = st.slider("Volume", 0.0, 2.0, 1.0, 0.1)


def audio_frame_callback(frame: av.AudioFrame) -> av.AudioFrame:
    # Apply volume control to audio samples
    samples = frame.to_ndarray()
    samples = (volume * samples).astype(samples.dtype)  # type: ignore

    # Create new frame with processed audio
    new_frame = av.AudioFrame.from_ndarray(samples, layout=frame.layout.name)
    new_frame.sample_rate = frame.sample_rate
    return new_frame


webrtc_streamer(
    key="audio",
    audio_frame_callback=audio_frame_callback,
    media_stream_constraints={"video": False, "audio": True},
)

import av
import streamlit as st
from streamlit_webrtc import webrtc_streamer

## Video

# Simple video flip control
flip = st.checkbox("Flip")


def video_frame_callback(frame):
    # Convert video frame to numpy array
    img = frame.to_ndarray(format="bgr24")

    # Apply flip transformation if enabled
    img = img[::-1, :, :] if flip else img

    # Create new frame with processed video
    return av.VideoFrame.from_ndarray(img, format="bgr24")


## Audio

# Simple volume control
volume = st.slider("Volume", 0.0, 2.0, 1.0, 0.1)


def audio_frame_callback(frame: av.AudioFrame) -> av.AudioFrame:
    # Apply volume control to audio samples
    samples = frame.to_ndarray()
    samples = (volume * samples).astype(samples.dtype)  # type: ignore

    # Create new frame with processed audio
    new_frame = av.AudioFrame.from_ndarray(samples, layout=frame.layout.name)
    new_frame.sample_rate = frame.sample_rate
    return new_frame


webrtc_streamer(
    key="both",
    video_frame_callback=video_frame_callback,
    audio_frame_callback=audio_frame_callback,
    media_stream_constraints={"video": True, "audio": True},
)

How Frame Callbacks Work

The video_frame_callback and audio_frame_callback functions are called for each frame of media:

  • video_frame_callback(frame) - Receives an av.VideoFrame, processes it, and returns a modified av.VideoFrame
  • audio_frame_callback(frame) - Receives an av.AudioFrame, processes it, and returns a modified av.AudioFrame

These callbacks run in real-time as media flows through your app, allowing you to apply computer vision, audio effects, or any custom processing frame-by-frame.

🎯 Perfect For

  • ML Engineers building interactive demos
  • Researchers prototyping computer vision/audio processing applications
  • Developers creating real-time web experiences
  • Educators teaching with live examples

Ready to get started? Explore the documentation to build your first real-time Streamlit app!

📚 References