PDA

View Full Version : To Display Video Frames from webcam on QML



bts-007
4th May 2013, 16:42
I am using opencv to display video frames from web cam on Qt gui. Now I have planed to display it on QML window(without Qt gui). I was trying to use qdeclarative view but I didn’t succeed.
I am attaching the source code for displaying the video on label. In the code I used label (labelInputVideo) and push button to start the frames. Is it possible to display qimage directly on qml.
Thanks in advance

mainwindow.h


#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include <QFileDialog>
#include <opencv2/core/core.hpp>
#include <opencv2/highgui/highgui.hpp>
#include <opencv2/imgproc/imgproc.hpp>
#include <iostream>
#include <QTimer>
#include<QLabel>



namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
Q_OBJECT

public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
QImage qimg;

private slots:
void on_pushButton_clicked();


public slots:
virtual void Frame() ;

private:

cv::Mat image; // the image variable
Ui::MainWindow *ui;
CvCapture *capture; // OpenCV Video Capture Variable
IplImage *frame; // Variable to capture a frame of the input video
cv::Mat source_image; // Variable pointing to the same input frame
QTimer *imageTimer;

};

#endif // MAINWINDOW_H


main.cpp


#include <QtGui/QApplication>
#include "mainwindow.h"

int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;
w.show();
return a.exec();
}


mainwindow.cpp



#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <iostream>
#include <QDeclarativeView>
#include <QDeclarativeComponent>
#include <QDeclarativeItem>
#include<QGridLayout>
#include<QDesktopWidget>

using namespace cv;
Mat cameraFrame;

MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);

const int imagePeriod = 1000/25; // ms

imageTimer = new QTimer(this);

imageTimer->setInterval(imagePeriod);

connect(imageTimer, SIGNAL(timeout()), this, SLOT(Frame()));

// Use the default camera
capture = cvCaptureFromCAM( CV_CAP_ANY );//cvCreateCameraCapture(0);
}


MainWindow::~MainWindow()
{
delete ui;
cvReleaseImage(&frame);
cvReleaseCapture(&capture);
}



void MainWindow::on_pushButton_clicked()
{
if( imageTimer->isActive() )
{
imageTimer->stop();
}
else
{
imageTimer->start();
}

}

void MainWindow::Frame(){
// Capture a frame
frame = cvQueryFrame(capture);

// Point to the same frame
source_image = frame;

// Resize Image
cv::resize(source_image, source_image, cv::Size(1080,960) , 0, 0);

// Change to RGB format
cv::cvtColor(source_image,source_image,CV_BGR2RGB) ;


// Convert to QImage
QImage qimg = QImage((const unsigned char*) source_image.data, source_image.cols, source_image.rows, QImage::Format_RGB888); // convert to QImage

ui->labelInputVideo->setPixmap(QPixmap::fromImage(qimg));

// Resize the label to fit the image
ui->labelInputVideo->resize(ui->labelInputVideo->pixmap()->size());


}

wysota
6th May 2013, 07:59
How exactly didn't you "succeed"?

bts-007
8th May 2013, 17:01
wysota thank you for the reply.
I am using qdeclarative image provider to display image on qml but i am getting an error message "QML Image: Failed to get image from provider: image://colors/test.png"
Here i am attaching the source code

main.cpp


#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
#include <QDeclarativeImageProvider>
#include <QDeclarativeContext>
#include <QDeclarativeEngine>


class ColorImageProvider : public QDeclarativeImageProvider
{
public:
ColorImageProvider()
: QDeclarativeImageProvider(QDeclarativeImageProvide r::Pixmap)
{
}

QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
{
int width = 100;
int height = 50;

if (size)
*size = QSize(width, height);
QPixmap pixmap(requestedSize.width() > 0 ? requestedSize.width() : width,
requestedSize.height() > 0 ? requestedSize.height() : height);
pixmap.fill(QColor(id).rgba());

return pixmap;
}
};

Q_DECL_EXPORT int main(int argc, char *argv[])
{
QScopedPointer<QApplication> app(createApplication(argc, argv));

QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::Screen OrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/declarative_image_provider/main.qml"));
viewer.showExpanded();

QDeclarativeView* view = new QDeclarativeView();
view->engine()->addImageProvider(QLatin1String("color"), new ColorImageProvider);
return app->exec();
}


main.qml



import QtQuick 1.1


Column {
Image { source: "image://colors/test.png" }
Image { source: "image://colors/test.png" }
}

ChrisW67
8th May 2013, 21:39
Seems that you have added your image provider with the name "color" but are trying to access "colors".

bts-007
9th May 2013, 08:25
ChrisW67 I have changed the "color" to "colors". Even though I am getting the same error. I am not sure with the syntax. Is it correct to mention the image name in qml or I should load the image with qpixmap.

bts-007
11th May 2013, 16:18
with no other option I tried the example program from nokia developer site here is the link

http://harmattan-dev.nokia.com/docs/library/html/qt4/qdeclarativeimageprovider.html

when I tried the above example I got an error message "QML Image:Failed to get image from provider: image://colors/yellow"

Here is the code with few changes from example

main.cpp



#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
#include <QDeclarativeEngine>
#include <QDeclarativeImageProvider>


class ColorImageProvider : public QDeclarativeImageProvider
{
public:
ColorImageProvider()
: QDeclarativeImageProvider(QDeclarativeImageProvide r::Pixmap)
{
}

QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
{
int width = 100;
int height = 50;

if (size)
*size = QSize(width, height);
QPixmap pixmap(requestedSize.width() > 0 ? requestedSize.width() : width,
requestedSize.height() > 0 ? requestedSize.height() : height);
pixmap.fill(QColor(id).rgba());

return pixmap;
}
};

int main(int argc, char *argv[])
{
QScopedPointer<QApplication> app(createApplication(argc, argv));

QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::Screen OrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/yellow_red_imageprovider/main.qml"));
viewer.showExpanded();

QDeclarativeEngine engine;
engine.addImageProvider(QLatin1String("colors"), new ColorImageProvider);


return app->exec();
}


main.qml


import QtQuick 1.1

Column {
Image { source: "image://colors/red" }
Image { source: "image://colors/yellow" }
}


I don't know how to solve this problem

bts-007
18th May 2013, 11:58
I made some changes in the main file. getting the same error . what is the solution

main.cpp


int main(int argc, char *argv[])
{
QScopedPointer<QApplication> app(createApplication(argc, argv));


QmlApplicationViewer viewer;
viewer.setOrientation(QmlApplicationViewer::Screen OrientationAuto);
viewer.setMainQmlFile(QLatin1String("qml/yellow_red_imageprovider/main.qml"));
viewer.showExpanded();
//QDeclarativeEngine engine;
//engine.addImageProvider(QLatin1String("colors"), new ColorImageProvider);
viewer.engine()->addImageProvider("colors", new ColorImageProvider);

return app->exec();
}

aamer4yu
10th October 2013, 13:45
May be because you are returning QPixmap instead of QImage ! ??

Sorry,,, Dint see the class QDeclarativeImageProvider properly :( You can use requestPixmap() too