Author: Vadim Chekirka

Proxy servers play a vital role in managing and routing network traffic, offering solutions for load balancing, caching, and enhanced security.

Our proxy servers is meticulously designed to be lightweight, efficient, and highly customizable. It supports both HTTP and HTTPS protocols and comes equipped with features like keep-alive requests, logging, and robust CORS handling. Additionally, it allows you to use third-party APIs directly in the UI or AVgator®Studio, even if those APIs don’t support CORS or HTTPS.

Key Features

• Cross-Platform Compatibility: Supports Windows, macOS, Raspberry Pi, and Linux.
• HTTP and HTTPS Support: Handles both HTTP and HTTPS traffic.
• Keep-Alive Requests: Maintain uninterrupted connections automatically.
• Configurable Logging: Supports logging to a file with rotation based on file size.
• Dynamic Configuration Reloading: Automatically reloads configuration changes without restarting the server.
• CORS Handling: Seamlessly handle cross-origin requests, preflight requests, and more.

Configuration

The proxy server is configured using a JSON file. Here’s an example configuration file (config.json):

{
	"hosts": [
		{
			"prefix": "hostone",
			"auth": {
				"type": "crestronHome",
				"token": "NgPkQG2zc5Wn",
				"url": "https://192.168.254.227/cws/api/login"
			},
			"url": "https://192.168.254.227"
		},
		{
			"prefix": "hosttwo",
			"url": "http://192.168.254.203",
			"autonomic": {
				"heartbeat_url":
				"http://192.168.254.203/api/?clientId=0d933545-fa6a-47fc-90de-0f20db9745ab"
			}
		}
	],
	"mode": "debug",
	"log-file": "/var/log/proxy.log"
}

Detailed Explanation of the Configuration

• mode: Specifies the mode of the application. It can be either debug or production. If not specified, it defaults to production.
• log-file: Specifies the log file name and location. If not specified, it defaults to proxy.log in the binary’s directory.
• hosts: An array of host configurations. Each host configuration includes:
  • prefix: The prefix for the host. Requests with this prefix will be proxied to the specified URL.
  • auth: The authentication configuration. If the type is crestronHome, the token and url fields are required. crestronHome is a specific type of authentication used for Crestron Home systems.
  • autonomic: The autonomic configuration. If specified, keepalive requests will be sent to the heartbeat_url every 20 seconds. autonomic refers to the Autonomic music server
  • url: The URL to proxy requests to.

Running the Proxy Server

You can run the proxy server with the following command:

./proxyserver

Make sure the configuration file (config.json) and SSL certificates are in the appropriate directories as expected by the program.

You can choose our prepared Proxy Server for your OS to create AV projects in AVStudio.

RTSP (Real-Time Streaming Protocol) is widely used for live video streaming, especially in IP cameras and surveillance systems. However, RTSP isn’t natively supported by most web browsers, making it less versatile for modern applications.

On the other hand, HLS (HTTP Live Streaming) is a browser-friendly protocol supported across devices and platforms.

By leveraging FFmpeg and Nginx, you can efficiently repack RTSP streams into HLS for seamless streaming. Here’s how this powerful duo works.

What is FFmpeg?

FFmpeg is a robust multimedia framework capable of processing, converting, and streaming audio and video in various formats. It plays a crucial role in transforming RTSP streams into HLS playlists (.m3u8).

What is Nginx?

Nginx is a high-performance web server and reverse proxy that serves as the delivery mechanism for the HLS files generated by FFmpeg. It ensures efficient file hosting, supports cross-origin requests, and scales to handle many simultaneous viewers.

How FFmpeg Helps Repack RTSP to HLS

FFmpeg repackages the RTSP stream into the HLS format without re-encoding, which saves computational resources and reduces latency.

Use FFmpeg to process the RTSP input and generate HLS segments.

Example Command

ffmpeg -i rtsp://admin:Multimedia@10.14.25.151:8554/ch01 \
       -c:v copy -c:a copy -f hls -hls_time 1 -hls_list_size 6 \
       -hls_time 1 -hls_list_size 6 -hls_flags delete_segments \
       /var/www/streams/AV05SD082a.m3u8

Key Parameters:

• -c:v copy:Copies the video codec without re-encoding.
• -c:a copy:Copies the audio codec without re-encoding.
• -hls_time:Sets the duration (in seconds) of each HLS segment.
• -hls_list_size:Defines the number of segments in the playlist.

FFmpeg continuously processes the RTSP stream and generates a live.m3u8 playlist and media segments.

How Nginx Serves HLS Streams

Nginx acts as the web server that delivers the HLS files to clients. Configure Nginx to serve HLS files with CORS support.

Configuration File Location: /etc/nginx/sites-enabled/strapi.conf

Sample Configuration

server {
    listen 80;
    server_name 10.14.25.18;

    location /streams/ {
        types {
            application/vnd.apple.mpegurl m3u8;
            video/mp2t ts;
        }
        root /var/www;
        add_header Cache-Control no-cache;
        add_header Access-Control-Allow-Origin *;
    }
}

• The types block specifies MIME types for .m3u8 and .ts files.
• The Access-Control-Allow-Origin * header supports cross-origin requests.

Restart Nginx after configuration

sudo systemctl restart nginx

Clients can now access the HLS stream through a URL like:

http://10.14.25.18/streams/stream.m3u8

Conclusion

Repacking RTSP streams into HLS using FFmpeg and Nginx is an effective solution for delivering high-quality video streams to a wide range of devices. This setup ensures compatibility, scalability, and efficiency, making it ideal for applications like IP camera streaming, live broadcasting, or multimedia projects.

With HLS support, AV Studio allows developers to create projects without the need for third-party plug-ins. Just integrate into your project AV Studio a video element that supports HLS playback.

Cross-Origin Resource Sharing (CORS) is a vital security mechanism in web technologies, including HTML5-based interfaces created with Crestron Construct, Crestron CH5, or AVGator® Studio for Crestron control systems. It ensures that requests from a control interface (e.g., a Crestron panel or Crestron One on iPad) to external servers or APIs are handled securely.

While similar to traditional web applications, the use of CORS in Crestron interfaces has its specific challenges and solutions due to the hardware and network environments involved.

How CORS Works

When an HTML5 interface sends a request to an external API or server, the browser enforces the same-origin policy. This policy blocks requests to different domains, ports, or protocols unless the server explicitly allows it via headers like Access-Control-Allow-Origin. If these headers are not present or invalid, the response is blocked.

Simple vs. Preflighted Requests

Simple Requests:These include GET, POST, or HEAD requests with safe headers. In a smart home environment, for example, fetching status updates from an API for lighting control can succeed if the third-party API responds with an appropriate Access-Control-Allow-Origin header.

Non-Simple Requests (Preflighted):If the request includes custom headers or uses HTTP methods like PUT or DELETE, the browser sends a preflight OPTIONS request. This checks if the server permits such requests by examining headers like Access-Control-Allow-Methods and Access-Control-Allow-Headers. The preflight is critical for ensuring that interfaces can safely interact with third-party APIs.

Example Use Case: Lighting Control

Suppose you are building an interface to control room lighting, and the system relies on a third-party API for device statuses. The HTML5 interface, running on the Crestron touch panel, sends a POST request to the API for status updates:

Preflight Request:The browser sends an OPTIONS request to check if the server permits such a request. The API must respond with headers like:

• Access-Control-Allow-Origin: *
• Access-Control-Allow-Methods: POST

Actual Request:If the server allows it, the interface proceeds with the POST request, and the response is received and displayed in the control panel.

Why Proxies Are Important in GUI Development

During development, CORS issues arise when the interface connects to APIs on different origins. For instance:

• The HTML5 interface running on https://avstudio.app may attempt to communicate with an API hosted at http://192.168.4.4
• Without proper CORS configuration on the server, the browser will block these requests.

A proxy server helps circumvent this by acting as an intermediary. Developers can route requests through the proxy, which communicates with the API and ensures the necessary CORS headers are included. This approach simplifies testing and allows the interface to function seamlessly without requiring server-side configuration changes.

🔍 Demonstration: Integrating Crestron Home with AVgator® Studio using Data Sources

In this video, we demonstrate how AVgator® Studio interacts with Crestron Home using data sources to enable seamless control and monitoring. You’ll see how changes made in Crestron Home reflect instantly in AVgator® Studio, showcasing the power of integration.

💡 What’s Covered in This Demonstration:

• Connecting to the Crestron Home API and retrieving room data

• Controlling lights directly from AVgator® Studio

• Renaming a room in the Crestron Home App and reflecting the change in AVgator® Studio

• Explanation of data sources as structured lists with parameters for control and automation

• Overview of CORS proxy servers and their role in enabling custom UI designs

• How AVgator®Studio supports custom UI development for Crestron Home

🚀 Want to Build Custom UIs for Crestron Home?

It’s possible to create your own custom designs using AVgator®Studio and a proxy server. Contact us to get started with an example setup, or stay tuned for appliance-based solutions coming soon!

💬 Need Help? Reach Out Anytime!

#CrestronHome #AVgatorStudio #CustomUIDesign #HomeAutomation #APIDemonstration #AVIntegration