Commit 66f709a2 authored by Artem Sidyakin's avatar Artem Sidyakin

Images and videos

- images and videos are back
- some edits
- feng-shui
parent b6c07e0c
# WebGL release
A demo and a blog-post for the WebGL release in Qt 5.12.
Demo application looks like this:
<img src="/../webgl-release-blog/img/webgl-release-mac-camera.png" width="800">
<img src="/../webgl-release-blog/img/webgl-release-mac-photos.png" width="800">
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -36,7 +36,7 @@ If you missed previous blog-posts, here they are:
There is also a <a href="https://www.ics.com/blog/whats-new-qt-510">good article</a> by Jeff Tranter from ICS.
This post is intended to be a kind of an "unboxing" experience from the perspective of an average Qt "user" - I never tried to use Qt Quick WebGL myself, neither did I participate in its development.
This post is intended to be a kind of an "unboxing" experience from the perspective of an average Qt "user" - I never used Qt Quick WebGL streaming myself, neither did I participate in its development.
<a name="what-is-it"><h3>What is it</h3></a>
......@@ -233,22 +233,35 @@ Second tab contains a list of taken photos:
<img class="aligncenter" src="/img/webgl-release-mac-photos.png" title="Qt Multimedia, camera demo application, photos"/>
List of files is provided by <a href="http://doc.qt.io/qt-5/qml-qt-labs-folderlistmodel-folderlistmodel.html">FolderListModel</a>:
<pre class="brush:bash">ListView {
FolderListModel {
folder: "file:" + basePath + "shots/"
nameFilters: ["*.jpg"]
}
model: folderModel
delegate: ItemDelegate {
text: model.fileName
}
}
</pre>
Full application source code is available <a href="https://git.qt.io/arsidyak/webgl-release/tree/master/webgl-release-demo">here</a>.
Now let's see it in action. There are 3 spirits placed on my table, surrounding the camera, and I want to take photos of each. I built and ran the application on device with <code>-platform webgl</code>, and connected to it from Safari on my iPad:
PLACEHOLDER FOR YOUTUBE VIDEO
controlling-the-camera-via-webgl.mp4
<p style="text-align:center;">[embed]https://youtu.be/7MhMZ3qMQNI[/embed]</p>
As you can see, original plan worked out nicely: seeing camera's viewfinder, I can remotely control its position precisely and take photos of the objects I'm interested in.
<a name="use-cases"><h3>Use cases</h3></a>
Most obvious use case for WebGL streaming is the ability to have a decent GUI for some low-end device without GPU, or for a device without any screen at all. For instance, that is a common scenario for industrial automation domain, where you can have lots of headless devices installed all over the factory: they can be distributed over quite a significant area or even mounted in places with hazardous environment - being able to control/configure those remotely comes to be rather handy.
Most obvious use case for WebGL streaming is the ability to have a decent GUI for some low-end device without GPU, or for a device without any display at all. For instance, that is a common scenario for industrial automation domain, where you can have lots of headless devices installed all over the factory: they can be distributed over quite a significant area or even mounted in places with hazardous environment - being able to control/configure those remotely comes to be rather handy.
Reading discussion at <a href="https://news.ycombinator.com/item?id=14718043">Hacker News</a>, I stumbled upon a "reverse" idea: what if it's the other way around, what if "device" is actually a very powerful server, and you work with it from your regular desktop. That way you can can perform some heavy calculations on the server interfacing with it from GUI in your browser.
I would also like to mention our recent <a href="https://www.qt.io/events/remote-ui-with-qt-for-automation-on-arm-based-edge-devices-1539882056/">webinar</a> we had together with Toradex. There you can see an interesting combination of WebGL streaming and <a href="https://doc.qt.io/qt-5/qtremoteobjects-index.html">Remote Objects</a>, which allows you to implement mirroring functionality.
Reading discussion at <a href="https://news.ycombinator.com/item?id=14718043">Hacker News</a>, I stumbled upon a "reverse" idea: what if it's the other way around, what if "device" is actually a very powerful server, and you work with it from your regular desktop. That way you can can perform some heavy calculations on the server having its GUI in your web-browser (<i>which actually begs for an HTML-based frontend but more on this in the <a href="#webgl-streaming-vs-actual-web">next section</a></i>).
Another possible use-case is an anti-piracy measure. Imagine that you want to protect your software from being "cracked". So, if there is nothing running on the client, then there is nothing to crack, your users only have GUI rendered in their browsers, and the actual application is running on your server. Sounds interesting, but there are several drawbacks here:
......@@ -258,7 +271,9 @@ Another possible use-case is an anti-piracy measure. Imagine that you want to pr
Overall, supporting only one connection fairly reduces the number of possible use cases, and unfortunately it is unlikely that current implementation will improve in that regard as it is more of a task for <a href="https://bugreports.qt.io/browse/QTBUG-62425">Qt 6</a>. By the way, there is an idea to complement streaming with an ability of mirroring as in some cases the latter is needed more.
Another noticeable aspect is so-called "zero install" concept - you don't have to install/deploy anything on clients (<i>desktops/tablets/smartphones/etc</i>), the only thing needed is a web-browser.
Speaking about mirroring, I would also like to mention our recent <a href="https://www.qt.io/events/remote-ui-with-qt-for-automation-on-arm-based-edge-devices-1539882056/">webinar</a> we had together with Toradex. There you can see an interesting combination of WebGL streaming and <a href="https://doc.qt.io/qt-5/qtremoteobjects-index.html">Remote Objects</a>, which allows you to implement mirroring functionality as of now already.
Another noticeable aspect is so-called "zero install" concept - you don't have to install/deploy anything on clients (<i>desktops/tablets/smartphones/etc</i>), the only thing needed is a web-browser. However, <a href="http://blog.qt.io/blog/2018/11/19/getting-started-qt-webassembly/">WebAssembly</a> seems to be a bit more suitable for that purpose.
<a name="webgl-streaming-vs-actual-web"><h4>WebGL streaming vs actual web</h4></a>
......@@ -282,4 +297,4 @@ So you're now able to use web-browser as a remote GUI client for your Qt Quick a
In terms of further development, I reckon the next thing to be expected is connection security/encryption, both for WebSocket and WebServer. WebSocket part should be pretty straightforward as <a href="http://doc.qt.io/qt-5/qwebsocket.html">QWebSocket</a> already supports secure connection (<code>wss://</code>). When it comes to WebServer part, if you remember, from the very beginning it was a temporary solution, and research on proper implementation is still ongoing.
Meanwhile, if you have any other feature-request or maybe bugs to report, please use our tracker for that: http://bugreports.qt.io/ (choose <b>QPA: WebGL</b> component). Your feedback will help our product management team to shape roadmap of the feature.
Meanwhile, if you have any other feature-requests or maybe bugs to report, please use our tracker for that: http://bugreports.qt.io/ (choose <b>QPA: WebGL</b> component). Your feedback will help our product management team to shape roadmap of the feature.
......@@ -17,6 +17,7 @@ Item {
ListView {
id: files
anchors.fill: parent
//clip: true
FolderListModel {
id: folderModel
......
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QtDebug>
#include <QDebug>
#include <QCameraInfo>
#include <QDir>
#include "backend.h"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment