Skip to main content

Using the QoS Client

Configuration​

Most parameters available to the Vindral Web SDK are easily accessible within the QoS Client. Most settings are self-explanatory but read on for a full walk-through.

After editing, apply the configuration by pressing Start (or Save settings for existing configuration edits) in the bottom right corner. The browser URL will be updated with the newly configured parameters and can be shared with other devices.

Browsing back and forth between settings is possible as browser history is applied.

qos_settings

Connecting to a channel or channel group​

Connect​

  • Public Endpoint: Vindral LiveCloud service is using https://lb.cdn.vindral.com/ by default.

If your organization is hosting Vindral LiveEngine in a custom setup, the Public Endpoint URL is provided by your organization.

Connect to specific edge​

For testing, it is possible to bypass the load-balancing of edge servers, connecting directly to a specific edge server.

  • Edge URL - wss://[edge].cdn.vindral.com

Channel​

Select between watching a single channel or a channel group in the dropdown "Channel group or specific channel". The difference is that a channel group enables channel switching in the player between your multiple channels.

  • Channel group or specific channel - Provide the channel group ID and wait for the channel group to resolve. Then select which channel from the group to start watching.
  • Channel ID - Provide the channel ID for a specific channel.

Buffer​

  • Min Buffer Time - Seconds of buffer. The minimum desired buffer of media data in the player.
  • Max Buffer Time - Maximum buffer time. Initially set to the same as the Min Buffer Time, and can be used to allow clients on jittery networks to have a higher buffer if needed for improved stability.

Authentication​

Use Authentication to validate access to the channels. This parameter is optional and only necessary if the channel or channel group is configured for advanced authentication.

  • Secret key - Provide your secret key.
  • Authentication token - The token will be auto-generated when you provide the secret key.

Feature configuration​

Features are enabled and disabled via toggles.

Media​

settings1

  • Audio & video - When selected, audio and video are enabled in the player.
  • Audio only - When selected, only audio is enabled in the player.
  • Video only - When selected, only video is enabled in the player.

Features​

  • Decoder preference - Sets the priority order for video decoders. Available decoders are webcodecs, mse, and wasm. The SDK will use the first decoder in the list that the browser supports. The default order is mse, wasm. Set webcodecs first to opt in to low-level decoding via the WebCodecs API. If DRM is active, the SDK will use mse regardless of order. See WebCodecs & Offscreen Renderer for details.
  • Stream to media element - When enabled in the QoS client (default), canvas-rendered playback is routed through a <video> element via captureStream(). This keeps media-element features such as fullscreen and Picture-in-Picture available for non-MSE playback. When disabled, canvas-rendered playback stays on the canvas. This setting is separate from Enable OffscreenCanvas. See WebCodecs & Offscreen Renderer for details.
  • Enable OffscreenCanvas - Only applies when WebCodecs is the active decoder. When enabled (default), video rendering happens in a worker via OffscreenCanvas when supported. When disabled, WebCodecs still decodes video but renders on the main-thread canvas instead.
  • WebCodecs hardware acceleration - Controls whether the WebCodecs decoder uses hardware or software decoding. Options are no-preference (default, browser decides), prefer-hardware (lower CPU usage), and prefer-software (can reduce frame latency on devices where the hardware decoder introduces buffering). See Hardware acceleration and decoder latency for details.
  • Enable OPUS (via MSE) - Audio codec that some browsers can use in MSE.
  • Enable ABR Switching - Adaptive bitrate will adapt the quality of the stream based on your connection.
  • Enable Size Based Resolution Cap - Limit max bitrate depending on container/screen size.
  • Enable burst - For clients with good bandwidth, the time to the first frame will be faster.
  • Muted - Mute the QoS Client.
  • Enable iOS Wake Lock - Prevents iOS devices enter "sleep" mode (needs user interaction in player, i.e enable audio).
  • Show Player Controls - Enable or disable the player controls.
  • Show Metadata Events - Display timed metadata events (cue points).
  • Show Needs User Input Events - Useful for debugging and understanding when user input events are required for audio playback (and sometimes video playback).
  • Save Runtime Options - Enable or disable this feature to automatically save the video quality configuration done via the player controls.

Video element with controls​

settings2

settings_mute Mute/Unmute - An Unmute button is displayed if the Vindral Live Embedded player cannot play sound automatically without user input.

settings_quality Quality selector - Choose the quality of the video. If the feature "Enable ABR switching" (Adaptive bitrate) is not activated, the quality selector works as a fixed bitrate setting. For example, if you choose 500 kbit, you will always get the 500 kbit video stream. If "Enable ABR switching" is activated, the quality selector works as max bitrate. You will receive the selected bitrate quality or lower depending on your internet connectivity. However, it will never be higher than the selected bitrate.

settings_channel Channel switcher - Switch between channels in a channel group. The button is only visible if there is more than one channel in the channel group to which the current channel belongs.

settings_pip Picture-in-Picture - A button is displayed if your device and operating system support picture-in-picture.

settings_1to1 1-to-1 button (magnifying glass) - Enables showing the native resolution of the video and turning scaling off.

settings_google Google Cast - A button is displayed if the client supports and allows it.

settings_full Fullscreen - Enables fullscreen mode. Only visible on devices that support fullscreen.

Demo examples​

Vindral LiveCloud has several publicly available demo channels. These are the same channels found at demo.vindral.com.

These can be used to test the QoS Client or as test channels when developing your player implementation based on the Web SDK.

settings3

Query Strings​

Settings are persisted using query parameters in the QoS URL.

This is a link to the demo channels in the QoS Client:

https://qos.vindral.com/?core.channelId=vindral_demo1_ci_099ee1fa-80f3-455e-aa23-3d184e93e04f&core.channelGroupId=vindral_demo_pk_932730be-db0c-46a0-a592-cfce7bdc5a43

As can be seen, &core.channelId=<ChannelId> is used for setting the channel. The channel group can be set via &core.channelGroupId=<ChannelGroupId>.

The core options are set via core.<option name> and the player options are set via player.<option name>.

Examples:

  • Lowest-latency WebCodecs test: https://qos.vindral.com/?core.channelId=vindral_sync_ci_ef59f6a5-5107-4773-9b91-fd5790503632&core.decoders=webcodecs,mse,wasm&core.offscreenCanvasEnabled=true&core.streamToMediaElementEnabled=false&core.minBufferTime=500
  • WebCodecs with media-element bridge for fullscreen/PiP: https://qos.vindral.com/?core.channelId=vindral_sync_ci_ef59f6a5-5107-4773-9b91-fd5790503632&core.decoders=webcodecs,mse,wasm&core.offscreenCanvasEnabled=true&core.streamToMediaElementEnabled=true&core.webcodecsHardwareAcceleration=prefer-software&core.minBufferTime=500

Arrays are serialized as comma-separated values, for example core.decoders=webcodecs,mse,wasm.