Python Forum
[Tkinter] Overlay Still Image on Webcam Video
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[Tkinter] Overlay Still Image on Webcam Video
#1
I have a program that opens video from the webcam and then performs functions such as saving an image and mirroring the live video. I am looking to add an overlay function where the user selects a PNG file that is overlayed on the webcam video. It works if I comment out the update function (line 32) in my code but then i have no webcam video displaying. Any help greatly appreciated. Thanks
from tkinter import *
import cv2
from PIL import Image, ImageTk
import time
from tkinter import filedialog


class App:
    def __init__(self, video_source=0):
        self.appName = "Kamera"
        self.window = Tk()
        self.window.title(self.appName)
        self.window.resizable(0, 0)
        # self.window.wm_iconbitmap("cam.ico")
        self.window['bg'] = 'black'
        self.video_source = video_source

        self.vid = MyVideoCapture(self.video_source)
        # self.label = Label(self.window, text=self.appName, font=15, bg='blue', fg='white').pack(side=TOP, fill=BOTH)
        self.canvas = Canvas(self.window, width=self.vid.width, height=self.vid.height, bg='red')
        self.canvas.pack()

        self.btn_snapshot = Button(self.window, text="Snapshot", width=5, command=self.snapshot)
        self.btn_snapshot.pack(side=LEFT, padx=10)

        self.btn_flip = Button(self.window, text="Flip Image", width=7, command=self.flip_img)
        self.btn_flip.pack(side=LEFT, padx=10)

        self.btn_overlay = Button(self.window, text="Overlay", width=7, command=self.overlay)
        self.btn_overlay.pack(side=LEFT, padx=10)

        self.update()
        self.window.mainloop()

    def flip_img(self):
        self.vid.flipped = not self.vid.flipped

    def overlay(self):
        file = filedialog.askopenfile(
            mode='rb', defaultextension='.png',title="Choose Overlay Image", filetypes=[("PNG Files", '*.png')])
        if file:
            self.overlay_img = ImageTk.PhotoImage(file=file)
            self.canvas.tag_raise(self.overlay_img)
            self.canvas.create_image(0, 0, image=self.overlay_img, anchor=NW)

    def snapshot(self):
        check, frame = self.vid.getFrame()
        if check:
            filename = filedialog.asksaveasfilename(
                defaultextension='.jpg', title="Choose Filename", filetypes=[("JPEG Files", '*.jpg')])
            # image = "IMG-" + time.strftime("%H-%M-%S-%d-%m") + ".jpg"
            cv2.imwrite(filename, cv2.cvtColor(frame, cv2.COLOR_BGR2RGB))
            # msg = Label(self.window, text='Image Saved' + image, bg='black', fg='green').place(x=430, y=510)

        else:
            messagebox.showerror("paint says", "unable to save image ,\n something went wrong")

    def update(self):
        isTrue, frame = self.vid.getFrame()

        if isTrue:
            self.photo = ImageTk.PhotoImage(image=Image.fromarray(frame))
            self.canvas.tag_lower(self.photo)
            self.canvas.create_image(0, 0, image=self.photo, anchor=NW)

        self.window.after(15, self.update)


class MyVideoCapture:
    def __init__(self, video_source=0):
        self.vid = cv2.VideoCapture(video_source)
        if not self.vid.isOpened():
            raise ValueError("Unable to open this camera \n select another video source", video_source)

        self.width = self.vid.get(cv2.CAP_PROP_FRAME_WIDTH)
        self.height = self.vid.get(cv2.CAP_PROP_FRAME_HEIGHT)

        self.flipped = True

    def getFrame(self):
        if self.vid.isOpened():
            isTrue, frame = self.vid.read()
            if isTrue and self.flipped:
                frame = cv2.flip(frame, 1)
            if isTrue:
                return (isTrue, cv2.cvtColor(frame, cv2.COLOR_BGR2RGB))
            else:
                return (isTrue, None)
        else:
            return (isTrue, None)

    def __del__(self):
        if self.vid.isOpened():
            self.vid.release()


if __name__ == "__main__":
    App()
Reply
#2
What about the overlay image being created inside the update method after it creates the video image if an overlay file has been selected.
Reply
#3
(May-16-2021, 08:56 PM)Yoriz Wrote: What about the overlay image being created inside the update method after it creates the video image if an overlay file has been selected.

Hi. That’s what I was thinking but don’t know how to do it. I don’t know how to pass the image file to update method?
Reply
#4
You could try adding a self.overlay_img = None to the init
class App:
    def __init__(self, video_source=0):
        self.overlay_img = None
Changing overlay to
    def overlay(self):
        file = filedialog.askopenfile(
            mode='rb', defaultextension='.png',title="Choose Overlay Image", filetypes=[("PNG Files", '*.png')])
        if file:
            self.overlay_img = ImageTk.PhotoImage(file=file)
and update to
    def update(self):
        isTrue, frame = self.vid.getFrame()
 
        if isTrue:
            self.photo = ImageTk.PhotoImage(image=Image.fromarray(frame))
            self.canvas.tag_lower(self.photo)
            self.canvas.create_image(0, 0, image=self.photo, anchor=NW)

        if self.overlay_img:
            self.canvas.tag_raise(self.overlay_img)
            self.canvas.create_image(0, 0, image=self.overlay_img, anchor=NW)
 
        self.window.after(15, self.update)
Reply
#5
That works. Thanks once again for all your help! Smile
Yoriz likes this post
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  [PyQt] Embedding a Video in Video Player WhatsupSmiley 0 5,820 Jan-28-2019, 06:24 PM
Last Post: WhatsupSmiley

Forum Jump:

User Panel Messages

Announcements
Announcement #1 8/1/2020
Announcement #2 8/2/2020
Announcement #3 8/6/2020