Web Interface
Web Interface Redesign Video Captions: In VRED 2021.1, we have redesigned the web interface home page, which has a much cleaner look and also scales to different devices and different window sizes. Additionally, we added more options within the VRED Stream App and the ability to switch between JPEG and H264 codec, if you have it installed. You can also change bit rates and quality settings to adjust to your connection speed. Other options are fps limitations and window scale options, lock resolutions for all devices, and our new downscale toggle when being in raytracing mode. All these options improve the user experience and gives you more flexibility when using the Stream App.
How to Open the Web Interface
With a scene loaded into your version of VRED, in a browser, enter localhost: followed by the port number set in the preferences. For example, the default port is 8888; therefore, in the browser, you would enter localhost:8888 to access the web interface.
The Web Interface provides a way to access the following:
- Stream App - Opens the Stream App.
- Stream H264 - Opens a live stream of the VRED viewport displaying an HD version in the browser.
- Stream JPEG - Opens a live stream of the VRED viewport displaying a JPEG of the scene image in the browser.
- Navigation App - Opens the VRED App.
- Terminal - Opens the VRED Hub terminal. Along the top are links to access links for Home, Changelist, Scenegraph, Python API, VREDStreamApp, VREDApp, VREDStream HD (jpeg), and VREDStream HD (h264).
- More - Provides a list of options to access the Changelist (http://localhost:8888/changelist), Scenegraph (http://localhost:8888/treeview), and Python API (http://localhost:8888/pythonapi) online pages.
To add web interface to a sceneplate in your scene, see Streaming the VRED Stream App to a Sceneplate.
How to Configure the Web Interface
Use the WebInterface preferences to set the port for accessing the web interface through your browser.
Cross-Origin Resource Sharing (CORS)
Here is information regarding Cross-Origin Resource Sharing (CORS) in the VRED web interface. It has also been implemented for the VREDServer in some requests within vrWebInterface.cpp.
Attached are the HTTP headers for CORS:
Preflight (OPTIONS)
Access-Control-Allow-Origin: *
Access Control Allow methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access Control Allow Headers: content-type
Actual request (GET)
Access-Control-Allow-Origin: *
Short explanation:
If the HOST or PORT is not the same as the one under which the current website/web application is running, and the web application tries to send a request to this other host via Javascript, then this, the HOST will agree to the request. Otherwise, the browser will not send the request.
This is the procedure:
-
The browser asks the different HOST or PORT in a preflight request with the HTTP method "
OPTIONS", if the HOST agrees. If it responds with the HTTP headers as in "Preflight" above, then he the actual request. -
The browser sends the actual request. Here, too, an HTTP header must be included as above in "Actual request". This must be set; otherwise, the browser will not process the response.
For additional information on the headers and how they work visit Access-Control-Allow-Origin and Cross-Origin Resource Sharing (CORS).