Video frames rendering properly on local but fails to render on Streamlit cloud

Hello Community!

I am trying to upload a video file and render it frame by frame using OpenCV’s VideoCapture object. The problem is that the frames are rendered properly on my local system as you can see here:

st_local

However, while deploying it on streamlit Cloud, the frames are not rendered properly as you can see here:
st_cloud_

as you can notice in the Manage app tab, it shows:
MediaFileHandler: Missing file d021d4eba9e69343fdeefd510cd55fc4076876433ca1666098101905.jpg.

My code is simple:

st.title('Video Upload and display')

up_file = st.file_uploader("Upload a Video", ['mp4','mov', 'avi'])

stframe = st.empty()

if up_file:
    
    tfile = tempfile.NamedTemporaryFile(delete=False)
    tfile.write(up_file.read())

    vf = cv2.VideoCapture(tfile.name)  

    while vf.isOpened():
        ret, frame = vf.read()
        if not ret:
            break

        # convert frame from BGR to RGB.
        frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
        stframe.image(frame)
        
    
    vf.release()
    stframe.empty()
    tfile.close()

Can someone please point out if am I missing something here?

Here is my app link and my github repo.

Hi @KD_7 :wave:

Thank you for providing all the relevant info. Unfortunately, this looks like a bug or performance issue in Streamlit Cloud or Streamlit.

Would you mind submitting a bug report via a GitHub issue in the Streamlit repo to bring this issue to the attention of our devs? I was able to reproduce the behavior on Cloud. 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.