Display and shoot webcam video with Python Kivy [GUI]

Introduction

Kivy is a library that allows you to develop GUI applications in Python. It is compatible with multiple platforms and can be used for commercial purposes. This time, I will use Kivy to develop a "GUI application that displays and shoots webcam images"! We are also implementing Kivy to easily convert images into buttons!

** * Detailed usage such as Kivy is omitted **

environment

• macOS Catalina 10.15.5
• Python 3.6.7
• Kivy 1.11.1

pip install

OpenCV

$ pip install opencv-python

Kivy

$ pip install cython pygame pillow
$ pip install Kivy

Practice

Kivy screen creation (Hello World!)

main.py

from kivy.app import App

class MainScreen(Widget):
    pass

class MyCameraApp(App):
    def build(self):
        return MainScreen()

if __name__ == '__main__':
    MyCameraApp().run()

mycamera.kv

<MainScreen>:
    Label:
        text: 'Hello World!'
        center: root.width * 0.5 , root.height * 0.5

I used the Label class to display Hello World !. In Kivy, it is possible to set elements in an HTML-like atmosphere by using a kv file. This time, if Hello World! Is displayed in the middle of the black screen, it is successful.

In the future, we will create a CameraPreview class that displays the acquired image and an ImageButton class for the shooting button, and install them as a kv file in the same way as Label.

Display webcam video

Use OpenCV to get the webcam image as a frame.

Program and description

main.Added to py

from kivy.uix.image import Image
from kivy.graphics.texture import Texture
from kivy.clock import Clock
import cv2

class CameraPreview(Image):
    def __init__(self, **kwargs):
        super(CameraPreview, self).__init__(**kwargs)
        #Connect to 0th camera
        self.capture = cv2.VideoCapture(0)
        #Set drawing interval
        Clock.schedule_interval(self.update, 1.0 / 30)

    #Drawing method to execute at intervals
    def update(self, dt):
        #Load frame
        ret, self.frame = self.capture.read()
        #Convert to Kivy Texture
        buf = cv2.flip(self.frame, 0).tostring()
        texture = Texture.create(size=(self.frame.shape[1], self.frame.shape[0]), colorfmt='bgr') 
        texture.blit_buffer(buf, colorfmt='bgr', bufferfmt='ubyte')
        #Change the texture of the instance
        self.texture = texture

I created a subclass called CameraPreview that inherits from the Image class. This class acquires and updates the webcam image acquired using the opencv-python function. Convert the retrieved frame to Texture format so that it can be displayed in Kivy's Image class.

Next, edit the kv file and reflect it on the screen.

mycamera.kv

<MainScreen>:
    CameraPreview:
        id: camera_preview
        size: root.size

【Caution】 On macOS, if you run the program in a terminal in a third-party editor such as VScode and try to get the webcam image using opencv-python like this program, an error will occur!

Implementation of shooting button

You can use normal buttons, but it's not interesting, so prepare an image like a shooting icon and create a program that allows you to shoot when you click on it. The image has picked up free material appropriately!

Program and description

main.Added to py

from kivy.uix.behaviors import ButtonBehavior
from kivy.properties import ObjectProperty

#Shoot button
class ImageButton(ButtonBehavior, Image):
    preview = ObjectProperty(None)

    #Execute when the button is pressed
    def on_press(self):
        cv2.namedWindow("CV2 Image")
        cv2.imshow("CV2 Image", self.preview.frame)
        cv2.waitKey(0)
        cv2.destroyAllWindows()

In this way, by inheriting not only the Image class but also the ButtonBehavior class, it becomes possible to handle on_press () that is executed when the button is pressed. Override on_press () and rewrite it to the process you want to do.

【important】 Set the ObjectProperty so that it can be referenced in the CameraPreview class. What do you refer to in the variable (preview here) for which ObjectProperty is set? To specify, set in the kv file as follows.

mycamera.kv

<MainScreen>:
    CameraPreview:
        id: camera_preview
        size: root.size
        
    ImageButton:
        preview: camera_preview
        source: 'icons/capture.png'
        size: 100, 100
        center: root.width * 0.5, root.height * 0.2

Declare the variable for which ObjectProperty is set in the Python file in the same way in the kv file, and set the value to the id of the one you want to refer to. (preview: camera_preview part) This allows Kivy to reference values between classes.

Completed program

The program is complete! Let's have Koala, who also appeared at the beginning of the page, appear again. This time, when you click the shooting button, the image is displayed by imshow () of OpenCV, but of course it is possible to rewrite it to the process of saving.

Supplement

If you get the message You might be loading two sets of Qt binaries into the same process. When you press the shoot button, this should help.

$ pip install opencv-python-headless

Reference site

• Kivy Pong Game Tutorial
• Official tutorial
• Takeshi memorandum-Basics of Kv language
• Easy-to-understand summary of how to handle classes in Kivy
• Kivy— Image as Button
• Image buttoning