requirements •
publishing •
subscribing
Red5 Pro HTML5 Streaming Testbed
This repository contains a simple project with a number of examples that can be used for testing and reference for the Red5 Pro HTML SDK.
These examples are also shipped with the Red5 Pro Server and can be found in the webapp webrtcexamples
.
Requirements
You will need a functional, running Red5 Pro server web- (or locally-) accessible for the client browser (mobile & desktop) to connect to.
For more information visit Red5Pro.com.
Browser Compability
While the Red5 Pro HTML SDK aims to utilize WebRTC for its streaming solution (both publishing and subscribing), the SDK does support fallback support for non-supporting browsers in both contexts. The default failover order for both contexts, which can be redfined by developers, is:
Publisher
-
WebRTC
-
Flash
Subscriber
-
WebRTC
-
Flash
-
HLS
More information about browser compability can be viewed at the WebRTC Peer Connnection information on caniuse.com.
Setup
You will need to modify the Host field from the Settings page to point to your server instance's IP address. If you do not, the examples will not function when you build. If you are running the server locally, then your machine and mobile device need to be on the same WiFi network.
Note on TLS and CORS
It is important to note that some of these examples - specifically those that involve publishing using WebRTC - require being run on TLS and, thusly, served over HTTPS. If running the examples on localhost
you should not see an issues, but if your server is deployed remotely you will need to be sure that these examples are served over HTTPS and the proper Cross Origin Resource Sharing (CORS) settings are defined for the server.
Instructions
To define the server instance's IP address, open the testbed webapp in a browser and navigate to the Settings page if not presented upon launch. To access the Settings back, select the Home item from the examples list located at the top.
To define the Host with the server instance's IP, click the Host field f the form and enter in the local or remote IP address - e.g., 10.0.0.5
, 76.199.199.199
.
Hint: You can also open the landing page of your server instance at port 5080
(i.e., http://localhost:5080
if launched locally) and the page will display its IP in the upper-right corner.
Examples
Publishing
Publisher |
Basic publisher example using WebRTC with failover. i.e, if no WebRTC browser support, then Flash Player if detected. |
1080p |
A high quality publisher. |
Append |
Demonstrates recording a stream to the server with append option. |
Authentication |
Demonstrates authentication with the Simple-Auth-Plugin for publishing. |
Camera Source |
Demonstrates selecting the desired camera to publish with. |
Camera Swap |
Demonstrates a request for a MediaStream with a defined video source for the constraint based on the Rear and Front facing cameras of a mobile device and a browser that supports facingMode media contraints. |
Custom Settings |
Allows you to customize the media broadcast settings for a WebRTC Publisher. |
Custom Audio Settings |
Allows you to customize the audio settings for a WebRTC Publisher. |
MediaStream Swap |
Demonstrates using replaceTrack to swap in a different Camera source dynamically for WebRTC-based Publishers. |
Image Capture |
Demonstrates capturing an image of a live video being published. |
Mute |
Muting and unmuting audio for a live video being published. |
Record |
Demonstrates recording a stream to the server for VOD (Video-On-Demand) playback. |
Append |
Demonstrates record-append function a stream to the server for VOD (Video-On-Demand) playback. |
Remote Call |
Demonstrates sending a remote message to all subscribed clients. |
Round Trip Authentication |
An example of utilizing round-trip authentication with Red5 Pro. |
Screen Share |
An example of utilizing the screen sharing capabilities of Chrome and Firefox. For use with Subscribe Screen Share example. |
Shared Object |
Demonstrates using remote Shared Object to send and recieve information between connected clients. |
Social Media Stream Push |
An example of rebroadcasting a live stream to a social media platform. |
VP8 |
An example for requesting VP8 video codec on publish |
Publishing - Stream Manager Examples
Stream Manager |
Demonstrates utilizing the Red5 Pro Stream Manager API to publish to an autoscaling cluster's origin. |
Stream Manager Proxy |
Demonstrates utilizing the Red5 Pro Stream Manager as an SSL WebSocket Proxy to publish WebRTC to an autoscaling cluster's origin. |
Stream Manager Proxy Camera Select |
Demonstrates utilizing the Red5 Pro Stream Manager as an SSL WebSocket Proxy to publish WebRTC to an autoscaling cluster's origin with camera select. |
Stream Manager Proxy Settings |
Demonstrates utilizing the Red5 Pro Stream Manager as an SSL WebSocket Proxy to publish WebRTC with custom video settings to an autoscaling cluster's origin. |
Stream Manager Proxy Settings with Audio |
Demonstrates utilizing the Red5 Pro Stream Manager as an SSL WebSocket Proxy to publish WebRTC with custom audio settings to an autoscaling cluster's origin. |
Stream Manager Proxy Round Trip Authenticaion |
An example of utilizing round-trip authentication with Red5 Pro over Stream Manager Proxy. |
Stream Manager Proxy Screen Share |
An example of utilizing the screen sharing capabilities of Chrome and Firefox. For use with Stream Manager Proxy Subscribe Screen Share example. |
Stream Manager Proxy Social Media Stream Push |
An example of rebroadcasting a live stream to a social media platform. |
Stream Manager Transcode Provision Form |
Provides an easy form to POST a new Provision to the Stream Manager for ABR broadcasts. Once the provision is POSTed, use your favorite Media Encoder to broadcast the variants. |
Stream Manager Proxy Transcoder |
Provides an easy form to POST a new Provision to the Stream Manager for ABR broadcasts and to start a single variant broadcast using the Transcoder. |
Stream Manager Proxy Transcoder with Authentication |
Provides an easy form to POST a new Provision to the Stream Manager for ABR broadcasts and to start a single variant broadcast using the Transcoder, including authentication. |
Stream Manager Proxy Validation |
An example of utilizing validation parameters with Red5 Pro over Stream Manager Proxy. |
Multi
Two-Way |
Demonstrates simultaneously publishing while subscribing - allowing a conversation. Includes stream detection and auto-connection. |
Two-Way Stream Manager Proxy |
The Two-Way example through a Stream Manager - including use of a proxy. Includes stream detection and auto-connection. |
Conference |
Demonstrates multi-party communication using Red5 Pro. It also demonstrates using Shared Objects as notifications to recognize the addition and removal of parties broadcasting. |
Conference - Stream Manager |
Demonstrates multi-party communication using Red5 Pro over Stream Manager. It also demonstrates using Shared Objects as notifications to recognize the addition and removal of parties broadcasting. |
Shared Object (websockets only) |
Demonstrates the use of Shared Objects through a WebSocket proxy from the Red5 Pro HTML SDK. |
Subscribing
Subscriber |
Basic subscriber example with failover. i.e, if no WebRTC browser support, then first Flash Player is detected, then HLS. |
360 |
Example for subscribing to a 360 camera stream |
Audio Only |
Demonstrates playback of audio-only stream. |
Authentication |
Demonstrates authentication with the Simple-Auth-Plugin for subscribing. |
Image Capture |
Demonstrates capturing an image of a live video being consumed. |
Cluster |
Demonstrates accessing an IP from the Red5 Pro Cluster API to subcribe to a live stream. |
HLS |
This is an example of subscribing to a stream using HLS Only. In the event that HLS is not supported natively by the browser, the hls.js 3rd-party library is utilized. |
Image Capture |
This example demonstrates capturing a still of the playback by using the drawImage API of CanvasRenderingContext2D . |
Reconnect |
Demonstrates the failover mechanism of the Red5 Pro HTML SDK to select a subscriber based on browser support and to auto-reconnect on close of broadcast or loss of connection. |
Remote Call |
Demonstrates receiving a remote message from broadcaster. |
Retry on Invalid Name |
Demonstrates utilizing the maintainConnectionOnSubscribeErrors configuration property of a subscriber in order to maintain the WebSocket connection upon errors from the subscribe request after intializing.. |
Round Trip Authentication |
An example of utilizing round-trip authentication with Red5 Pro over Stream Manager Proxy |
Screen Share |
An example of utilizing the screen sharing capabilities of Chrome and Firefox. For use with Publish Screen Share example. |
Shared Object |
Demonstrates using remote Shared Object to send and recieve information between connected clients. |
Standby |
An example of using the Standby API to request a "pause" in receiving video and audio data on the MediaStream while also maintaining a connection of the client to the server. |
Stream Switch |
An example that demonstrates switching of the current subscriber's stream to another live stream through WebRTC. |
Two Streams |
An example that subscribes to two streams, using the Stream1 Name and Stream 2 Name variables from the settings page. |
Video Mute |
Example to demonstrate subscribing to a broadcast which has its video stream "muted". |
VP8 |
Demonstrates requesting VP8 Video Encoding for a playback stream. |
Subscribing - Stream Manager Examples
Stream Manager |
Demonstrates utilizing the Red5 Pro Stream Manager API, and acting as SSL WebSocket Proxy, to access an Edge server IP to subscribe to a live stream. |
Stream Manager Proxy |
Demonstrates utilizing the Red5 Pro Stream Manager API to access an Edge server IP to subscribe to a live stream. |
Stream Manager Proxy Reconnect |
Demonstrates the failover mechanism of the Red5 Pro HTML SDK to select a subscriber based on browser support and to auto-reconnect on close of broadcast or loss of connection. |
Stream Manager Proxy Region |
Demonstrates utilizing the Red5 Pro Stream Manager API to access an Edge server IP to subscribe to a live stream. |
Stream Manager Proxy Round Trip Authentication |
Demonstrates subscribing using round trip authentication, region specified. |
Stream Manager Proxy Transcoder (RTC) |
Demonstrates utilizing the Red5 Pro Stream Manager API to access Provisions and an Edge server IP to subscribe to a live WebRTC-based stream with Adaptive Bitrate Control. |
Stream Manager Proxy Transcoder (RTMP) |
Demonstrates utilizing the Red5 Pro Stream Manager API to access Provisions and an Edge server IP to subscribe to a live Flash-based stream with Adaptive Bitrate Control. |
Stream Manager Proxy Transcoder (HLS) |
Demonstrates utilizing the Red5 Pro Stream Manager API to access Provisions and an Edge server IP to subscribe to a live HLS-based stream with Adaptive Bitrate Control. |
Stream Manager Proxy Screen Share |
An example of utilizing the screen sharing capabilities of Chrome and Firefox. For use with Publish Screen Share example. |
Mixer - Stream Manager Examples
Stream Manager Proxy Conference Participant |
Demonstrates utilizing the Red5 Pro Stream Manager API to join a video conference with a single return stream. |
Stream Manager Proxy Conference Host |
Demonstrates utilizing the Red5 Pro Stream Manager API to host and manage a video conference with a single return stream. |
Stream Manager Grid Composition Host |
Demonstrates utilizing the Red5 Pro Stream Manager API to create and manage a composition of several live streams into a single stream. |
Stream Manager 2x2 Grid Layout Example |
Demonstrates composing a set of live streams into a 2x2 grid that can be loaded into a Red5 Pro Mixer to create a composition with up to 4 streams. |
Stream Manager 3x3 Grid Layout Example |
Demonstrates composing a set of live streams into a 3x3 grid that can be loaded into a Red5 Pro Mixer to create a composition with up to 9 streams. |
Stream Manager NxN Grid Layout Example |
Demonstrates composing a set of live streams into a NxN grid that can automatically resize as new streams are added to it. The page can be loaded into a Red5 Pro Mixer to create a composition with many streams. |
Stream Manager Conference Layout |
Demonstrates composing a set of live streams into a focused layout for a video conference where the presenter is highlighted. The page can be loaded into a Red5 Pro Mixer to create a video conference with a single return stream. |
Notes
- For the Subscriber examples, you will need to have a live stream currently being published and named based on the Stream 1 Name field of the Settings. You can use another device to start streaming using this webapp, or you can also use a web browser to publish via Flash, http://your_red5_pro_server_ip:5080/live.
- You can see a list of active streams by navigating to http://your_red5_pro_server_ip:5080/live/subscribe.jsp (will need to refresh this page after you have started publishing).
- You can access the server IP of your Red5 Pro Server install - to be used in the Host field of the Settings - by opening http://your_red5_pro_server_ip:5080/ and finding the IP printed in the upper-right of the page.
- Unless you are running the server locally, WebRTC publishing requires a valid SSL certificate.
