To Display Video Frames from webcam on QML

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

Code:

---

#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

Code:

---

#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

Code:

---

#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());
 
 
    }

---

How exactly didn't you "succeed"?

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

Code:

---

#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
#include <QDeclarativeImageProvider>
#include <QDeclarativeContext>
#include <QDeclarativeEngine>
 
 
class ColorImageProvider : public QDeclarativeImageProvider
 {
 public:
     ColorImageProvider()
         : QDeclarativeImageProvider(QDeclarativeImageProvider::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::ScreenOrientationAuto);
    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

Code:

---

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

---

Seems that you have added your image provider with the name "color" but are trying to access "colors".

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.

with no other option I tried the example program from nokia developer site here is the link

http://harmattan-dev.nokia.com/docs/...eprovider.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

Code:

---

#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
#include <QDeclarativeEngine>
#include <QDeclarativeImageProvider>
 
 
class ColorImageProvider : public QDeclarativeImageProvider
{
public:
    ColorImageProvider()
        : QDeclarativeImageProvider(QDeclarativeImageProvider::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::ScreenOrientationAuto);
    viewer.setMainQmlFile(QLatin1String("qml/yellow_red_imageprovider/main.qml"));
    viewer.showExpanded();
 
    QDeclarativeEngine engine;
    engine.addImageProvider(QLatin1String("colors"), new ColorImageProvider);
 
 
    return app->exec();
}

---

main.qml

Code:

---

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

---

I don't know how to solve this problem

I made some changes in the main file. getting the same error . what is the solution

main.cpp

Code:

---

int main(int argc, char *argv[])
{
    QScopedPointer<QApplication> app(createApplication(argc, argv));
 
 
    QmlApplicationViewer viewer;
    viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    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();
}

---

May be because you are returning QPixmap instead of QImage ! ??

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