Problem with displaying a recorded video

I would like to preview a recorded video (using OpenCV) in the webpage but keep getting this error.
Knowing that I can read on my laptop both videos, the original, and the recorded one.
I have tested on Firefox and Chromium.

On top, I display the original video et on the bottom of the processed one.

Here is a code I used:

import cv2
import streamlit as st 

cap = cv2.VideoCapture("demo.mp4")"demo.mp4")
ret = True
record =None

fourcc = cv2.VideoWriter_fourcc('M', 'J', 'P', 'G')

while ret:

    ret, frame =

    if record is None:
        (H, W) = frame.shape[:2]
        out = cv2.VideoWriter('demo_.mp4',fourcc, 10, (W, H))
        record = True

    if ret==True:
        frame = cv2.flip(frame,0)


video_byte = open("demo_.mp4", 'rb').read()

Any help is appreciated.

I have the exact same problem ! I created an issue on github

This sounds suspiciously like this issue:

I solved the problem, and wrote the answer on github.

1 Like

Thank you @Hadrien-Cornier , I have found exaclty the same solution as you.

I had to install ffmpeg and convert the video demo_input.avi using one line of code
and outputs demo_output.mp4:

ffmpeg -y -i demo_input.avi -vcodec libx264 demo_output.mp4

1 Like

Thanks @amineHY and @Hadrien-Cornier!

We’ve added a note in our documentation for this issue, so hopefully no one gets tripped up by it again:

1 Like

what if i am making a kind of an interface to allow users to input a video file which gets processed with OpenCv and stored in a local directory.
I now want to use this local file to show on the streamlit app.
But for this fix i need to change file format normally?

what should i do to make it an automated pipeline?

Hi @AbhinavKoul, welcome to the Streamlit community!

From what you’ve written, I don’t think there are any issues. A user can upload any video file that OpenCV can handle, which will come in as Bytes from the file_uploader Streamlit widget. When it’s time to write it back to a file post-processing, then you export it using H.264, which will allow it to be shown in the browser/Streamlit.

Thanks a lot @randyzwitch. Was able to successfully do this.
While doing this i faced one issue that it takes a lot of time to process the entire length of video(basically exactly the same time as video length)
Is there any way to fix this or a way where i can show the live changes in file as seen by openCV

1 Like

Unfortunately, since this is a browser-limitation, I don’t think there is any workaround.

1 Like

Ohkk Thanks for your help @randyzwitch.

1 Like

You can simply execute shell commands in the streamlit code like so :

os.system('ffmpeg -i {} -vcodec libx264 {}'.format(outputfile, outputfile.replace('tmp', '')))