Skip to main content

Overview

Ready to start streaming? There are a few things you need to know before you get started.

Installing the Native Frame Encoder and Player SDKs​

To install the Native Frame Encoder and Player SDKs, you'll need to set up your environment to use Native Frame's SDK's.

1. Create the .npmrc File​

Add a .npmrc file into your project directory (next to your package.json):

touch .npmrc

2. Add the @video registry to your .npmrc file and save the file:​

@video:registry=https://npm-package.nativeframe.com

You've now set up your .npmrc with the @video registry and are ready to start using our SDKs in your projects!

Importing Encoder and Player SDKs​

Once you are done setting up your .npmrc file with the @video registry you can add and import the Encoder and Player SDKs into your project.

1. Install the core or web package​

For projects not using React or choose to not use the SDK provided, you only need the core package:

npm install @video/video-client-core

For projects using React and the SDK you will need the web package:

💡 Note

This package includes the entire core package

npm install @video/video-client-web

2. Import the core or web package into your files and begin usage:​

import {
   PlayerUiContext,
   ...other imports
} from "@video/video-client-web";
import {
   player,
   ...other imports
} from "@video/video-client-core";

Scopes​

Scopes are used by the streaming API to determine what type of user is broadcasting or consuming a stream.

There are two broadcasting scopes:

  • broadcaster - A user who is broadcasting a public stream
  • private-broadcaster - A user who is broadcasting a private stream

And there are two viewer scopes:

  • viewer - A user who is consuming a public stream
  • private-viewer - A user who is consuming a private stream

Best Practices for Implementing Live Streaming​

To ensure the best possible experience for your broadcasters and viewers, consider these best practices when implementing Native Frame:

  1. Optimize for Different Network Conditions:

    • Implement adaptive bitrate streaming to accommodate viewers with varying internet speeds.
    • Provide quality selection options in your video player to give users control over their experience.

  2. Prioritize User Experience:

    • Design intuitive interfaces for both broadcasters and viewers.
    • Implement features like chat, reactions, or polls to increase engagement.

  3. Plan for Scale:

    • Design your architecture to handle sudden spikes in viewership.
    • Utilize Native Frame's CDN capabilities to ensure smooth delivery at scale.

  4. Implement Robust Error Handling:

    • Gracefully handle common issues like network interruptions or device compatibility problems.
    • Provide clear feedback to users when issues occur.

  5. Monitor and Analyze:

    • Utilize Native Frame's analytics to track performance and user engagement.
    • Regularly review metrics to identify areas for improvement.

  6. Ensure Security:

    • Implement proper authentication and authorization mechanisms.
    • Use secure protocols (HTTPS) for all communications.

  7. Test Thoroughly:

    • Conduct extensive testing across different devices, browsers, and network conditions.
    • Consider implementing a beta testing program with real users before full launch.

By following these best practices, you'll be well on your way to creating a robust, scalable, and user-friendly live streaming solution with Native Frame.