42 | {{> footer}}
43 | {{> body-scripts}}
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/src/page/sm-test/publishStreamManagerProxyCamera/README.md:
--------------------------------------------------------------------------------
1 | # Publishing RTC Streams over Stream Manager Proxy
2 |
3 | The streammanager WebRTC proxy is a communication layer built inside streammanager web application which allows it to act as a proxy gateway for webrtc publishers / subscribers. The target use case of this communication layer is to facilitate a secure browser client to be able to connect to a "unsecure" remote websocket endpoint for consuming WebRTC services offered by Red5pro.
4 |
5 | Streammanager autoscaling works with dynamic nodes which are associated with dynamic IP addresses and cannot have a SSL attached to them. The proxy layer helps publishers to connect and initiate a WebRTC publish session from a `secure` (ssl enabled) domain to a `unsecure` Red5pro origin having using an IP address.
6 |
7 | **Please refer to the [Basic Publisher Documentation](../publishStreamManagerProxy/README.md) to learn more about the basic setup.**
8 |
9 | > In order to properly run the Stream Manager examples, you will need to configure you server for cluster infrastructure as described in the following documentation: [https://www.red5.net/docs/installation/](https://www.red5.net/docs/installation/).
10 |
11 | ## Server Configuration
12 |
13 | > Please read about [WHIP/WHEP Configuration for Standalone and Stream Manager support.](https://www.red5.net/docs/special/user-guide/whip-whep-configuration/)
14 |
15 | You also need to ensure that the stream manager proxy layer is `enabled`. The configuration section can be found in stream manager's config file - `red5-web.properties`
16 |
17 | ```sh
18 | ## WEBSOCKET PROXY SECTION
19 |
20 | proxy.enabled=false
21 | ```
22 |
23 | ## Example Code
24 |
25 | - **[index.html](index.html)**
26 | - **[index.js](index.js)**
27 |
--------------------------------------------------------------------------------
/src/page/sm-test/publishStreamManagerProxyCamera/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Publish Stream Manager Proxy Camera Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
9 |
10 | {{> top-bar }}
11 |
26 | {{> footer}}
27 | {{> body-scripts}}
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/src/page/sm-test/publishStreamManagerProxySettings/README.md:
--------------------------------------------------------------------------------
1 | # Publishing RTC Streams over stream manager proxy
2 |
3 | The streammanager WebRTC proxy is a communication layer built inside streammanager web application which allows it to act as a proxy gateway for webrtc publishers / subscribers. The target use case of this communication layer is to facilitate a secure browser client to be able to connect to a "unsecure" remote websocket endpoint for consuming WebRTC services offered by Red5pro.
4 |
5 | Streammanager autoscaling works with dynamic nodes which are associated with dynamic IP addresses and cannot have a SSL attached to them. The proxy layer helps publishers to connect and initiate a WebRTC publish session from a `secure` (ssl enabled) domain to a `unsecure` Red5pro origin having using an IP address.
6 |
7 | **Please refer to the [Basic Publisher Documentation](../publish/README.md) to learn more about the basic setup.**
8 |
9 | > In order to properly run the Stream Manager examples, you will need to configure you server for cluster infrastructure as described in the following documentation: [https://www.red5.net/docs/installation/](https://www.red5.net/docs/installation/).
10 |
11 | ## Server Configuration
12 |
13 | > Please read about [WHIP/WHEP Configuration for Standalone and Stream Manager support.](https://www.red5.net/docs/special/user-guide/whip-whep-configuration/)
14 |
15 | You also need to ensure that the stream manager proxy layer is `enabled`. The configuration section can be found in stream manager's config file - `red5-web.properties`
16 |
17 | ```sh
18 | ## WEBSOCKET PROXY SECTION
19 |
20 | proxy.enabled=false
21 | ```
22 |
23 | ## Example Code
24 |
25 | - **[index.html](index.html)**
26 | - **[index.js](index.js)**
27 |
--------------------------------------------------------------------------------
/src/page/sm-test/publishStreamManagerProxyValidation/README.md:
--------------------------------------------------------------------------------
1 | # Passing Validation parameters when Publishing stream manager proxy
2 |
3 | The streammanager WebRTC proxy is a communication layer built inside streammanager web application which allows it to act as a proxy gateway for webrtc publishers / subscribers. The target use case of this communication layer is to facilitate a secure browser client to be able to connect to a "unsecure" remote websocket endpoint for consuming WebRTC services offered by Red5pro.
4 |
5 | Streammanager autoscaling works with dynamic nodes which are associated with dynamic IP addresses and cannot have a SSL attached to them. The proxy layer helps publishers to connect and initiate a WebRTC publish session from a `secure` (ssl enabled) domain to a `unsecure` Red5pro origin having using an IP address.
6 |
7 | **Validation Parameters** may be required for your current project. This is a way to additionally pass in query parameters when utilizing the Stream Manager API in order to run validation on the server-side.
8 |
9 | **Please refer to the [Basic Publisher Documentation](../publishStreamManagerProxy/README.md) to learn more about the basic setup.**
10 |
11 | > In order to properly run the Stream Manager examples, you will need to configure you server for cluster infrastructure as described in the following documentation: [https://www.red5.net/docs/installation/](https://www.red5.net/docs/installation/).
12 |
13 | ## Server Configuration
14 |
15 | > Please read about [WHIP/WHEP Configuration for Standalone and Stream Manager support.](https://www.red5.net/docs/special/user-guide/whip-whep-configuration/)
16 |
17 | You also need to ensure that the stream manager proxy layer is `enabled`. The configuration section can be found in stream manager's config file - `red5-web.properties`
18 |
19 | ```sh
20 | ## WEBSOCKET PROXY SECTION
21 |
22 | proxy.enabled=false
23 | ```
24 |
25 | ## Example Code
26 |
27 | - **[index.html](index.html)**
28 | - **[index.js](index.js)**
29 |
--------------------------------------------------------------------------------
/src/page/sm-test/subscribeBackupStreamSwitchStreammanager/README.md:
--------------------------------------------------------------------------------
1 | # Back-Up Stream Switching for Subscribers Using Stream Manager
2 |
3 | This example demonstrates the ability to load 2 (_can be modified_) Subscribers to 2 Edges at once and placing all but the first to report subscription success into `standby` mode in order to be "activated" in the off-chance that the current subscriber has gone down unexpectedly - such as from losing network connect or the edge server is lost.
4 |
5 | # Usage
6 |
7 | The Stream Manager form allows you to input information about the host address of the stream manager instance. It is assumed that the stream manager is served over SSL when constructing the APi request; as such, put in the Full Qualified Domain Name of the stream manager - e.g., `mystreammanager.red5.me`.
8 |
9 | In the Stream Manager form, also provide the stream name you wish to subscribe to.
10 |
11 | When the form is complete, click `Start`.
12 |
13 | Once a subscriber has completed an Edge API request, a connection and a playback, the other subscriber(s) are placed into `standby`. They should not be receiving audio or video streams at this moment, though will have a frozen frame at which they were placed in `standby`.
14 |
15 | > The subscribers are initially overlapped in the UI, but you can see both streams at the same time by clicking on the `Toggle Overlap` button.
16 |
17 | Once both subscribers are "alive" and one subscriber is playing back and the other is in standby, shut down the Red5 Pro server on the host instance that is reported in the information field above the videos.
18 |
19 | ## Expected Result
20 |
21 | You should see the original subscriber removed from the UI and the back-up subscriber released from `standby` mode.
22 |
23 |
--------------------------------------------------------------------------------
/src/page/sm-test/subscribeStreamManagerProxy/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Subscriber Stream Manager Proxy Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
9 |
10 | {{> top-bar }}
11 |
28 | {{> footer}}
29 | {{> body-scripts}}
30 | {{> mobile-subscriber-util}}
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/src/page/sm-test/subscribeStreamManagerProxyScreenShare/README.md:
--------------------------------------------------------------------------------
1 | # Subscribe Screen Share over Stream Manager using Red5 Pro
2 |
3 | This is an example subscribing to a broadcast with screen sharing. It is very similar to how you would subscribe to a video broadcast. However, this example makes to consumer connections: one for the screen share and one for the audio. This is due to the fact that is it not possible at the time of this writing (_November 30th, 2017_) to provide a valid media constraint with both audio an screen sharing.
4 |
5 | **Please refer to the [Basic Subscriber Documentation](../subscribeStreamManagerProxy/README.md) to learn more about the basic setup.**
6 |
7 | ## Example Code
8 |
9 | - **[index.html](index.html)**
10 | - **[index.js](index.js)**
11 |
12 | # How to Subscribe
13 |
14 | First launch the [Publisher Screen Share Test](../publishStreamManagerProxyScreenShare) in a separate window/tab and follow the extension installation requirements (depending on your browser).
15 |
--------------------------------------------------------------------------------
/src/page/sm-test/subscribeStreamManagerProxyScreenShare/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Subscriber SM Proxy Screen Share Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
9 |
10 | {{> top-bar }}
11 |
28 | {{> footer}}
29 | {{> body-scripts}}
30 | {{> mobile-subscriber-util}}
31 |
32 |
33 |
34 |
--------------------------------------------------------------------------------
/src/page/sm-test/subscribeStreamManagerProxySwitch/Readme.md:
--------------------------------------------------------------------------------
1 | # WebRTC Subscriber Switch over stream manager proxy
2 |
3 | Through WebRTC over stream manager proxy, the current subscriber's stream may be switched to another live stream. This example demonstrates that the process is essentially the same as with a standalone server.
4 |
5 | This example is based on the _subscribestreamManagerProxy_ example. See that example's [README](../subscribestreamManagerProxy/README.md) for details on subscribing. Like the subscriber example, this example assumes there is a live stream by default named "stream1".
6 |
7 | This example demonstrates using the `callServer` API to invoke a method on the Application Adapter of the target app. The `callServer` method returns a `Promise`-like object that can additional deliver return data from the server.
8 |
9 | [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
10 | [WebRTC](https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC)
11 |
12 | ### Example Code
13 |
14 | - **[index.html](index.html)**
15 | - **[index.js](index.js)**
16 |
17 | # Calling the server
18 |
19 | The `switchStreams` server call requires two pieces of data:
20 |
21 | - **`path`** to the live stream. This includes the context path and stream name, e.g., "live/stream1".
22 | - **`isImmediate`** -- if **true**, the audio will switch immediately and the original stream's video will freeze, and the video will switch to the new stream at the next keyframe. If **false**, the original continues uninterrupted until a new keyframe is received on the new stream, at which point audio and video switch simultaneously.
23 |
24 | The server call then contains a JSON array with a single entry containing these two parameters:
25 |
26 | ```javascript
27 | targetSubscriber.callServer('switchStreams', [
28 | {
29 | path: streamPath.value,
30 | isImmediate: true,
31 | },
32 | ])
33 | ```
34 |
35 | The server responds with a message:
36 |
37 | ```javascript
38 | {
39 | "data": {
40 | "type": "result",
41 | "message": "Stream switch: Success"
42 | }
43 | }
44 | ```
45 |
--------------------------------------------------------------------------------
/src/page/sm-test/subscribeStreamManagerProxySwitch/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Subscriber Stream Manager Proxy Stream Switch Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
9 |
10 | {{> top-bar }}
11 |
In order to properly run the Stream Manager examples, you will need to configure your environment with the autoscaling infrastructure as described in the following documentation:
37 | {{> footer}}
38 | {{> body-scripts}}
39 | {{> mobile-subscriber-util}}
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/src/page/test/castlabsPublish/README.md:
--------------------------------------------------------------------------------
1 | # castLabs DRMtoday Integration for Encrypted Broadcast
2 |
3 | This example demonstrates integrating with a 3rd Party library provided from `castLabs` to encrypt live video utilizing the `DRMtoday` platform.
4 |
5 | > This example requires a version of the Red5Pro WebRTC SDK that has supported for [Insertable Streams](https://developer.mozilla.org/en-US/docs/Web/API/Insertable_Streams_for_MediaStreamTrack_API).
6 |
7 | # Requirements
8 |
9 | This example uses the 3rd Party library provided from `castLabs`: [encrypt-worker.js](./encrypt-worker.js). The library provides transform functions to be used in encrypted live stream that have been encrypted using `merchant` keys.
10 |
11 | > As such - though some polyfills are included - it is advised to run this example in browsers that support `Insertable Streams`.
12 |
13 | # Settings
14 |
15 | This example displays the encrypted stream along with the ability to playback decrypted. In order to playback the decrypted stream, integration with `castLabs' DRMtoday` is required.
16 |
17 | In particular, you will need to know the following that is provided as User Input settings on the interface for this example:
18 |
19 | - `environment`: The environment on castLabs DRMtoday account that your encrypted stream resides.
20 | - `merchant`: The merchant account within DRMtoday where the stream resides.
21 | - `encryption mode`: The type of AES (Advanced Encryption Standard) mode used on the stream.
22 | - `key / key id / iv`: The key, key id and iv id values to be used in decryption. These should be provided to you by the `merchant`. _Currently this is a `base64` stream._
23 |
24 | > It is not the intent of this document to describe the `DRMtoday` platform. Please refer to their documentation for more information.
25 |
--------------------------------------------------------------------------------
/src/page/test/castlabsWatermark/README.md:
--------------------------------------------------------------------------------
1 | # Single Frame Forensic Watermarking with castLabs
2 |
3 | This example demonstrates how to use [castLabs forensic watermarking](https://castlabs.com/image-watermarking/) to embed a watermark during a live broadcast playback.
4 |
5 | # Requirements
6 |
7 | In order to use this example, you will need to:
8 |
9 | 1. Create a castLabs account.
10 | 2. Access the Organization URN from your new account.
11 | 3. Go to [castLabs account](https://account.castlabs.com/account) and add a key for use with the watermark overlay REST API
12 |
13 | ## Settings
14 |
15 | Once the above requirements are met, you will input the form values of the testbed example:
16 |
17 | - `Access Key Id` - Key Id
18 | - `Secret Access Key` - Key Secret
19 | - `Organization URN` - Organization URN
20 | - `User URN` - User URN
21 |
22 | # Usage
23 |
24 | 1. Start a broadcast preferrably with 16:9 (e.g., `640x360`) aspect ratio using a Publish example.
25 | 2. Click on `Subscribe` to begin credential authentication and watermark overlay request.
26 | 3. Once the watermark overlay request is complete, the watermarked image be overlayed on the live broadcast playback.
27 |
28 | ## Single-Frame Watermark Forensics
29 |
30 | Once playback has started, take a screenshot of the live video area to be used in your `castLabs` account for extraction.
31 |
32 | 1. Take a screenshot of the live video area.
33 | 2. Upload the screenshot to the [castLabs watermarking tool](https://watermark.castlabs.com/)
34 | 3. Select `Blind Extraction`
35 | 4. Upload the screenshot and allow for the extraction to process and complete.
36 |
37 | > You may need to adjust the extraction settings to ensure the watermark is extracted correctly.
38 |
39 | Once the system has completed the extraction, you will be able to download the watermarked image and use it in your forensic investigation.
40 |
41 | 
42 |
--------------------------------------------------------------------------------
/src/page/test/castlabsWatermark/watermarked-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/red5pro/streaming-html5/4501fc76c5a4675d42cac36021f1bbb4701d4b3a/src/page/test/castlabsWatermark/watermarked-image.png
--------------------------------------------------------------------------------
/src/page/test/conferenceComposite/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Conference Composite Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
45 |
46 |
47 | {{> top-bar }}
48 |
24 | {{> footer}}
25 | {{> body-scripts}}
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/src/page/test/publishAudioCustomSettingsWebRTC/README.md:
--------------------------------------------------------------------------------
1 | # Publish Custom Settings
2 |
3 | This example allows you to customize the media broadcast settings for a WebRTC Publisher.
4 |
5 | **Please refer to the [Basic Publisher Documentation](../publish/README.md) to learn more about the basic setup.**
6 |
7 | ## Example Code
8 |
9 | - **[index.html](index.html)**
10 | - **[index.js](index.js)**
11 |
12 | # Running the Example
13 |
14 | Fill in any custom broadcast settings for testing, then press **Publish**.
15 |
16 | ## Settings
17 |
18 | Settings included for customization:
19 |
20 | | Name | Usage |
21 | | -------------------- | ----------------------------------------------------------------------------------------------------------- |
22 | | Camera Device | The Camera Device to broadcast with. |
23 | | Camera Width | The requested Camera width to broadcast. |
24 | | Camera Height | The requested Camera height to broadcast. |
25 | | Camera Framerate | The frequested framerate at which to broadcast. |
26 | | Video Bitrate (Kbps) | The requested video bitrate to broadcast. This will munge the SDP being sent out in Peer Connection offers. |
27 | | Audio Bitrate (Kbps) | The requested audio bitrate to broadcast. This will munge the SDP being sent out in Peer Connection offers. |
28 | | Key Framerate (ms) | The requested time - in milliseconds - to send a key frame during broadcast. |
29 |
--------------------------------------------------------------------------------
/src/page/test/publishAuth/README.md:
--------------------------------------------------------------------------------
1 | # Publisher Authentication using Red5 Pro
2 |
3 | This is an example of authenticating a Broadcast for stream playback.
4 |
5 | **Please refer to the [Basic Publisher Documentation](../publisher/README.md) to learn more about the basic setup.**
6 |
7 | ## Example Code
8 |
9 | - **[index.html](index.html)**
10 | - **[index.js](index.js)**
11 |
12 | > This example requires you to enable the `SimpleAuthentication` Plugin for the `live` webapp. More information: [Simple Authentication Plugin](https://www.red5.net/docs/special/authplugin/overview
13 |
14 | # Authenticating
15 |
16 | With the username and password known from the Red5 Pro Server `webapps/live/WEB-INF/simple-auth-plugin.credentials` file (if following the basic auth setup of the Red5 Pro Server), those values are provided to the `connectionParams` attribute of the subscriber configuration(s).
17 |
18 | For example, if you have defined the authorization of a user `foo` with a password `bar`, the configuration addition would look like the following:
19 |
20 | ```js
21 | connectionParms: {
22 | username: 'foo',
23 | password: 'bar',
24 | }
25 | ```
26 |
27 | ## Example
28 |
29 | In the example, a login form is provided to allow the user to enter in their username and password. Those field values are added to the respective properties in the `connectionParms` attribute of the configuration(s) upon submit of the form, and the request to broadcast started:
30 |
31 | ```js
32 | submitButton.addEventListener('click', function () {
33 | configuration.connectionParams = {
34 | username: usernameField.value,
35 | password: passwordField.value,
36 | }
37 | start()
38 | })
39 | ```
40 |
--------------------------------------------------------------------------------
/src/page/test/publishAuth/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Publish Authentication Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
26 |
27 |
28 | {{> top-bar }}
29 |
54 | {{> footer}}
55 | {{> body-scripts}}
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/src/page/test/publishAvailableHDSettings/README.md:
--------------------------------------------------------------------------------
1 | # Publish Custom Settings
2 |
3 | This example allows you to customize the media broadcast settings for a WebRTC Publisher.
4 |
5 | **Please refer to the [Basic Publisher Documentation](../publish/README.md) to learn more about the basic setup.**
6 |
7 | ## Example Code
8 |
9 | - **[index.html](index.html)**
10 | - **[index.js](index.js)**
11 |
12 | # Running the Example
13 |
14 | Fill in any custom broadcast settings for testing, then press **Publish**.
15 |
16 | ## Settings
17 |
18 | Settings included for customization:
19 |
20 | | Name | Usage |
21 | | -------------------- | ----------------------------------------------------------------------------------------------------------- |
22 | | Camera Device | The Camera Device to broadcast with. |
23 | | Camera Width | The requested Camera width to broadcast. |
24 | | Camera Height | The requested Camera height to broadcast. |
25 | | Camera Framerate | The frequested framerate at which to broadcast. |
26 | | Video Bitrate (Kbps) | The requested video bitrate to broadcast. This will munge the SDP being sent out in Peer Connection offers. |
27 | | Audio Bitrate (Kbps) | The requested audio bitrate to broadcast. This will munge the SDP being sent out in Peer Connection offers. |
28 | | Key Framerate (ms) | The requested time - in milliseconds - to send a key frame during broadcast. |
29 |
--------------------------------------------------------------------------------
/src/page/test/publishCall/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Publish Server Call Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
28 |
29 |
30 | {{> top-bar }}
31 |
37 | {{> footer}}
38 | {{> body-scripts}}
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/src/page/test/publishCustomSettingsWebRTC/README.md:
--------------------------------------------------------------------------------
1 | # Publish Custom Settings
2 |
3 | This example allows you to customize the media broadcast settings for a WebRTC Publisher.
4 |
5 | **Please refer to the [Basic Publisher Documentation](../publish/README.md) to learn more about the basic setup.**
6 |
7 | ## Example Code
8 |
9 | - **[index.html](index.html)**
10 | - **[index.js](index.js)**
11 |
12 | # Running the Example
13 |
14 | Fill in any custom broadcast settings for testing, then press **Publish**.
15 |
16 | ## Settings
17 |
18 | Settings included for customization:
19 |
20 | | Name | Usage |
21 | | -------------------- | ----------------------------------------------------------------------------------------------------------- |
22 | | Camera Device | The Camera Device to broadcast with. |
23 | | Camera Width | The requested Camera width to broadcast. |
24 | | Camera Height | The requested Camera height to broadcast. |
25 | | Camera Framerate | The frequested framerate at which to broadcast. |
26 | | Video Bitrate (Kbps) | The requested video bitrate to broadcast. This will munge the SDP being sent out in Peer Connection offers. |
27 | | Audio Bitrate (Kbps) | The requested audio bitrate to broadcast. This will munge the SDP being sent out in Peer Connection offers. |
28 | | Key Framerate (ms) | The requested time - in milliseconds - to send a key frame during broadcast. |
29 |
--------------------------------------------------------------------------------
/src/page/test/publishFlashvars/README.md:
--------------------------------------------------------------------------------
1 | # Publish FlashVars for Flash/RTMP
2 |
3 | This is an example of providing publisher params as FlashVars to a Flash-based Publisher.
4 |
5 | **Please refer to the [Basic Publisher Documentation](../publish/README.md) to learn more about the basic setup.**
6 |
7 | ## Example Code
8 |
9 | - **[index.html](index.html)**
10 | - **[index.js](index.js)**
11 |
12 |
--------------------------------------------------------------------------------
/src/page/test/publishHQAudio/README.md:
--------------------------------------------------------------------------------
1 | # Publish HQ Audio
2 |
3 | This is an example of broadcasting with High-Quality Audio.
4 |
5 | **Please refer to the [Basic Publisher Documentation](../publish/README.md) to learn more about the basic setup.**
6 |
7 | ### Example Code
8 |
9 | - **[index.html](index.html)**
10 | - **[index.js](index.js)**
11 |
12 | # How to Publish with HQ Audio
13 |
14 | To publish with High-Quality Audio, define the `sampleRate` on the `audio` constraint passed in the intialization configuration through the `mediaConstraints` property.
15 |
16 | ```js
17 | function getUserMediaConfiguration() {
18 | if (typeof configuration.mediaConstraints.audio === 'boolean') {
19 | configuration.mediaConstraints.audio = {}
20 | }
21 | configuration.mediaConstraints.audio.sampleRate = 44100
22 | return {
23 | mediaConstraints: {
24 | audio: configuration.useAudio
25 | ? configuration.mediaConstraints.audio
26 | : false,
27 | video: configuration.useVideo
28 | ? configuration.mediaConstraints.video
29 | : false,
30 | },
31 | }
32 | }
33 | ```
34 |
35 | > More information: [Media.getUserMedia from MDN](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
36 |
--------------------------------------------------------------------------------
/src/page/test/publishHQAudio/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Publish HQ Audio Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
9 |
10 | {{> top-bar }}
11 |
51 | {{> footer}}
52 | {{> body-scripts}}
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/src/page/test/publishUnpublish/README.md:
--------------------------------------------------------------------------------
1 | # Unpublishing and optionally removing preview
2 |
3 | This is an example of removing the video preview and releasing Media browser access when using the `clearMediaOnUnpublish` configuration property of a broadcast stream.
4 |
5 | > **WebRTC Only**
6 |
7 | ## Example Code
8 | - **[index.html](index.html)**
9 | - **[index.js](index.js)**
10 |
11 | # clearMediaOnUnpublish
12 |
13 | The `clearMediaOnUnpublish` configuration property for a publisher is a `boolean` value that either retains Media capture and preview in a `video` element if left as default (`false`), or releases the Media (camera, microphone and tab indicator of a browser) and removes the preview from the `video` element if set to `true`.
14 |
15 | The default of `false` is by design for some frontends that require to maintain the Camera and Microphone connections between broadcasting sessions.
16 |
17 | However, this default design can be overriden by setting the `clearMediaOnUnpublish` config property value to `true`. When requesting to `unpublish`, this will affectively:
18 |
19 | * Removal of media video in the target `video` element
20 | * Release of the Camera from the browser
21 | * Release of the Microphone from the browser
22 |
23 | > To the end-user, this will turn off the camera light of the Camera being used.
24 |
25 | Internally, what the SDK does is:
26 |
27 | 1. Set the `srcObject` on the target `video` element to `null`.
28 | 2. Traverses and stops all the `MediaStreamTracks` of the underlying `MediaStream`.
29 |
--------------------------------------------------------------------------------
/src/page/test/publishUnpublish/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Publish Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
15 |
16 |
17 | {{> top-bar }}
18 |
38 | {{> footer}}
39 | {{> body-scripts}}
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/src/page/test/publishVP8/README.md:
--------------------------------------------------------------------------------
1 | # Specifying VP8 Encoder for Publisher
2 |
3 | This example demonstrates sending AMF Metadata on a Publisher stream connection.
4 |
5 | **Please refer to the [Basic Publisher Documentation](../publish/README.md) to learn more about the basic setup.**
6 |
7 | ## Example Code
8 |
9 | - **[index.html](index.html)**
10 | - **[index.js](index.js)**
11 |
12 | # How to define VP8 Encoding
13 |
14 | The init configuration for a `WHIPClient` and `RTCPublisher` has the following attribute you can use to specify whether to use `VP8` or the default (`H264`) encoding:
15 |
16 | - `forceVP8`: If set to `true`, `VP8` encoding will be used. If `false` (default), it will use `H264`.
17 |
--------------------------------------------------------------------------------
/src/page/test/publishVP8/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Publish V8 Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
9 |
10 | {{> top-bar }}
11 |
24 | {{> footer}}
25 | {{> body-scripts}}
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/src/page/test/publishValidation/README.md:
--------------------------------------------------------------------------------
1 | # Passing Validation parameters when Publishing
2 |
3 | **Validation Parameters** may be required for your current project. This is a way to additionally pass in query parameters when establishing a connection to the server.
4 |
5 | **Please refer to the [Basic Publisher Documentation](../publish/README.md) to learn more about the basic setup.**
6 |
7 | ## Example Code
8 |
9 | - **[index.html](index.html)**
10 | - **[index.js](index.js)**
11 |
12 | # Setup
13 |
14 | The UI provides a form to allow for adding validation parameters. Once you have added the proper validation parameters, click the **Start Publishing** button Red5 Pro SDK will provide those parameters as key-value query parameters in its connection request to the server.
15 |
16 | The `getValidationParams` function just collects the parameter form fields and generates the key:value map. For example, if you entered in `foo` for the **Parameter Name** and `bar` for the **Parameter Value**, the `connectionParams` property would be:
17 |
18 | ```json
19 | {
20 | "foo": "bar"
21 | }
22 | ```
23 |
24 | This is similar to the [Publish Round Trip Authentiation](../publishRoundTripAuth/) example of which a `username`, `password` and `token` are sent to be validated for credentials.
25 |
26 | This example allows you to additionally pass any other key-value pairs required for your application.
27 |
--------------------------------------------------------------------------------
/src/page/test/publishValidation/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Publish Validation Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
9 |
10 |
11 | {{> top-bar }}
12 |
29 | {{> footer}}
30 | {{> body-scripts}}
31 | {{> mobile-subscriber-util}}
32 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/src/page/test/subscribeAuth/README.md:
--------------------------------------------------------------------------------
1 | # Subscribe Authentication using Red5 Pro
2 |
3 | This is an example of authenticating a Subscription for stream playback.
4 |
5 | **Please refer to the [Basic Subscriber Documentation](../subscribe/README.md) to learn more about the basic setup.**
6 |
7 | ## Example Code
8 |
9 | - **[index.html](index.html)**
10 | - **[index.js](index.js)**
11 |
12 | > This example requires you to enable the `SimpleAuthentication` Plugin for the `live` webapp. More information: [Simple Authentication Plugin](https://www.red5.net/docs/special/authplugin/overview
13 |
14 | # Authenticating
15 |
16 | With the username and password known from the Red5 Pro Server `webapps/live/WEB-INF/simple-auth-plugin.credentials` file (if following the basic auth setup of the Red5 Pro Server), those values are provided to the `connectionParams` attribute of the subscriber configuration(s).
17 |
18 | For example, if you have defined the authorization of a user `foo` with a password `bar`, the configuration addition would look like the following:
19 |
20 | ```js
21 | connectionParms: {
22 | username: 'foo',
23 | password: 'bar'
24 | }
25 | ```
26 |
27 | ## Example
28 |
29 | In the example, a login form is provided to allow the user to enter in their username and password. Those field values are added to the respective properties in the `connectionParms` attribute of the configuration(s) upon submit of the form, and the request to playback started:
30 |
31 | ```js
32 | submitButton.addEventListener('click', function () {
33 | configuration.connectionParams = {
34 | username: usernameField.value,
35 | password: passwordField.value,
36 | }
37 | start()
38 | })
39 | ```
40 |
--------------------------------------------------------------------------------
/src/page/test/subscribeAuth/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Subscriber Authentication Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
26 |
27 |
28 | {{> top-bar }}
29 |
36 | {{> footer}}
37 | {{> body-scripts}}
38 | {{> mobile-subscriber-util}}
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/src/page/test/subscribeScreenShare/README.md:
--------------------------------------------------------------------------------
1 | # Subscribe Screen Share using Red5 Pro
2 |
3 | This is an example subscribing to a broadcast with screen sharing. It is very similar to how you would subscribe to a video broadcast. However, this example makes to consumer connections: one for the screen share and one for the audio. This is due to the fact that is it not possible at the time of this writing (_November 30th, 2017_) to provide a valid media constraint with both audio an screen sharing.
4 |
5 | **Please refer to the [Basic Subscriber Documentation](../subscribe/README.md) to learn more about the basic setup.**
6 |
7 | ## Example Code
8 | - **[index.html](index.html)**
9 | - **[index.js](index.js)**
10 |
11 | # How to Subscribe
12 |
13 | First launch the [Publisher Screen Share Test](../publishScreenShare) in a separate window/tab and follow the extension installation requirements (depending on your browser).
14 |
--------------------------------------------------------------------------------
/src/page/test/subscribeScreenShare/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Subscriber Screen Share Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
9 |
10 | {{> top-bar }}
11 |
12 | {{> settings-link}}
13 |
14 |
15 |
This example attempts to make two connections: One for ScreenShare & One for Audio from the Broadcaster.
45 | {{> footer}}
46 | {{> body-scripts}}
47 | {{> mobile-subscriber-util}}
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/src/page/test/subscribeStandby/README.md:
--------------------------------------------------------------------------------
1 | # Subscribe and Standby using Red5 Pro
2 |
3 | This is 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; this would be considered "Enabling Standby". Additionally, the video and audio data can be requested to continue by "Disabling Standby" again.
4 |
5 | > For more detailed information on Configuring and Subscribing with the Red5 Pro SDK, please visit the [Red5 Pro Documentation](https://www.red5.net/docs/development/subscriber/webrtc).
6 |
7 | ## Example Code
8 |
9 | - **[index.html](index.html)**
10 | - **[index.js](index.js)**
11 |
12 | # How to use the Standby API
13 |
14 | Exposed on the WebRTC-based Subscriber are the following methods for the Standby API:
15 |
16 | - `enableStandby`
17 | - `disableStandby`
18 |
19 | By calling `enableStandby`, a socket request will be made for the server to temporarily "pause" the sending of audio and video data on the `MediaStream`. Calling `disableStandby` while in "standby" mode will make a request on the server to start sending the media data again.
20 |
21 | ```javascript
22 | function allowStandby() {
23 | var inStandby = false
24 | standbyButton.removeAttribute('disabled')
25 | standbyButton.addEventListener('click', function () {
26 | if (!inStandby && targetSubscriber) {
27 | targetSubscriber.enableStandby()
28 | standbyButton.innerText = 'Disable Standby'
29 | inStandby = !inStandby
30 | } else if (inStandby && targetSubscriber) {
31 | targetSubscriber.disableStandby()
32 | standbyButton.innerText = 'Enable Standby'
33 | inStandby = !inStandby
34 | }
35 | })
36 | }
37 | ```
38 |
--------------------------------------------------------------------------------
/src/page/test/subscribeStandby/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='WebRTC Subscriber Standby Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
15 |
16 |
17 | {{> top-bar }}
18 |
36 | {{> footer}}
37 | {{> body-scripts}}
38 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/src/page/test/subscribeSwitch/Readme.md:
--------------------------------------------------------------------------------
1 | # WebRTC Subscriber Switch
2 |
3 | Through WebRTC, the current subscriber's stream may be switched to another live stream. This example demonstrates.
4 |
5 | This example is based on the _subscriber_ example. See that example's [README](../subscriber/README.md) for details on subscribing. Like the subscriber example, this example assumes there is a live stream by default named "stream1".
6 |
7 | This example demonstrates using the `callServer` API to invoke a method on the Application Adapter of the target app. The `callServer` method returns a `Promise`-like object that can additional deliver return data from the server.
8 |
9 | ### Example Code
10 |
11 | - **[index.html](index.html)**
12 | - **[index.js](index.js)**
13 |
14 | # Calling the server
15 |
16 | The `switchStreams` server call requires two pieces of data:
17 |
18 | - **`path`** to the live stream. This includes the context path and stream name, e.g., "live/stream1".
19 | - **`isImmediate`** -- if **true**, the audio will switch immediately and the original stream's video will freeze, and the video will switch to the new stream at the next keyframe. If **false**, the original continues uninterrupted until a new keyframe is received on the new stream, at which point audio and video switch simultaneously.
20 |
21 | The server call then contains a JSON array with a single entry containing these two parameters:
22 |
23 | ```javascript
24 | targetSubscriber.callServer('switchStreams', [
25 | {
26 | path: streamPath.value,
27 | isImmediate: true,
28 | },
29 | ])
30 | ```
31 |
32 | The server responds with a message:
33 |
34 | ```javascript
35 | {
36 | "data": {
37 | "type": "result",
38 | "message": "Stream switch: Success"
39 | }
40 | }
41 | ```
42 |
--------------------------------------------------------------------------------
/src/page/test/subscribeSwitch/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Subscriber Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
14 |
15 |
16 | {{> top-bar }}
17 |
43 | {{> footer}}
44 | {{> body-scripts}}
45 | {{> mobile-subscriber-util}}
46 |
47 |
48 |
49 |
--------------------------------------------------------------------------------
/src/page/test/subscribeValidation/README.md:
--------------------------------------------------------------------------------
1 | # Passing Validation parameters when Subscribing
2 |
3 | **Validation Parameters** may be required for your current project. This is a way to additionally pass in query parameters when establishing a connection to the server.
4 |
5 | **Please refer to the [Basic Subscriber Documentation](../subscribe/README.md) to learn more about the basic setup.**
6 |
7 | ## Example Code
8 |
9 | - **[index.html](index.html)**
10 | - **[index.js](index.js)**
11 |
12 | # Setup
13 |
14 | The UI provides a form to allow for adding validation parameters. Once you have added the proper validation parameters, click the **Start Subscribing** button Red5 Pro SDK will provide those parameters as key-value query parameters in its connection request to the server.
15 |
16 | The `getValidationParams` function just collects the parameter form fields and generates the key:value map. For example, if you entered in `foo` for the **Parameter Name** and `bar` for the **Parameter Value**, the `connectionParams` property would be:
17 |
18 | ```json
19 | {
20 | "foo": "bar"
21 | }
22 | ```
23 |
24 | This is similar to the [Subscribe Round Trip Authentiation](../subscribeRoundTripAuth/) example of which a `username`, `password` and `token` are sent to be validated for credentials.
25 |
26 | This example allows you to additionally pass any other key-value pairs required for your application.
27 |
--------------------------------------------------------------------------------
/src/page/test/subscribeValidation/index.html:
--------------------------------------------------------------------------------
1 |
2 | {{> license}}
3 |
4 |
5 | {{> meta title='Subscriber Validation Test'}}
6 | {{> header-scripts}}
7 | {{> header-stylesheets}}
8 |
9 |
10 |
11 | {{> top-bar }}
12 |
45 | {{> footer}}
46 | {{> body-scripts}}
47 | {{> mobile-subscriber-util}}
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/src/page/test/subscribeVideoMute/README.md:
--------------------------------------------------------------------------------
1 | # Subscribe Video Mute
2 |
3 | The intent of this test is to demonstrate subscribing to a broadcast which has its video stream "muted". We have noticed that in Chrome and Safari browsers, when trying to play back a stream that has both Audio and Video tracks, but the Video tracks are empty - because the broadcaster has turned off their Camera - that no playback occurs when assigning the `MediaStream` source to a `