{"id":26802446,"url":"https://github.com/red5pro/red5pro-html5-hls","last_synced_at":"2026-03-09T03:30:52.728Z","repository":{"id":77015970,"uuid":"46502813","full_name":"red5pro/red5pro-html5-hls","owner":"red5pro","description":"An example HTML client for the https://red5pro.com/ Streaming SDK.","archived":false,"fork":false,"pushed_at":"2019-09-16T14:39:33.000Z","size":15832,"stargazers_count":19,"open_issues_count":0,"forks_count":12,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-23T02:41:24.913Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://red5pro.github.io/red5pro-html5-hls/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/red5pro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2015-11-19T15:52:00.000Z","updated_at":"2024-05-06T17:26:20.000Z","dependencies_parsed_at":"2023-03-04T17:45:24.037Z","dependency_job_id":null,"html_url":"https://github.com/red5pro/red5pro-html5-hls","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/red5pro/red5pro-html5-hls","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Fred5pro-html5-hls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Fred5pro-html5-hls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Fred5pro-html5-hls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Fred5pro-html5-hls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/red5pro","download_url":"https://codeload.github.com/red5pro/red5pro-html5-hls/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/red5pro%2Fred5pro-html5-hls/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30281473,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T02:57:19.223Z","status":"ssl_error","status_checked_at":"2026-03-09T02:56:26.373Z","response_time":61,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-03-29T21:18:07.624Z","updated_at":"2026-03-09T03:30:52.708Z","avatar_url":"https://github.com/red5pro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Red5 Pro HTML5 HLS Example\n\n\u003c!-- MarkdownTOC --\u003e\n\n1. [Requirements](#requirements)\n1. [Getting Up and Running](#getting-up-and-running)\n    1. [For HLS VOD](#for-hls-vod)\n    1. [For Local Development](#for-local-development)\n    1. [With a Prebuilt Distribution](#with-a-prebuilt-distribution)\n    1. [Building a Distribution](#building-a-distribution)\n1. [Overview of the HTML5 Client](#overview-of-the-html5-client)\n1. [Modifying](#modifying)\n\n\u003c!-- /MarkdownTOC --\u003e\n\n\nAn example of how to build an HTML client for [Red5 Pro's](http://red5pro.com/) HLS streams, built with:\n\n* [ES2015 (a.k.a ES6)](https://github.com/bevacqua/es6) via [Babelify](http://babeljs.io/)\n* [video.js](https://github.com/videojs/video.js)\n* [videojs-contrib-media-sources](https://github.com/videojs/videojs-contrib-media-sources)\n* [videojs-contrib-hls](https://github.com/videojs/videojs-contrib-hls)\n* [bootstrap](https://github.com/twbs/bootstrap) and it's dependencies\n\n[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)\n\n## Requirements\n\nThis example requires that you have the following in order to use it:\n\n1. A [Red5 Pro][r5p] server running on a server, such as an AWS instance\n2. A mobile client to publish to your Red5 Pro server from, such as this [iOS example](https://github.com/red5pro/red5pro-ios-app) or this [Android example](https://github.com/red5pro/red5pro-android-app). Alternatively, using the [Red5 Pro Streaming SDK][r5s] you can build your own or incoporate streaming into your existing application(s)!\n\nIf you would like to **run, modify, or build it locally** you will also need the following:\n\n1. [Node/NPM](https://nodejs.org/)\n\nMake sure to set these up before you proceed! :+1:\n\n## Getting Up and Running\n\n### For HLS VOD\n\nTo provide HLS media content, your Red5 Pro server may require extra configuration.\n\nAll Red5 Pro applications (those that reside in the `webapps` directory) which provide HLS content require support for [Cross-origin resource sharing](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) or CORS. That means the following `servlet filter` has to be configured in the applications web application configuration file, its `web.xml`. The example below will work for serving HLS content.\n\n```xml\n    \u003cfilter\u003e\n        \u003cfilter-name\u003eCORS\u003c/filter-name\u003e\n        \u003cfilter-class\u003ecom.thetransactioncompany.cors.CORSFilter\u003c/filter-class\u003e\n        \u003casync-supported\u003etrue\u003c/async-supported\u003e\n        \u003cinit-param\u003e\n            \u003cparam-name\u003ecors.allowOrigin\u003c/param-name\u003e\n            \u003cparam-value\u003e*\u003c/param-value\u003e\n        \u003c/init-param\u003e\n        \u003cinit-param\u003e\n            \u003cparam-name\u003ecors.allowSubdomains\u003c/param-name\u003e\n            \u003cparam-value\u003etrue\u003c/param-value\u003e\n        \u003c/init-param\u003e\n        \u003cinit-param\u003e\n            \u003cparam-name\u003ecors.supportedMethods\u003c/param-name\u003e\n            \u003cparam-value\u003eGET, HEAD\u003c/param-value\u003e\n        \u003c/init-param\u003e\n        \u003cinit-param\u003e\n            \u003cparam-name\u003ecors.maxAge\u003c/param-name\u003e\n            \u003cparam-value\u003e3600\u003c/param-value\u003e\n        \u003c/init-param\u003e\n    \u003c/filter\u003e\n    \u003cfilter-mapping\u003e\n        \u003cfilter-name\u003eCORS\u003c/filter-name\u003e\n        \u003curl-pattern\u003e/*\u003c/url-pattern\u003e\n    \u003c/filter-mapping\u003e\n```\n\nTo support listing of HLS VOD media files, the `M3U8ListingServlet` must be enabled in your applications `web.xml` file as shown below.\n\n```xml\n    \u003cservlet\u003e\n        \u003cservlet-name\u003eplaylists\u003c/servlet-name\u003e\n        \u003cservlet-class\u003ecom.red5pro.stream.transform.mpegts.server.M3U8ListingServlet\u003c/servlet-class\u003e\n    \u003c/servlet\u003e    \n    \u003cservlet-mapping\u003e\n        \u003cservlet-name\u003eplaylists\u003c/servlet-name\u003e\n        \u003curl-pattern\u003e/playlists/*\u003c/url-pattern\u003e\n    \u003c/servlet-mapping\u003e\n```\n\n\n### For Local Development\n\n1. Clone the repo\n2. Inside the repo, run `npm install`\n3. After that, run `npm run start` which will transpile all the ES2015 source to ES5 Javascript and start a local Node server\n  1. If you'd prefer to run a different server, such as a Pyton server for instance, then you can just run `npm run publish` to transpile the ES2015 source to ES5 Javascript\n4. Open up [http://localhost:3000/](http://localhost:3000/) to see the Red5 Pro HLS HTML5 client example\n\n### With a Prebuilt Distribution\n\nVisit our [releases](https://github.com/red5pro/red5pro-html5-hls/releases) to find a prebuilt distribution you can download **\u0026mdash; or \u0026mdash;** view the [live example](http://red5pro.github.io/red5pro-html5-hls/) and use one of our example publishing apps ([iOS](https://github.com/red5pro/red5pro-ios-app) or [Android](https://github.com/red5pro/red5pro-android-app)).\n\n### Building a Distribution\n\nShould you ever find the need to build a distribution yourself, you can run the following to accomplish that:\n\n```sh\nnpm run dist\n```\n\n## Overview of the [HTML5 Client](http://red5pro.github.io/red5pro-html5-hls/)\n\nThe example HTML5 client has 5 fields allowing you to connect to whatever [Red5 Pro][r5p] server and stream you'd like.\n\n| Field                 | Purpose                                                                                                                                                                                         |\n|:----------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| Stream URL or IP      | This is the base URL or IP for your [Red5 Pro][r5p] server, e.g. http://my-test-server.com/ or http://99.98.97.96/                                                                              |\n| Stream Port           | This is the port for your stream connection on the [Red5 Pro][r5p] server. By default, this is 5080 in the server.                                                                              |\n| Stream Websocket Port | This is the port for your websocket connection on the [Red5 Pro][r5p] server. By default, this is 6262 in the server.                                                                           |\n| Stream Context        | This is the context under which your stream is running on the [Red5 Pro][r5p] server. By default, this is \"live\" in the server and the example mobile apps.                                     |\n| Stream Name           | This is the name for your stream on the [Red5 Pro][r5p] server. You specify this in either the example mobile apps when you publish or in your own apps using the [Red5 Pro Streaming SDK][r5s] |\n\n**Subscribe via Red5 Pro Cluster?** - check the box if you are running on a cluster, so that the example looks for the edge servers in round robin\n\n**Subscribe to Red5 Pro VOD?** - check the box if you have recorded HLS files and want to play them on demand. \n\nAfter you have entered data in the relevant fields, hit the **Save** button. This will display the stream in the preview window - hit the [\u003e play button to start playing. Also, it will generate a\n*Stream URL Preview* and *Stream WebSocket URL Preview*.\n\n**Note:** HLS latency is between 10 and 20 seconds, so make sure you have been publishing for at least 15 seconds before trying to subscribe\n\nYou can Save/Update the form and it will use the default values (shown as placeholders) for any fields you haven't filled in.\n\n## Modifying\n\nThere are 4 \"moving\" pieces to the Red5 Pro HLS HTML5 client example, only 3 of which (noted below with checkmarks) that you should need to modify to extend or modify the current example:\n\n1. :heavy_check_mark: [js/main.js](./js/main.js), the entry point of the app, which instantiates the other \"moving\" pieces\n2. :heavy_check_mark: [js/demo-video-handler.js](./js/demo-video-handler.js) which handles updating the video\n3. :heavy_check_mark: [js/demo-socket-handler.js](./js/demo-socket-handler.js) which handles communication with the websocket\n4. :heavy_multiplication_x: [js/src/form-handler.js](./js/src/form-handler.js) which notifies other pieces of changes (\"inputchange\" for live editing, \"change\" for Save/Update) to the example form\n\nBy modifying these \"moving\" pieces, you can reshape the behavior of the Red5 Pro HLS HTML5 client example to suit your needs.\n\n\n\n\n[r5p]:      https://red5pro.com                                 \"Red5 Pro\"\n[r5s]:      https://www.red5pro.com/docs/streaming/overview/    \"Red5 Pro Streaming SDK\"\n[![Analytics](https://ga-beacon.appspot.com/UA-59819838-3/red5pro/red5pro-html5-hls?pixel)](https://github.com/igrigorik/ga-beacon)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fred5pro%2Fred5pro-html5-hls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fred5pro%2Fred5pro-html5-hls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fred5pro%2Fred5pro-html5-hls/lists"}