在做计算机视觉项目时，常常需要打开和显示监控视频画面，对画面进行分析处理。使用OpenCV打开摄像头显示视频画面，视频可以参看：1.3 OpenCV打开本地摄像头并显示视频画面。

本文主要实目前PyQt窗体上显示监控视频画面。视频可以参看：8.2 Python-PyQt：窗体上显示视频图像

一、使用Qt Designer创建窗体

窗体主要两个元素：一个 Label 用来显示图像，一个Push Button 用来打开视频头。

窗体自适应布局,保存窗体文件：yolodet.ui，XML格式保存的。

要在Python中使用这个窗体文件，还需要把yolodet.ui文件编译生成.py文件。在vscode中配置好PyQt后，打开ui文件的右键菜单，很方便把ui文件转换成py文件。

右键菜单

二、实现代码

import sys
import cv2
from PyQt5 import QtCore,QtGui,QtWidgets
from Ui_yolodet import Ui_MainWindow

class MainWindow(QtWidgets.QMainWindow,Ui_MainWindow):
    def __init__(self):
        super().__init__()
        self.setupUi(self)
        
        self.btnopen.clicked.connect(self.Open)
        
    def Open(self):
        cap=cv2.VideoCapture(0)
        while cap.isOpened():
            ret,frame=cap.read()
             #img=QtGui.QImage(frame.data,frame.shape[1],frame.shape[0],QtGui.QImage.Format_BGR888)    
            #重载修复图像显示变形问题      
            img = QtGui.QImage(frame.data, frame.shape[1], frame.shape[0], frame.shape[1] * 3,QtGui.QImage.Format_BGR888)
            
            #设置label高度和宽度
            self.lblimg.setFixedSize(frame.shape[1],frame.shape[0])
                        
            self.lblimg.setPixmap(QtGui.QPixmap.fromImage(img))
            self.lblimg.setScaledContents(True) #自适应大小
            
            QtWidgets.QApplication.processEvents()
        
if __name__ == '__main__':
    app=QtWidgets.QApplication(sys.argv)
    mywin=MainWindow()
    mywin.setObjectName("Yolo3 Detect")
    mywin.show()
    sys.exit(app.exec_())
    

说明：

1、正常情况，使用下面代码来生成QImage，可以显示正常图像，但有时会发现图像会扭曲变形。

img=QtGui.QImage(frame.data,frame.shape[1],frame.shape[0],QtGui.QImage.Format_BGR888)

解决办法：改成如下代码。缘由：QImage每行是按照sizeof(int)对齐的，如果不明确指定最后一个参数，即行字节数，则图像会歪斜。增加第三个参数：frame.shape[1] * 3,

img = QtGui.QImage(frame.data, frame.shape[1], frame.shape[0], frame.shape[1] * 3,QtGui.QImage.Format_BGR888)

2、根据图像的大小来设定Label的大小，以防止视频画面变形

#设置label高度和宽度
self.lblimg.setFixedSize(frame.shape[1],frame.shape[0])

三、运行效果

运行效果：画面显示