User control assertion error: Control must be added to the page first

[cornelius080]

Question

Hi all,
I'm trying to display the video captured from the webcam into a Flet app with a container and a button to start/stop capturing. All about webcam operations, performed through the Opencv library, are defined into a separated class that represent an User Control that corresponds to an image. The User control is defined into the main() but is added to the page into the button_on_click event. In the same method, there is also the call to the function to switch off the webcam (dispose()).
After pressing the button some time, I got the exception: assertion error: Control must be added to the page first
Does anyone have some tips to prevent this error?

Code sample

import flet as ft
import cv2
import base64

class WebcamManager(ft.UserControl):
    def __init__(self):
        super().__init__()
        self.isolated = True
        self.webcam = None
                 
    def initialize(self):
        try:
            self.webcam = cv2.VideoCapture(index=0, apiPreference=cv2.CAP_DSHOW)
            if not self.webcam.isOpened():
                print("Cannot open camera")
                exit()
            else:    
                # Set new capture properties
                ret = self.webcam.set(cv2.CAP_PROP_FRAME_WIDTH, value=1280.0)
                ret = self.webcam.set(cv2.CAP_PROP_FRAME_HEIGHT, value=720.0) 

                print("webcam.isOpened(): ", self.webcam.isOpened())
        except Exception as e:
            print(e)


    def capture_from_webcam(self):
        while self.webcam.isOpened():
            ret, frame = self.webcam.read()
            if ret:
                frame = cv2.resize(frame,(854,480))
                _, img_arr = cv2.imencode('.png', frame)
                img_b64 = base64.b64encode(img_arr)
                self.img.src_base64 = img_b64.decode("utf-8")
                self.img.update()    

    def dispose(self):
        try:
            self.webcam.release()
            print("webcam.isOpened(): ", self.webcam.isOpened()) 
        except Exception as e:
            print(e)

    # build() method is called when the control is being created and assigned its self.page.
    def build(self):
        self.img = ft.Image(
            border_radius=ft.border_radius.all(20)
        )
        return self.img
    
    # did_mount() method is called after the control is added to the page and assigned transient uid.
    def did_mount(self):
        print("DID MOUNT: CONTROL UID", self.uid)
        self.capture_from_webcam()
    
    # will_unmount() method is called before the control is removed from the page.
    # def will_unmount(self):
        # try:
        #     self.webcam.release()
        #     print("webcam.isOpened(): ", self.webcam.isOpened()) 
        # except Exception as e:
        #     print(e)
        

def main(page: ft.Page):       
   
    def button_play_clicked(e):
        if e.control.data: # case: running -> not running
            button_play.data = False
            button_play.icon = ft.icons.CAMERA
            button_play.tooltip="Turn on webcam" 
                
            cont.content = None
            camManager.dispose() 

        else:# case: not running -> running
            button_play.data = True
            button_play.icon = ft.icons.CAMERA_OUTLINED
            button_play.tooltip="Turn off webcam"   

            camManager.initialize()
            cont.content = camManager
         
        page.update()
        

    camManager = WebcamManager()  
    cont = ft.Container(border=ft.border.all(3, ft.colors.RED), width=854, height=480, 
    )
    button_play = ft.IconButton(icon=ft.icons.CAMERA, icon_size=46, 
                                on_click = button_play_clicked, data = False, tooltip="Turn on webcam"
    )

    page.add(ft.Column(
        controls=[cont, button_play], 
        horizontal_alignment = "center", 
        alignment = "center", )    
    )
    page.window_maximized = True
    page.scroll = ft.ScrollMode.AUTO
    page.horizontal_alignment = "center"
    page.vertical_alignment = "center"
    page.update()

ft.app(target=main, assets_dir="assets")

Error message

Future exception was never retrieved
future: <Future finished exception=AssertionError('Control must be added to the page first.')>
Traceback (most recent call last):
  File "c:\Users\idoec\miniconda3\Lib\concurrent\futures\thread.py", line 58, in run
    result = self.fn(*self.args, **self.kwargs)
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "C:\Users\idoec\Desktop\FLET\WebcamApp\main.py", line 114, in button_play_clicked
    page.update()
  File "c:\Users\idoec\miniconda3\Lib\site-packages\flet_core\page.py", line 303, in update
  File "c:\Users\idoec\miniconda3\Lib\site-packages\flet_core\page.py", line 303, in update
    self.__handle_mount_unmount(*r)
  File "c:\Users\idoec\miniconda3\Lib\site-packages\flet_core\page.py", line 448, in __handle_mount_unmount
    ctrl.did_mount()
  File "C:\Users\idoec\Desktop\FLET\WebcamApp\main.py", line 79, in did_mount
    self.capture_from_webcam()
  File "C:\Users\idoec\Desktop\FLET\WebcamApp\main.py", line 57, in capture_from_webcam
    self.img.update()
  File "c:\Users\idoec\miniconda3\Lib\site-packages\flet_core\control.py", line 286, in update
    assert self.__page, "Control must be added to the page first."
AssertionError: Control must be added to the page first.

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[ingdesarr1]

The error occurs due to the image update that is being performed in the function capture_from_webcam. I see that you delete the class camManager when the button is pressed, maybe this will generate the error. Myabe you can create a new function to clean the space, but not delete the class

[cornelius080]

I used a confounding name. camManager.dispose() doesn't delete the class, but turns off the webcam.