QML显示摄像头视频的解决方案
版本信息：
Qt Create 4.11.1
Qt 5.14.1
主窗口开始时视频显示代码，主要思路：main.cpp中engine注册方式，使用imageprovide类为视频提供图像源，在前端使用计时器轮换调用摄像头的图像用于视频显示
起初设想：用Connects信号槽连接，在接收到帧时触发信号执行槽函数获取某摄像头的图像，给前端qml发送信号，但是没有成功，究其原因：
后端与前端都创建了Connects，接收对象不同，所以前端接收不到后端发送的信号，要想使用信号处理，必须前端调用后端创建的对象，即：
main.cpp中的CodeImage，留待以后研究，这里使用了计时器在前端定时运行槽函数，在槽函数时发送信号，前端接收信号后，获取图像并image提供相应摄像头的图像，
注意：在前端调用槽函数发送信号，前端才能收到信号，否则收不到信号（试过N遍），原因上面分析过了，不再赘述.
一、在main.cpp中注册cpp，用于整个项目调用
main.cpp中部分代码
#include showimage.cpp
#include "showimage.h"
#include "../../kernel/kernel.h"
ShowImage::ShowImage(QObject *parent) :
QObject(parent)
{
m_pImgProvider = new ImageProvider();
}
void ShowImage::setcamId(int temp)
{
camId=temp;
}
void ShowImage::setImage(int camid)
{
setcamId(camid);
cv::Mat mat=cameraObj[camid].getCurframe2();
QImage img= QImage((const unsigned char*)mat.data,mat.cols,mat.rows,QImage::Format_RGB888);
// img.save("d:/img01.jpg");
// QImage img2("d:/img01.jpg");
m_pImgProvider->img = img;
emit callQmlRefeshImg();
}
showimage.h
#ifndef SHOWIMAGE_H
#define SHOWIMAGE_H
#include mainwindowshowcompent.qml
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
import an.qt.viewDataCamDevelop 1.0
Window {
id:startwindown
visible: true
width: 1500
height: 800
title: qsTr("视频显示窗口")
ViewDataCamDevelop {
id: viewData
}
Timer {
id: refreshTimer
interval: 100 // 1 Hz
running: true
repeat: true
onTriggered: {
for(var i=1;i<=viewData.max_camera_count;i++)
{
CodeImage.setImage(i);
}
}
}
RowLayout
{
id:rowLayout02
anchors.fill: parent
visible: true
ColumnLayout{
id:columnLayout01
visible: true
anchors.top: idmainWindow.top
anchors.left: idmainWindow.left
width: (idmainWindow.width-1050)/2
height:idmainWindow.height-30
Rectangle{
id:leftRectangle01
width: parent.width
height: parent.height/4
opacity: 100
color: "red"
Image{
id:img01
width: parent.width
height: parent.height
}
}
Rectangle{
id:leftRectangle02
width: parent.width
height: parent.height/4
opacity: 100
color: "green"
Image{
id:img02
width: parent.width
height: parent.height
}
}
Rectangle{
id:leftRectangle03
width: parent.width
height: parent.height/4
opacity: 100
color: "blue"
Image{
id:img03
width: parent.width
height: parent.height
}
}
Rectangle{
id:leftRectangle04
width: parent.width
height: parent.height/4
opacity: 100
color: "yellow"
Image{
id:img04
width: parent.width
height: parent.height
}
}
}
ColumnLayout{
id:columnLayout02
visible: true
anchors.left: columnLayout01.right
width: 1050
height:idmainWindow.height-30
Rectangle{
id:centerRectangle
width: parent.width
height: parent.height
opacity: 100
color: "green"
}
}
ColumnLayout{
id:columnLayout03
visible: true
anchors.top: idmainWindow.top
anchors.left: idmainWindow.left
width: (idmainWindow.width-1050)/2
height:idmainWindow.height-30
Rectangle{
id:rightRectangle01
width: parent.width
height: parent.height/4
opacity: 100
color: "red"
Image{
id:img05
width: parent.width
height: parent.height
}
}
Rectangle{
id:rightRectangle02
width: parent.width
height: parent.height/4
opacity: 100
color: "green"
Image{
id:img06
width: parent.width
height: parent.height
}
}
Rectangle{
id:rightRectangle03
width: parent.width
height: parent.height/4
opacity: 100
color: "blue"
Image{
id:img07
width: parent.width
height: parent.height
}
}
Rectangle{
id:rightRectangle04
width: parent.width
height: parent.height/4
opacity: 100
color: "yellow"
Image{
id:img08
width: parent.width
height: parent.height
}
}
}
}
Connections{
target: CodeImage
onCallQmlRefeshImg:{
// img01.source = ""
// img01.source = "image://CodeImg/"+Math.random();
switch(CodeImage.camId)
{
case 1:
img01.source = ""
img01.source = "image://CodeImg/"+Math.random();
break;
case 2:
img02.source = ""
img02.source = "image://CodeImg/"+Math.random();
break;
case 3:
img03.source = ""
img03.source = "image://CodeImg/"+Math.random();
break;
case 4:
img04.source = ""
img04.source = "image://CodeImg/"+Math.random();
break;
case 5:
img05.source = ""
img05.source = "image://CodeImg/"+Math.random();
break;
case 6:
img06.source = ""
img06.source = "image://CodeImg/"+Math.random();
break;
case 7:
img07.source = ""
img07.source = "image://CodeImg/"+Math.random();
break;
case 8:
img08.source = ""
img08.source = "image://CodeImg/"+Math.random();
break;
}
}
}
}
秋风写于淄博，业务联系与技术交流：Q375172665