Skip to main content
react v1.0.0 core v14.0.0

Installation

Get NativeFrame installed in your project

Prerequisites​

Before installing NativeFrame, ensure you have:

Choose Your Installation Method​

NativeFrame provides two packages depending on your needs:

React Package​

The @video/video-client-react package provides React-specific hooks, components, and Context providers for building video applications with React.

What's included:

  • React hooks: usePreviewPlayer, useAuthClient, useCallControls, etc.
  • Context Providers: MediaStreamControllerAPIProvider, PlayerAPIProvider, etc.
  • Pre-built components: <Video />, <DeviceSelector />, etc.
  • Full TypeScript support with type definitions
  • Optimized for React 16.8+ with hooks

Best for:

  • React applications
  • Projects using modern React patterns
  • TypeScript projects
  • Applications needing reusable video components

Installation Instructions​

Install React Package via npm​

Update your .npmrc file to include:

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

Install the React package using npm:

npm install @video/video-client-react

Or using yarn:

yarn add @video/video-client-react

Verify Installation​

Create a simple component to verify the installation:

import React from 'react';
import { usePreviewPlayer } from '@video/video-client-react/hooks';

function TestComponent() {
  const { mediaStreamController, previewPlayer, isLoading } = usePreviewPlayer();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return <div>NativeFrame React is installed! ✓</div>;
}

export default TestComponent;

If this compiles without errors, you're all set!

TypeScript Configuration​

If you're using TypeScript, the package includes type definitions automatically. Ensure your tsconfig.json has:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "react"
  }
}

Optional: Reduce Bundle Size​

By default, the player includes hls.js and mpegts.js libraries in the bundle. You can exclude these to reduce bundle size (they'll load on-demand when needed).

Webpack Configuration​

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  // ... other config
  plugins: [
    new webpack.DefinePlugin({
      'process.env.HLSJS_BUNDLED': JSON.stringify('false'),
      'process.env.MPEGTS_BUNDLED': JSON.stringify('false')
    })
  ]
};

Vite Configuration​

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    'process.env.HLSJS_BUNDLED': JSON.stringify('false'),
    'process.env.MPEGTS_BUNDLED': JSON.stringify('false')
  }
});

Trade-offs:

  • ✅ Smaller initial bundle size
  • ✅ Faster initial page load
  • ❌ Small delay when starting playback (one-time library download)
  • ❌ Additional network request

Recommendation:

  • Include in bundle if most users will play video
  • Lazy load if video playback is optional/rare

Verify Your Installation​

After installation, verify everything works:

Test React Installation​

import React from 'react';
import { usePreviewPlayer, useAuthClient } from '@video/video-client-react/hooks';
import { MediaStreamControllerAPIProvider, PlayerAPIProvider } from '@video/video-client-react/context';
import { Video } from '@video/video-client-react/components';

function VerifyInstallation() {
  const { mediaStreamController, previewPlayer, isLoading } = usePreviewPlayer();

  const authClient = useAuthClient({
    authUrl: 'https://your-subdomain.cdn.nativeframe.com/api/auth',
    token: 'your-token-here'
  });

  if (isLoading) {
    return <div>Loading camera...</div>;
  }

  return (
    <MediaStreamControllerAPIProvider mediaStreamController={mediaStreamController}>
      <PlayerAPIProvider player={previewPlayer}>
        <div>
          <h1>✓ Installation Verified!</h1>
          <Video />
        </div>
      </PlayerAPIProvider>
    </MediaStreamControllerAPIProvider>
  );
}

export default VerifyInstallation;

Run your app and you should see your camera preview. If you see the video, your installation is successful!

Troubleshooting Installation Issues​

Common Installation Problems​

Still Having Issues?​

Check our Troubleshooting Guide for more solutions, or see the Getting Help section below.

Getting Help​

If you encounter issues during installation:

  1. Check documentation - Review the Getting Started guide
  2. Search FAQ - Visit our FAQ for common questions
  3. Troubleshooting - Check the Troubleshooting Guide
  4. Contact support - Reach out to NativeFrame support with:
    • Node.js and npm/yarn version: node -v && npm -v
    • Package version: npm list @video/video-client-react
    • Error messages and stack traces
    • Browser and OS information

Next Steps​

Now that NativeFrame is installed, you're ready to start building:

📖 Continue Learning:

🎯 Quick Links:

Happy streaming! 🎥