No viewfinder available while trying to display webcam with PySide2

I am working on Ubuntu 20.04 with Python3 and PySide2, Qt is version 5.

I wrote this simple Python script in order to test the ability to save webcam video for a larger project I will later work on.

Basically, I would like that this demo script at first and simply displays the stream coming from the camera, in a widget I named "frame", but it seems I am missing something, because a message gets printed in the terminal:

Starting camera without viewfinder available

I made the GUI within QtCreator, then converted it with pyside-uic.

I applied a black background-color to the widget called "frame". When I click the "Connect" button I would expect to see the video starting and displaying, but the "frame" keeps black and I get the message about the viewfinder in the terminal. Isn't it the viewfinder the place (aka widget ) where the video is displayed?

I feel something is wrong, but I think it could be solved easily, because when I click the button to connect, the webcam's LED (correctly) lights up.

Here it is the python code:

from PySide2.QtMultimedia import QCamera, QCameraInfo, QCamera
from PySide2.QtMultimedia import  *
from PySide2.QtMultimedia import  QCameraViewfinderSettings
from PySide2.QtCore import *
from PySide2.QtGui import *
from PySide2.QtWidgets import *
import MainWindow
import sys
from MainWindow import Ui_MainWindow

class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self, *args, **kwargs):
        super(MainWindow, self).__init__(*args, **kwargs)
        self.setupUi(self)
        self.available_cameras = QCameraInfo.availableCameras()
        print(self.available_cameras[0].description())
        self.camera_combobox.addItem( self.available_cameras[0].description() )
        self.camera_combobox.addItem( self.available_cameras[1].description() )
        self.connect_btn.clicked.connect(self.connect_btn_clicked)

    def connect_btn_clicked(self):
        self.camera = QCamera(self.available_cameras[0])
        self.frame.setSizePolicy(QSizePolicy.Maximum,QSizePolicy.Maximum)
        self.camera.setViewfinder(self.frame)
        self.camera.start()
        
app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec_()

Here it is the MainWindow.py code

# -*- coding: utf-8 -*-

################################################################################
## Form generated from reading UI file 'mainwindow.ui'
##
## Created by: Qt User Interface Compiler version 5.15.1
##
## WARNING! All changes made in this file will be lost when recompiling UI file!
################################################################################

from PySide2.QtCore import *
from PySide2.QtGui import *
from PySide2.QtWidgets import *


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        if not MainWindow.objectName():
            MainWindow.setObjectName(u"MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QWidget(MainWindow)
        self.centralwidget.setObjectName(u"centralwidget")
        self.horizontalLayoutWidget = QWidget(self.centralwidget)
        self.horizontalLayoutWidget.setObjectName(u"horizontalLayoutWidget")
        self.horizontalLayoutWidget.setGeometry(QRect(50, 30, 298, 80))
        self.horizontalLayout = QHBoxLayout(self.horizontalLayoutWidget)
        self.horizontalLayout.setObjectName(u"horizontalLayout")
        self.horizontalLayout.setContentsMargins(0, 0, 0, 0)
        self.label = QLabel(self.horizontalLayoutWidget)
        self.label.setObjectName(u"label")

        self.horizontalLayout.addWidget(self.label)

        self.camera_combobox = QComboBox(self.horizontalLayoutWidget)
        self.camera_combobox.setObjectName(u"camera_combobox")

        self.horizontalLayout.addWidget(self.camera_combobox)

        self.connect_btn = QPushButton(self.horizontalLayoutWidget)
        self.connect_btn.setObjectName(u"connect_btn")

        self.horizontalLayout.addWidget(self.connect_btn)

        self.frame = QFrame(self.centralwidget)
        self.frame.setObjectName(u"frame")
        self.frame.setGeometry(QRect(60, 210, 301, 171))
        sizePolicy = QSizePolicy(QSizePolicy.Expanding, QSizePolicy.Expanding)
        sizePolicy.setHorizontalStretch(0)
        sizePolicy.setVerticalStretch(0)
        sizePolicy.setHeightForWidth(self.frame.sizePolicy().hasHeightForWidth())
        self.frame.setSizePolicy(sizePolicy)
        self.frame.setStyleSheet(u"background-color: rgb(0, 0, 0);")
        self.horizontalLayout_2 = QHBoxLayout(self.frame)
        self.horizontalLayout_2.setObjectName(u"horizontalLayout_2")
        self.horizontalLayoutWidget_2 = QWidget(self.centralwidget)
        self.horizontalLayoutWidget_2.setObjectName(u"horizontalLayoutWidget_2")
        self.horizontalLayoutWidget_2.setGeometry(QRect(60, 110, 291, 51))
        self.horizontalLayout_3 = QHBoxLayout(self.horizontalLayoutWidget_2)
        self.horizontalLayout_3.setObjectName(u"horizontalLayout_3")
        self.horizontalLayout_3.setContentsMargins(0, 0, 0, 0)
        self.capture_btn = QPushButton(self.horizontalLayoutWidget_2)
        self.capture_btn.setObjectName(u"capture_btn")

        self.horizontalLayout_3.addWidget(self.capture_btn)

        self.record_btn = QPushButton(self.horizontalLayoutWidget_2)
        self.record_btn.setObjectName(u"record_btn")

        self.horizontalLayout_3.addWidget(self.record_btn)

        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QMenuBar(MainWindow)
        self.menubar.setObjectName(u"menubar")
        self.menubar.setGeometry(QRect(0, 0, 800, 26))
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QStatusBar(MainWindow)
        self.statusbar.setObjectName(u"statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)

        QMetaObject.connectSlotsByName(MainWindow)
    # setupUi

    def retranslateUi(self, MainWindow):
        MainWindow.setWindowTitle(QCoreApplication.translate("MainWindow", u"MainWindow", None))
        self.label.setText(QCoreApplication.translate("MainWindow", u"Device:", None))
        self.connect_btn.setText(QCoreApplication.translate("MainWindow", u"Connect", None))
        self.capture_btn.setText(QCoreApplication.translate("MainWindow", u"Capture", None))
        self.record_btn.setText(QCoreApplication.translate("MainWindow", u"Record", None))
    # retranslateUi

The above code is the output of

pyside2-uic mainwindow.ui -o MainWindow.py

Here is the content of mainwindow.ui

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>800</width>
    <height>600</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralwidget">
   <widget class="QWidget" name="horizontalLayoutWidget">
    <property name="geometry">
     <rect>
      <x>50</x>
      <y>30</y>
      <width>298</width>
      <height>80</height>
     </rect>
    </property>
    <layout class="QHBoxLayout" name="horizontalLayout">
     <item>
      <widget class="QLabel" name="label">
       <property name="text">
        <string>Device:</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QComboBox" name="camera_combobox"/>
     </item>
     <item>
      <widget class="QPushButton" name="connect_btn">
       <property name="text">
        <string>Connect</string>
       </property>
      </widget>
     </item>
    </layout>
   </widget>
   <widget class="QFrame" name="frame">
    <property name="geometry">
     <rect>
      <x>60</x>
      <y>210</y>
      <width>301</width>
      <height>171</height>
     </rect>
    </property>
    <property name="sizePolicy">
     <sizepolicy hsizetype="Expanding" vsizetype="Expanding">
      <horstretch>0</horstretch>
      <verstretch>0</verstretch>
     </sizepolicy>
    </property>
    <property name="styleSheet">
     <string notr="true">background-color: rgb(0, 0, 0);</string>
    </property>
    <layout class="QHBoxLayout" name="horizontalLayout_2"/>
   </widget>
   <widget class="QWidget" name="horizontalLayoutWidget_2">
    <property name="geometry">
     <rect>
      <x>60</x>
      <y>110</y>
      <width>291</width>
      <height>51</height>
     </rect>
    </property>
    <layout class="QHBoxLayout" name="horizontalLayout_3">
     <item>
      <widget class="QPushButton" name="capture_btn">
       <property name="text">
        <string>Capture</string>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QPushButton" name="record_btn">
       <property name="text">
        <string>Record</string>
       </property>
      </widget>
     </item>
    </layout>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>26</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

QCamera needs a QCameraViewfinder which is a widget that allows to display the information captured by QCamera, so you cannot pass a QFrame to it.

import sys

from PySide2.QtWidgets import QApplication, QMainWindow
from PySide2.QtMultimedia import QCamera, QCameraInfo
from PySide2.QtMultimediaWidgets import QCameraViewfinder

from MainWindow import Ui_MainWindow


class MainWindow(QMainWindow, Ui_MainWindow):
    def __init__(self, *args, **kwargs):
        super(MainWindow, self).__init__(*args, **kwargs)
        self.setupUi(self)
        for info in QCameraInfo.availableCameras():
            self.camera_combobox.addItem(info.description(), info)
        self.connect_btn.clicked.connect(self.connect_btn_clicked)

        self.view_finder = QCameraViewfinder()
        self.frame.layout().addWidget(self.view_finder)

    def connect_btn_clicked(self):
        info = self.camera_combobox.currentData()
        self.camera = QCamera(info)
        self.camera.setViewfinder(self.view_finder)
        self.camera.start()


app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec_()