Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

(Difference between revisions)

Capturing image using QML Camera and uploading to Facebook

From Wiki
Jump to: navigation, search
kiran10182 (Talk | contribs)
chintandave_er (Talk | contribs)
(Chintandave er - used gallery control for pictures)
Line 33: Line 33:
This article explain how to use QML Camera element to capture image  and then how to upload and share captured image to Facebook, using Qt Network Module. Following are snaps from my sample application running on N9.
This article explain how to use QML Camera element to capture image  and then how to upload and share captured image to Facebook, using Qt Network Module. Following are snaps from my sample application running on N9.
<gallery widths="460px" heights="200">
File:fbhelper_main.png| Take picture
File:fbhelper_preview.png | Captured picture
File:fbhelper_login.png | Facebook loging
File:fbhelper_success.png| Picture uploaded
'''Let's start with How to capture image using QML Camera.'''
'''Let's start with How to capture image using QML Camera.'''

Revision as of 08:47, 8 May 2012

This article explains how to capture image using QML Camera and upload to Facebook

Article Metadata
Created: kunal_the_one (30 Apr 2012)
Last edited: chintandave_er (08 May 2012)

  1. How to use QML Camera element to capture Image
  2. How to login to facebook using QNetworkAccessManager
  3. How to use HTTP Post method to upload capture image to facebook album

Note.pngNote: This is an entry in the PureView Imaging Competition 2012Q2


This article explain how to use QML Camera element to capture image and then how to upload and share captured image to Facebook, using Qt Network Module. Following are snaps from my sample application running on N9.

Let's start with How to capture image using QML Camera.

QML Camera is part of Qt Mobility API, so you need to configure Qt's Project file to to include Qt Mobility package. We also need to use Network,Webkit and Declarative Module. For symbian we also need to specify capability to be able to connect to network, saving file, accessing camera.

QT += network webkit declarative
CONFIG += mobility
MOBILITY = multimedia
symbian {
TARGET.CAPABILITY += NetworkServices \
ReadUserData \
WriteUserData \
LocalServices \

Now our project file is ready, We can continue with QML code. Following is QML code for main.qml which I launch from main.cpp file. In Following code I am using QML Camera to display camera view and capture image with it. Once image is captured I am hiding Camera element and showing preview view.

PreviewImage view shows captured image and it offer option to share it on Facebook. To avoid QML component dependency I have create a simple custom Button element and using it.

import QtQuick 1.1
import QtMultimediaKit 1.1
Rectangle {
Camera {
focus : visible // to receive focus and capture key events when visible
opacity: 1
flashMode: Camera.FlashRedEyeReduction
whiteBalanceMode: Camera.WhiteBalanceFlash
exposureCompensation: -1.0
onImageCaptured : {
console.debug("Captured Image:" +preview);
preview.source = preview;
onImageSaved: {
console.log("Image saved:"+path);
anchors.verticalCenter: parent.verticalCenter
onClicked: {
opacity: 0
onHide: {

Following is PreviewImage.qml file. PreviewImage view is enabled when Image is captured, it show captured image and by pressing share button it upload the captured image on Facebook account.

import QtQuick 1.1
import QtMultimediaKit 1.1
Item {
property alias source:previewImage.source
property Camera camera;
property variant currentImage;
signal hide();
Image {
anchors.verticalCenter: parent.verticalCenter
enabled: false
onClicked: {
console.log("share image"+currentImage);
if( FbHelper.isAuthorized() ) {
} else {
target: camera
onImageSaved: {
currentImage = path;

Now that, image is captured, We need code that allow user to login to his facebook account and upload pohto.

I have create a post some time back, how to login to facebook and how to post comment on wall. Here is link I will use same code here to login to facebook account using QNetworkAccessManager.

First of all to login on facebook account and posting on wall or uploading photo, we need to create a application on faceook. Here is link where you can create a app. You will get applicaiton id, using which you request authorization token from facebook, which can be used to upload photo on facebook. Following is code to get authorization token from facebook.

Login method will launch facebook login webpage in QWebView, Once user enteres a valid username and password, it will redirects to url with access token mentioned in query string.

void FacebookHelper::login( const QString& scope ){
QUrl url("");
//view = new QWebView();
view->load( url );
void FacebookHelper::loginResponse( bool status ){
QUrl url= view->url();
QString strUrl = url.toString();
int sIndex = strUrl.indexOf("access_token=");
int eIndex = strUrl.indexOf("&expires_in");
if( sIndex != -1 && eIndex != -1 ){
mAccessToken= strUrl.mid(sIndex, eIndex - sIndex);
mAccessToken = mAccessToken.remove("access_token=");
emit authStatus( mAccessToken);

Now we have access token, we are ready to upload photo to facebook. Following code describe the process. uploadPicture method takes absolute path to picture to upload and comment for photo, then it creates form-data request and send that to facebook using HTTP Post method.

void FacebookHelper::uploadPicture(const QString& picLocation, const QString& comment) {
QString uploadUrl = ""+ mAccessToken;
QFileInfo fileInfo(picLocation);
QFile file(picLocation);
if (! {
qDebug() << "Can not open file:" << picLocation;
QString bound="---------------------------723690991551375881941828858";
QByteArray data(QString("--"+bound+"\r\n").toAscii());
data += "Content-Disposition: form-data; name=\"action\"\r\n\r\n";
data += "\r\n";
data += QString("--" + bound + "\r\n").toAscii();
data += "Content-Disposition: form-data; name=\"source\"; filename=\""+file.fileName()+"\"\r\n";
data += "Content-Type: image/"+fileInfo.suffix().toLower()+"\r\n\r\n";
data += file.readAll();
data += "\r\n";
data += QString("--" + bound + "\r\n").toAscii();
data += QString("--" + bound + "\r\n").toAscii();
data += "Content-Disposition: form-data; name=\"message\"\r\n\r\n";
data += comment.toAscii();
data += "\r\n";
data += "\r\n";
QNetworkRequest request(uploadUrl);
request.setRawHeader(QByteArray("Content-Type"),QString("multipart/form-data; boundary=" + bound).toAscii());
request.setRawHeader(QByteArray("Content-Length"), QString::number(data.length()).toAscii());
mCurrentRequest =,data);

Once we received finished signal for this request, Photo should appear on user's account.


By using QML Camera and QNetowkAccessManager we can easily capture and share image to facebook network. Hope you enjoy the article.

Here is projects's source file, you can use for tyring it out yourself. Remember to put your Facebook's app id, in main.cpp file, before using it.

213 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.