Skip to main content

Video Components

Encoder​

The Native Frame Encoder SDK is a powerful and flexible tool designed for capturing, processing, and transmitting live video and audio content over the internet. In the context of live streaming, an encoder is responsible for converting raw audio and video input into a digital format that can be efficiently transmitted and decoded by viewers.

Native Frame's encoder is a core component to the platform, enabling broadcasters to create high-quality, low-latency live streams with ease. It's built to seamlessly integrate with existing web applications, providing a customizable solution for implementing live streaming capabilities. Whether you're building a platform for online education, live events, or interactive broadcasts, Native Frame's encoder offers the tools and features needed to deliver exceptional streaming experiences to your audience.

Key Features of Native Frame Encoder​

Protocol Support​

Native Frame's encoder supports both WebRTC (Web Real-Time Communication) and RTMP (Real-Time Messaging Protocol). WebRTC enables ultra-low latency streaming directly in web browsers, making it ideal for interactive applications. RTMP offers robust support for professional broadcasting software and is widely compatible with various streaming platforms.

Real-time Encoding​

The encoder excels in real-time encoding, allowing for on-the-fly processing of audio and video content. This feature is crucial for maintaining stream quality and minimizing delay, ensuring that viewers receive a smooth and responsive viewing experience.

Adaptive Bitrate Streaming​

Native Frame's encoder supports adaptive bitrate streaming, which automatically adjusts the video quality based on the viewer's network conditions. This ensures that content reaches the widest possible audience, regardless of their internet speed or device capabilities.

Multi-source Support​

The encoder can handle multiple video and audio sources, allowing broadcasters to switch between different cameras, share their screen, or mix various inputs during a live stream.

Audio Processing​

Advanced audio processing capabilities include noise suppression and echo cancellation, enhancing the overall quality of the audio in live streams.

Encoder Components​

VideoClient​

The VideoClient is the main class for interacting with Native Frame's services. It handles the creation and management of broadcasting sessions, as well as requesting players for viewing streams.

MediaStreamController​

The MediaStreamController manages audio and video input devices, allowing for fine-grained control over stream properties such as resolution, frame rate, and audio settings.

💡 Note

MediaStreamController is a browser API. Learn more about it here.

User Interface Components & EncoderUiState​

Native Frame provides a set of pre-built React components that can be easily integrated into web applications. These include:

  • CameraButton: For toggling the camera on/off
  • MicrophoneButton: For toggling the microphone on/off
  • BroadcastButton: For starting/stopping the broadcast
  • ScreenCaptureButton: For toggling screen sharing
  • EncoderVideo: For displaying the video preview

These components are designed to work seamlessly with the encoder's state management system (the EncoderUiState class), providing a responsive and intuitive user interface for broadcasters.

Advanced Features​

Screen Sharing​

Native Frame's encoder supports screen sharing, allowing broadcasters to share their screen content alongside or instead of their camera feed.

Multiple Video Sources​

The encoder allows management of multiple video inputs, enabling broadcasters to switch between different sources or combine them for more dynamic content.

Custom Layouts​

Developers can create custom layouts and designs for the encoder interface, allowing for seamless integration with existing applications and branding.

Performance and Optimization​

Native Frame's encoder is designed with performance in mind, offering features such as:

  • CPU usage monitoring
  • Adjustable video quality settings
  • Support for hardware-accelerated encoding when available

These features allow developers to fine-tune the encoder's performance based on the specific requirements of their application and the capabilities of their users' devices.

Security and Authentication​

The encoder integrates with Native Frame's authentication system, ensuring that only authorized users can broadcast. It supports token-based authentication, allowing for secure and flexible access control.

Integration and Extensibility​

Native Frame's encoder is designed to be easily integrated into existing web applications. It provides a comprehensive API that allows developers to customize and extend its functionality to meet specific requirements.

In conclusion, the Native Frame encoder offers a powerful, flexible, and user-friendly solution for implementing live streaming capabilities in web applications. Its combination of advanced features, performance optimization, and ease of integration makes it an excellent choice for a wide range of streaming applications, from simple one-to-many broadcasts to complex interactive streaming experiences.

Players​

Key Concepts​

  • Player - Native Frame's video consumer API that allows receiving video and audio data via web calls
  • Manifest - JSON file containing stream information and available variants
  • Adaptive Bitrate Streaming - Technique to adjust video quality based on network conditions

Player​

Manifest Player​

A Manifest Player is a video consumer that uses a manifest URL to receive video data. The manifest is a JSON file containing information about the available stream variants and their properties. This allows for adaptive bitrate streaming, where the player can switch between different quality levels based on network conditions.

In live streaming, a manifest is a crucial component that helps ensure smooth playback across various devices and network conditions. Let's dive into what a manifest is and why it's so important for your live streaming platform.

The Manifest: Your Video's GPS​

A manifest is essentially a JSON file that provides two key pieces of information:

  1. Details about the streaming video, such as:

    • Stream name
    • Available encodings
    • Supported formats
    • Any additional metadata

  2. A list of all available streams for that particular video, specifically different resolutions and bitrates of the same content.

Think of it as a menu of video options, allowing viewers to choose the "dish" that best suits their device and internet connection.

Manifests and Adaptive Bitrate Streaming: A Perfect Strategy​

The various stream options listed in the manifest are crucial for adaptive bitrate streaming. Much like how teams adapt their strategies based on changing conditions, a video player can adapt to network conditions using the information in the manifest.

For example:

  • If a viewer is on a slow connection, the player can select a lower bitrate stream to prevent buffering.
  • When the network improves, it can seamlessly switch to a higher quality stream for a better viewing experience.

This adaptive approach ensures that your audience can enjoy the stream without interruptions, whether they're watching on a high-speed fiber connection or struggling with spotty 3G.

Why Manifests Matter for Your Streaming Platform​

  1. Viewer Experience: Manifests enable adaptive streaming, ensuring viewers can watch streams smoothly regardless of their network conditions.

  2. Bandwidth Optimization: By offering multiple stream options, you're not forcing high-quality streams on viewers who can't handle them, saving bandwidth and reducing costs.

  3. Device Compatibility: Different devices support different formats and codecs. Manifests allow you to offer various options, ensuring compatibility across a wide range of devices.

  4. Content Management: Manifests make it easier to manage and update your live streams without changing the core video player implementation.

By understanding and utilizing manifests effectively, you're ensuring that your streaming platform can deliver a top-notch performance, no matter where or how your audience is watching.

Native Frame's Manifest Implementation​

Here's how it works:

  1. When a broadcast starts, the platform orchestration communicates with the stream integration service to verify if the stream is allowed to begin.
  2. The stream integration service checks whether the stream may be started with the integrator and responds with a public key, which orchestration uses to generate the manifest URL.
  3. Once the broadcast is confirmed to be running, orchestration delivers the manifest URL back to the stream integration service.

This process ensures that only authorized streams are broadcasted and that each stream has a unique, accessible manifest for viewers.

Key Authorization Types for Accessing Manifests​

Native Frame supports several key types for accessing manifests, each serving a different purpose:

  1. publicKey: The preferred method for viewers to access stream data.
  2. privateKey: Used primarily for administrative purposes and by broadcasters.
  3. userSlug: Available if the integration system provides this value.
  4. userId: Available if the integration system provides this value.

To use these key types, append them as query parameters to your manifest URL:

http://{manifesthost}/live/{key}.json?lookupType=publickey

By leveraging these different key types, you can implement fine-grained access control and manage your streams effectively.

Remember, in the world of live streaming, the manifest is your behind-the-scenes crew - working tirelessly to keep everything running smoothly and efficiently. Now, let's get your streams up and running for your audience to enjoy!