LiveComponents

Introduction

This is a simple integrated repository containing a set of frontend HTML single-file components, an SRS configuration file, and a few lines of Caddyfile configuration. This setup uses Caddy as the HTTP and reverse proxy service, and SRS for backend stream processing.

How to Use

1. Install the necessary packages, including Caddy and SRS, in your own way. We recommend running SRS inside a Docker container using the command below.
2. Copy the contents of the Caddyfile to your own Caddyfile, and copy srs.conf to your ~/srs-config folder. Create the folder if it doesn't exist.
3. Copy the www folder or its contents to your own www folder or website directory for HTTP serving.
4. Now run Caddy, and execute this Docker command:

   docker run --rm -it \
   -p 1935:1935 \
   -p 1985:1985 \
   -p 23456:8080 \
   -p 8000:8000/udp \
   --env CANDIDATE=$CANDIDATE \
   -v ~/srs-config/srs.conf:/usr/local/srs/conf/srs.conf \
   registry.cn-hangzhou.aliyuncs.com/ossrs/srs:6 \
   ./objs/srs -c conf/srs.conf
   

5. Open your streaming tool (such as ffmpeg or OBS). In Settings → Stream, select the platform as Custom, and fill in the URL in this format: rtmp://[YOUR_DOMAIN]/live/[ANY_NAME]. Feel free to fill in the stream key. Then return to the website, and you will find your stream in the list under the player.

FAQ

• Why does the low-latency page seem so laggy?

  • Because that page uses WebRTC for streaming, but there are too many compatibility issues that make the experience suboptimal. We still recommend using the HLS player in index.html.

• Why do we need Caddy as a reverse proxy?

  • To solve simple CORS issues.

• What effect does the Stream Key have here?

  • The key will continue the server URL as a unique identifier. For example, the path you enter after /live/ (e.g., rtmp://live.example.com/live/qwe) combined with the key asd will form the streaming URL rtmp://live.example.com/live/qwe/asd for the player to fetch.