Video frames not displaying in the same speed as in the local while hosting it on any cloud platforms while using st.image().

[derickcjohn]

Checklist

• I have searched the existing issues for similar issues.
• I added a very descriptive title to this issue.
• I have provided sufficient information below to help reproduce this issue.

Summary

I'm trying to display a selected video frame by frame using st.image(). When running it locally, the frames are displayed properly without any issues, and it looks like a video. But the frames are not displaying properly. When deploying it on Streamlit Cloud or any other cloud platform, many frames are getting missed.

Reproducible Code Example

import streamlit as st
import os
import cv2

directory_path = os.path.join(os.getcwd(), 'Videos')

video_files = [os.path.basename(f.name) for f in os.scandir(directory_path) if f.is_file() and f.name.endswith('.mp4')]

video_selection = st.selectbox('Select a video file:', video_files)

if video_selection:
    video_path = os.path.join(directory_path, video_selection)
    
    capture = cv2.VideoCapture(video_path)
    placeholder = st.empty()
    
    while capture.isOpened():
        ret, frame = capture.read()
        if ret:
            placeholder.image(frame, channels="BGR", width = 800)
        else:
            break
    capture.release()

Steps To Reproduce

1. Deploy the code in streamlit cloud
2. Create a Videos folder in the same directory as the streamlit-app.py file, and upload at least one .mp4 file in the folder.

Expected Behavior

The frames from the video should be displayed without any delay and breaking, it should appear like a video.

without-bug_vckB3GpA.mp4

Current Behavior

The frames are not displaying properly. Many frames are getting missed and not displaying. From inspecting the page HTML in the browser console, it looks like all the frames are properly generated and stored in Streamlit’s media file manager. The problem seems to be that the frontend doesn’t update fast enough.

with-bug_wIvUgsVq.mp4

Is this a regression?

• Yes, this used to work in a previous version.

Debug info

• Streamlit version: 1.29.0
• Python version: 3.11.0
• Operating System: Windows 10
• Browser: Brave

Additional Information

https://discuss.streamlit.io/t/video-frames-rendering-properly-on-local-but-fails-to-render-on-streamlit-cloud/32838

[github-actions]

If this issue affects you, please react with a 👍 (thumbs up emoji) to the initial post.

Your feedback helps us prioritize which bugs to investigate and address first.

[vdonato]

Hi @derickcjohn, this isn't an issue with the streamlit library. What you're most likely running into is that everything is fine locally because the time it takes to retrieve an image is fast (on the order of 1ms or less). In a deployed app, retrieving each image may take tens to hundreds of milliseconds or more (depending on the speed of your internet connection, your location, and the location of the server where the app is hosted), and thus the time it takes to retrieve a single frame is far longer than the amount of time before the next frame comes in.

There isn't much we can do to fix this issue within streamlit itself since the issue is with limitations due to network latency.

[derickcjohn]

Hi @vdonato Thanks for your reply, but I don't think it is the issue that you have mentioned. Because if you look at the log file that I have shared, you can see that the image source is being generated at a very fast rate, so it is not network issue. The st.image() is not fast enough, at least when being deployed on the cloud to render the images.