Mastering Stream Accessibility: Configuring Apache Proxy and CORS for SRS Player on WordPress

[majdidraouil]

If you're looking to stream video content on your WordPress site using the Simple Realtime Server (SRS), proper configuration is crucial for seamless playback. In this guide, we'll walk you through the steps to set up an Apache proxy for your SRS stream, ensuring that your content is accessible and CORS (Cross-Origin Resource Sharing) is properly configured for embedded playback.

Step 1: Install and Configure SRS

Before you can configure the proxy, ensure that you have SRS installed and running on your server. You can follow the official SRS documentation for installation instructions. Once SRS is up and running, you should have access to your stream URL, typically formatted as follows:

http://<address_ip>:<port>/live/livestream.flv

Replace <address_ip> and <port> with your server's IP address and the port number used by SRS.

Step 2: Configure Apache Proxy Settings

To allow your WordPress site to access the SRS stream, you'll need to set up an Apache proxy. This will route requests from your WordPress site to the SRS server. Follow these steps:

1. Edit the Apache Configuration: You can add the following configuration to your site's .htaccess file or directly in your Apache virtual host configuration:

   # Proxy setup for SRS stream
   ProxyPass /live/livestream.flv http://<address_ip>:<port>/live/livestream.flv
   ProxyPassReverse /live/livestream.flv http://<address_ip>:<port>/live/livestream.flv

   Make sure to replace <address_ip> and <port> with your actual server information.

2. Enable Required Apache Modules: Ensure that the necessary modules are enabled in Apache. Run the following commands to enable mod_proxy, mod_proxy_http, and mod_headers:

   sudo a2enmod proxy
   sudo a2enmod proxy_http
   sudo a2enmod headers

3. Restart Apache: After making these changes, restart your Apache server to apply the configuration:

   sudo systemctl restart apache2

Step 3: Allow CORS for Embedded Playback

CORS is essential for allowing your web application to access resources from a different origin. To enable CORS for your SRS stream, add the following headers to your Apache configuration:

<IfModule mod_headers.c>
    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "GET, OPTIONS"
    Header always set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"
</IfModule>

Step 4: Test the Setup

Once you've configured the proxy and CORS settings, it's time to test your stream. Embed the following video player code into your WordPress page or post:

<video controls>
    <source src="http://yourdomain.com/live/livestream.flv" type="video/x-flv">
    Your browser does not support the video tag.
</video>

Make sure to replace http://yourdomain.com/live/livestream.flv with the actual URL configured in your proxy settings.

Conclusion

By following these steps, you should now have a fully functional SRS player embedded on your WordPress site. This configuration not only enables streaming but also ensures that your content can be accessed from various browsers and devices without CORS issues.

If you encounter any issues, double-check your Apache configuration and ensure that the SRS server is running correctly. Happy streaming!

[winlinvip]

Thank you, there are also guides for Ngin, Caddy and Koa: #2881