How to display a stream of image files in Google Colab notebook? Possibly with a time control bar

Question

I have a stream of images and have to display it in Google Colab notebook such that it looks like a video with a control bar. I tried making a gif and playing it in Colab, but it shows the output without the plot. Error is displayed here

Answer 1

Finally found a way. First, we save the image files in a folder. Then, convert these streams of images into a video using the following code.

import cv2
import numpy as np
import glob
 
from IPython.display import HTML
from base64 import b64encode
print("Making Video from plots")
img_array = []
for filename in glob.glob("Simul2/*.jpg"):
    img = cv2.imread(filename)
    height, width, layers = img.shape
    size = (width,height)
    img_array.append(img)


out = cv2.VideoWriter('simul2.mp4',cv2.VideoWriter_fourcc(*'DIVX'), 15, size)

for i in range(len(img_array)):
    out.write(img_array[i])
out.release()
print("Video made successfully")




from IPython.display import HTML
from base64 import b64encode
mp4 = open('simul2.mp4','rb').read()
data_url = "data:simul2/mp4;base64," + b64encode(mp4).decode()
HTML("""
<video width=400 controls>
      <source src="%s" type="video/mp4">
</video>
""" % data_url)

Credits to how play mp4 video in google colab