QML Video alpha-blending/rendering a video into a Qt Quick Scene Graph - qt

I'm trying to get an alpha-blending effect in QML with a video in RGBA.
Now the problem is that the Video Item supplied by QtMultimedia actualy opens an overlaying window in the QtQuick scene, so I don't think it's possible to alpha-blend other QML elements with the Video element (I sure hope I'm wrong, but I can't find a solution).
So another way would be rendering a video myself in a class that inherits from QQuickItem, in the updatePaintNode method.
Has anyone seen anything like this before? Is it even possible if the guys behind QtMultimedia couldn't achieve it?
Can I maybe change the background of the MediaPlayer element, maybe to be transparent or just a color in QML?
So far I was thinking about QAbstractVideoSurface and QVideoFrame but I have no idea how to render it onto the QSG, or even how should the GeometryNode look for a video.
The best solution would be to get the alpha-blending with other QML Elements for example in:
Rectangle {
width: 1024
height: 768
color: "yellow"
focus: true
Video {
id: video
anchors.fill: parent
source: "alpha-video.mov"
autoPlay: true
}
}
Thanks in advance!

I tried a few things, but in the end I used the Qt example called VideoWidget that uses QAbstractVideoSurface and QVideoFrame, and painted the frames in a QQuickPaintedItem, using MediaPlayer to load the data from QML.
It's important to put ARGB32 on top of the QList that describes the supported pixel formats in the QAbstractVideoSurface, unfortunately the Qt logic is that they take the first availibe format and that's why the native Video element doesn't show the alpha channel (it plays the video in RGB32, either that or it's a thing with the overlaying window in the native element instead of painting it in the QtQuick Scene Graph).

Related

Loading all GUI Screens at start of the program in QtQuick

This question is regarding QML, QtQuick 1.1, Qt 4.8.6
I have seen source code of an embedded application, in which all the screens are loaded at start. For Example,
//Main.qml
Rectangle{ //Base Container
width:640
height:480
MainScreen{ id: main_screen} //Individual screen files are given here
SettingScreen1 { id:screen1}
SettingScreen2 { id:screen2}
HelpScreen1 {id: help_screen1}
...
...
...
}
and in the respective screen document, when a mouse area is clicked the Value of Z of the individual document is changed to make it appear front
//MainScreen.qml
Rectangle{
width: 640
height:480
z:1
//some buttons
//Mousearea for next button
onClicked: {screen1.z = 10}
//Mousearea for back button
onClicked: {screen1.z = 0}
}
My question is,
1. As from main.qml all the children are created at once and only their visibility of stack order is changed. Is this a good method?
2. When so many children are loaded at beginning what happens if I have like 200 screens. What is the effect in CPU load at start and while operation.
Is there any other method for screen transitions?
Other than component loader. I don`t want to use that feature
How this code is converted and showed in display as an object?
I will be very happy is least you can give hints in comments.
Thanks!!
To your questions:
1): Bad Idea. Using the z-index needs the engine to determine that the lower items are hidden completely. You should help the enigne if you are sure about this (which would be the case here) by setting the visibility to false. Then however, you would not need to use the z-index at all. Don't use the z-index. Don't!
However this won't solve that you might have 200 possibly complex views in your memory.
The Loader you mentioned is already a better start.
You can use it in combination with the visibility to preload pages that are likely to be shown soon, and unload them once you are sure they are not shown anytime soon (within the next one or two clicks)
2): The effect is: Long time of unresponsivenes until everything is loaded. The documentation sais: Show a splash-screen if you want to do something like this. In order to show the splash-screen, show it, then use a Loader to load all the other stuff... But in general: Don't do it, if not absolutly necessary. Load dynamically. Never use the z-index to hide screens completely. Load only what needs to be loaded... I feel repetitive...

QQuickwidget grab image outside window area

This is a sequel to another question here in which I was not precise while describing my goal.
As mentioned in the linked question, I wish to save a QML which is embedded in a QQuickWidget and it is larger than the window size. The QQuickWindow grabWindow() method captures only the window area and hence I tried the following code after I visually displayed it:
QQuickWidget* content..
content->setSource(QUrl("qml:/main.qml"));
QPixmap *pm = content->grab(QRect(QPoint(0,0),QSize(-1,-1));
pm->save("someFilename.png", 0, 100);
So, it is definitely not the issue of saving image after rendering. The used QML code is just a plain Rectangle. The proposed solutions in the previous question only grabs content falling within the window.
Any suggestions? Thanks! :)
Addendum:
I have tried the following but didn't work:
QImage paintdev(largeWidth, largeHeight, QImage:Format_RBG32);
content->render(paintdev, QPoint(0,0), QRegion(QRect(0,0,largeWidth, largeHeight), QWidget::DrawChildren);
paintdev.save(fileName, 0, 100);
This should by logic solve the issue of window size since there is no window. Any comments?
Ok, so I solved it by manually shifting the QML by the window height and saving all the images from the window captures and collate it to form the original image.
Not too much work though, but I am still mystified by the QWidget render() method which did not work.
Thanks for all the replies!
If your QML content is larger than the window size, the part that is out of screen is not drawn. Hence, there is no way to capture something out of screen, unless you use 2 monitors and extend view. This last approach would work.

Efficient way to mark detected faces

I'm working on a small detection application using OpenCV and Qt.
my question is: what is the efficient way to mark the detected faces with rectangle knowing that I want this rectangles to be clickable in order to trigger some event for each clicked rectangle.
I've made this using a QPushButton ( with transparent background and some colored border) over a QLabel ( that contains the image ).
is there any other obvious way (maybe QSvg or QGraphicsView) ?
If you want to stick to widgets, then your current approach is the most obvious. If there can potentially be hundreds of faces, however, QGraphicsView would be more efficient, as it's designed for that.
If you can use Qt Quick, then using MouseArea and Rectangle within a Repeater would be the simplest approach. Exposing C++ code to QML is really simple, as well.

Is it possible to have a transparent video playing in QT application

Some codecs alow alpha transparency, like flv, Mov and Webm. I am about to build a QT app and i want to know if it will be possible to make a video player using QML which will support transparency and i will be able to see the background of my app even when the video is playing.
You can set a widget to have a level of transparency, so if the video stream is also transparent it should show transparent to the widget and then if the widget is also transparent then through that.
Have you already looked at the QML Video example which ships with the current QTCreator / QT 5.1.1 SDK package?. If you wish to draw a transparent/translucent video window, you can modify the 'opacity' property of a QML VideoOutput element to have translucent Video overlay.
You can build the example if you download and install the SDK.
Here's is the online link to the example:
QML Video Example
Take a close look at this file:
VideoItem.qml
You can modify the opacity as shown below:
import QtQuick 2.0
import QtMultimedia 5.0
VideoOutput {
id: root
height: width
source: mediaPlayer
opacity: 0.7 // Set the opacity as you wish
...
You can play around with the example by importing any type of video files you wish.

QML flickering with Animations on images

I'm writing a QML application that displays a collection images.
To display next and previous image I use a ParallelAnimation to animate the x coordinate translation but the result is ugly: images animate but there is a flicking during the animation.
I've tried with opengl viewport and some optimizations (see here) but no success.
try adding view->setAttribute(Qt::WA_NoSystemBackground);
in main.cpp

Resources