Skip to main content

Getting Started

This guide will walk you through the process of getting started with Native Frame, whether you're looking for a quick no-code solution or a deep integration into your existing platform.

Quick Start: No-Code Solution​

If you want to test Native Frame's capabilities without writing any code, our no-code solution is perfect for you. You can set up a live stream in minutes using our dashboard.

Get started with our No-Code Guide

In this guide, you'll learn how to:

  • Create a new stream
  • Start broadcasting
  • Share your stream with viewers

Quick Start: Streaming with External Software​

If you want to stream with 3rd party software, check out our Streaming with External Software guide.

Quick Start: Embedding the NF Player​

Checkout our Embedding the NF Player guide to learn how to embed the Native Frame player into your website.

Step-by-Step Guide: Streaming with Native Frame Encoder​

If you're ready to integrate Native Frame's Encoder SDK into your existing software, the Starting a Stream with Native Frame Encoder guide will walk you through the process of streaming with Native Frame's Encoder SDK. Before you get started, you'll need to set up your environment to use Native Frame's Encoder SDK. Instructions for setting up your environment are below.

Installing 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 Encoder SDK. Instructions for setting up your environment are below.

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.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";

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.