Problem with displaying a recorded video

Using Streamlit
1

Selection_128
Selection_1281500×1602 384 KB

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")
st.video("demo.mp4")
ret = True
record =None

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


while ret:

    ret, frame = cap.read()

    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)
        out.write(frame)

cap.release()
out.release()

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

Any help is appreciated.
Amine.

1 Like
2

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

3

This sounds suspiciously like this issue:

1 Like
4

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

2 Likes
5

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
6

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:
https://docs.streamlit.io/en/latest/api.html?highlight=video#streamlit.video

image
image872×231 25.8 KB

1 Like
7

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?

8

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.

10

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
11

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

1 Like
12

Ohkk Thanks for your help @randyzwitch.

1 Like
13

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

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