Share

Using QtQuickStreaming

Video Player is loading.
Current Time 0:00
/
Duration 1:50
Loaded: 0%
0:00
Progress: 0%
 
1x

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.

See more

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.

Note:

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.

QtQuickStreaming

Note:

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 an executable Add - Adds a Qt application executable to the list. See step 2 of Playing Streamed Qt Content.

  • Start all processes Start all processes - Starts steaming all processes in the QtQuickStreaming dialog.

  • Stop all processes 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.

  • Delete all processes 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 the process Start - Starts a Qt process.

  • Stop the process Stop - Stop a Qt process.

  • Delete the 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:

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.

Note:

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.

Important:

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.

  1. Create a plane.

    1. From the Scenegraph, right-click the Root node, then select Create > Create Geometry > Plane.

    2. 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.

    3. Click Transform Transform and position the plane.

  2. Load the Qt application to start streaming in the background.

    1. Select Scripts > QtQuickStreaming to open the QtQuickStreaming dialog.

    2. Click +, locate and select a Qt executable, then click Open. This opens the executable in the background.

    3. In the QtQuickStreaming dialog, the Qt application is displayed, along with the port it is streaming to.

  3. Create a WebEngine.

    1. Select Scene > Media Editor and click + (WebEngine).

    2. Set the width and height for the resolution.

  4. Set the URL for streaming.

    1. In the QtQuickStreaming dialog, click the URL button to copy the port to the clipboard.

    2. In the Media Editor, right-click the URL field and select Paste to add the port URL to the WebEngine.

  5. Set the color and mapping of the plane.

    1. Click Materials Materials icon to open the Material Editor, then drag a material for the plane into the Media Editor and onto the Material field.

    2. 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).

  1. From VRED's main menu bar, select File > Save As, then click Save to save the scene (VPB).

  2. Save the Qt Quick applications configuration next to the VPB. From the QtQuickStreaming dialog, select File > Save.

  3. Use the same name as the VPB for the configuration file (for example, C:/myfolder/myscene.vpb and C:/myfolder/myscene.cfg.)

  4. 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.

  1. Select Scripts > QtQuickStreaming to open the dialog, then select File > Load.

  2. Double-click the needed config file to load it.

  3. Press the Play button in the QtQuickStreaming dialog.

  4. From the menu bar, select Scene > Media Editor.

  5. In the Media Editor, click a WebEngine, then the Reload Reload the web page button next to URL. Do this for all WebEngines.

Was this information helpful?