Using QtQuickStreaming
QtQuickStreaming Video Captions: Stream QT content directly into the VRED scene, using a newly built script module. Just go to Scripts > QtQuickStreaming. Here you can start a stream, using an .exe file that contains QT content. Now, you must create a web engine that can be linked to the stream, like here in the dashboard example. Within the QtQuickStreaming window, you can add multiple streams and assign them to other parts of your scene, using the Media Editor. Here you can see the QT dashboard content and the QT calendar running at the same time. Your configuration of multiple streams can then be saved by selecting File > Save in the QtQuickStreaming window and stored under the Scripts menu and be loaded from there again, using File > Load in the QtQuickStreaming window.
Another way is to directly start a webstream out of QT Design Studio, for example. Therefore, you have to create a new run configuration within QT Design Studio, using the command that tells the software to stream to a specific port. In this case, I am using the port 8990. This stream is just running in the background and can be used within VRED by using the right URL and port number directly in the Media Editor's web engine, like you can see here. With the new script, you are able to run all your QT content in VRED and save and load configurations, which saves much time in the design process.
Overview
Qt introduced a feature called Qt Quick WebGL streaming for streaming the GUI of a Qt Quick application into a web browser. Show the web page in a Media Editor WebEngine or Sceneplate Editor web frontplate. Connect to the port of the application and stream the Qt Quick GUI into a texture. This is very similar to what can already be done in VRED with HTML5 GUIs.
The new script plugin (Scripts > QtQuickStreaming) creates a convenient UI for starting and stopping Qt Quick applications with WebGL streaming enabled.
Qt Quick applcations will run in the background and as child processes of VRED on the local machine.
For more information about Qt Quick WebGL streaming, please visit: https://blog.qt.io/blog/2018/11/23/qt-quick-webgl-release-512/
Use QtQuickStreaming to stream Qt Quick applications that play their content onto any geometry or frontplates in VRED.
Normal Qt applications that do not use Qt Quick are not supported.
About the QtQuickStreaming Dialog
Icon Bar
Use the tools in the Icons Bar for the following:
Add - Adds a Qt application executable to the list. See step 2 of Playing Streamed Qt Content.
Start all processes - Starts steaming all processes in the QtQuickStreaming dialog.
Stops all processes - Stops steaming all processes in the QtQuickStreaming dialog.
When VRED terminates, all processes are stopped automatically. Only in cases where VRED crashes without a crash report, will the started processes continue to run. Look for these process in the Task Manager.
Deletes all processes - Deletes all processes in the QtQuickStreaming dialog.
Application List
This section of the QtQuickStreaming dialog lists the Qt Quick application executable names, along with the ports used for WebGL streaming. The port number can be changes only when the process is not running (i.e., before it has been started).
These buttons are found next to every executable:
Start - Starts a Qt process.
Stop - Stop a Qt process.
Delete - Stops and deletes a Qt process.
URL - Copies the web URL of the streaming web server to the clipboard. Use this URL for a WebEngine. See step 4 in Playing Streamed Qt Content.
For example, create a WebEngine in Media Editor or a frontplate with type Web in the Sceneplate Editor. Paste the copied URL (it should look like: http://localhost:9000 for port 9000) to the WebEngine and press Enter. If successful, you will see the Qt Quick application rendering in VRED on the frontplate or the geometry using the WebEngine.
File
The File menu contains the following two options:
Load - Once a saved scene containing Qt quick applications is opened, use Load to load the configurations into the scene. For more details, see Reopening a Saved Scene With Qt Scripts.
Save - Use it to save the Qt quick application configurations for your scene. For more details, see Saving Your QtQuickStreaming Configuration.
Auto-start
This check box is found just below the File menu. By default it is off.
If Auto-start is off, the executable will not start.
If Auto-start is on, the Qt quick processes starts automatically.
Note:Only processes running when you saved the config file will automatically start running.
If the executable has not yet started, press the Play button to start it.
Starting Processes Using the Command Line
Start the processes manually with a command line tool, using:
$ ./your-qt-application -platform webgl:port=8998
or embed a script in the VPB when preparing the project.
The applications must be accessible from the machine running VRED.
Starting Processes With Python Scripting
For a scripting solution to startup processes when loading a VPB, containing WebEngines to display Qt Quick application content, do the following:
Here is an example script that starts the Qt quick application calendar.exe with WebGL streaming on port 9000.
Qt does not support streaming on a port that is already in use. When adding a new Qt Quick application to the Application List in the dialog, VRED automatically searches for an unused port, starting with number 9000.
from PySide2.QtCore import QProcess
process = QProcess()
cmd = "\"C:/qtquick_examples/bin/calendar.exe\" -platform webgl:port=9000"
process.start(cmd)
Playing Streamed Qt Content
To load and play streaming Qt content in VRED, requires one or more pieces of geometry, such as a plane, plus help from the Media Editor and Material Editor.
Create a plane.
From the Scenegraph, right-click the Root node, then select Create > Create Geometry > Plane.
In the Create Plane dialog, set its size and resolution, then click Create to create a plane for the Qt application to be projected onto.
Click Transform
and position the plane.
Load the Qt application to start streaming in the background.
Select Scripts > QtQuickStreaming to open the QtQuickStreaming dialog.
Click +, locate and select a Qt executable, then click Open. This opens the executable in the background.
In the QtQuickStreaming dialog, the Qt application is displayed, along with the port it is streaming to.
Create a WebEngine.
Select Scene > Media Editor and click + (WebEngine).
Set the width and height for the resolution.
Set the URL for streaming.
In the QtQuickStreaming dialog, click the URL button to copy the port to the clipboard.
In the Media Editor, right-click the URL field and select Paste to add the port URL to the WebEngine.
Set the color and mapping of the plane.
Click Materials
to open the Material Editor, then drag a material for the plane into the Media Editor and onto the Material field.
In the Material Editor, in the Diffuse Texture section, change Mapping Type to UV.
Saving Your QtQuickStreaming Configuration
When you save the scene, the saved VPB will not include the list of Qt Quick applications needed to be running to be displayed in the scene. This must be saved separately in the QtQuickStreaming plugin as a config file (.cfg).
From VRED's main menu bar, select File > Save As, then click Save to save the scene (VPB).
Save the Qt Quick applications configuration next to the VPB. From the QtQuickStreaming dialog, select File > Save.
Use the same name as the VPB for the configuration file (for example,
C:/myfolder/myscene.vpb
andC:/myfolder/myscene.cfg
.)Click Save to save a config file.
Reopening a Saved Scene That Uses Qt Quick Applications
When loading a VPB, the VRED QtQuick Streaming plugin will look for a config file with the same filename as the VPB, next to the VPB, and automatically load it. If it cannot find the config file, you will need to load the config file manually.
Select Scripts > QtQuickStreaming to open the dialog, then select File > Load.
Double-click the needed config file to load it.
Press the Play button in the QtQuickStreaming dialog.
From the menu bar, select Scene > Media Editor.
In the Media Editor, click a WebEngine, then the Reload
button next to URL. Do this for all WebEngines.