@nice2dev/ui-video

Professional video components for React applications including video editing, screen recording, and live streaming.

Installation

npm install @nice2dev/ui-video
# or
pnpm add @nice2dev/ui-video

Components

NiceVideoEditor

Full-featured video editing component with timeline, effects, and transitions.

import { NiceVideoEditor } from '@nice2dev/ui-video';
import '@nice2dev/ui-video/style.css';

function App() {
  const handleExport = async (project, format) => {
    // Export logic
    return new Blob([]);
  };

  return (
    <NiceVideoEditor
      onProjectChange={(project) => console.log('Project changed:', project)}
      onExport={handleExport}
      onAssetUpload={async (file) => {
        // Upload file and return MediaAsset
        return {
          id: crypto.randomUUID(),
          type: 'video',
          name: file.name,
          url: URL.createObjectURL(file),
          size: file.size,
        };
      }}
    />
  );
}

Features

• Multi-track timeline with video, audio, and text tracks
• Drag-and-drop from asset library
• Effects: blur, brightness, contrast, saturation, grayscale, sepia, chroma key, etc.
• Transitions: fade, dissolve, wipe, slide, zoom, push
• Export settings with codec and resolution selection
• Keyboard shortcuts for editing

NiceScreenRecorder

Screen recording component with annotation and markers support.

import { NiceScreenRecorder } from '@nice2dev/ui-video';
import '@nice2dev/ui-video/style.css';

function App() {
  return (
    <NiceScreenRecorder
      options={{
        video: {
          source: 'screen',
          frameRate: 30,
          showCursor: true,
        },
        audio: {
          enabled: true,
          source: 'both',
        },
        output: {
          format: 'webm',
          quality: 'high',
        },
      }}
      onRecordingStart={(session) => console.log('Recording started:', session)}
      onRecordingStop={(session, blob) => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'recording.webm';
        a.click();
      }}
      onError={(error) => console.error('Recording error:', error)}
    />
  );
}

Features

• Screen, window, tab, or camera capture
• System audio and microphone recording
• Countdown timer before recording
• Annotation tools (pen, arrow, rectangle, text)
• Markers for navigation
• Customizable output format and quality

NiceLiveStreaming

Live streaming component with multi-destination support.

import { NiceLiveStreaming } from '@nice2dev/ui-video';
import '@nice2dev/ui-video/style.css';

function App() {
  return (
    <NiceLiveStreaming
      config={{
        name: 'My Stream',
        destinations: [
          {
            id: '1',
            name: 'YouTube',
            platform: 'youtube',
            url: 'rtmp://a.rtmp.youtube.com/live2',
            streamKey: 'YOUR_STREAM_KEY',
            enabled: true,
            status: 'idle',
          },
        ],
        sources: [],
        layout: {
          name: 'Default',
          canvas: { width: 1920, height: 1080, backgroundColor: '#000000' },
          layers: [],
        },
        settings: {
          video: {
            resolution: { width: 1920, height: 1080 },
            frameRate: 30,
            codec: 'h264',
            bitrate: 6000,
            keyframe: 2,
            profile: 'high',
          },
          audio: {
            sampleRate: 48000,
            bitrate: 160,
            channels: 2,
            codec: 'aac',
          },
        },
      }}
      onStreamStart={() => console.log('Stream started')}
      onStreamStop={() => console.log('Stream stopped')}
      onStatsUpdate={(stats) => console.log('Stats:', stats)}
    />
  );
}

Features

• Multi-platform streaming (YouTube, Twitch, Facebook, custom RTMP/SRT)
• Scene management with instant switching
• Source management (camera, screen, window, browser, images, videos)
• Audio mixer with volume controls
• Real-time stats (viewers, bitrate, fps, dropped frames)
• Canvas-based layout editor

Types

Video Editor Types

interface VideoProject {
  id: string;
  name: string;
  resolution: VideoResolution;
  frameRate: number;
  duration: number;
  tracks: VideoTrack[];
  assets: MediaAsset[];
  settings: ProjectSettings;
}

interface VideoTrack {
  id: string;
  type: 'video' | 'audio' | 'text' | 'effects';
  name: string;
  items: TrackItem[];
  muted: boolean;
  locked: boolean;
  visible: boolean;
}

interface Effect {
  id: string;
  type: EffectType;
  name: string;
  parameters: Record<string, number | string | boolean>;
  keyframes?: Keyframe[];
}

Screen Recorder Types

interface RecordingOptions {
  video: {
    source: 'screen' | 'window' | 'tab' | 'camera';
    resolution?: VideoResolution;
    frameRate?: number;
    showCursor: boolean;
  };
  audio: {
    enabled: boolean;
    source: 'system' | 'microphone' | 'both' | 'none';
    echoCancellation?: boolean;
    noiseSuppression?: boolean;
  };
  output: {
    format: 'webm' | 'mp4' | 'mkv';
    quality?: 'low' | 'medium' | 'high' | 'lossless';
  };
}

Live Streaming Types

interface StreamConfig {
  id: string;
  name: string;
  protocol: 'rtmp' | 'rtmps' | 'hls' | 'webrtc' | 'srt';
  destinations: StreamDestination[];
  sources: StreamSource[];
  layout: StreamLayout;
  settings: StreamSettings;
}

interface StreamStats {
  duration: number;
  viewers: number;
  peakViewers: number;
  bitrate: number;
  fps: number;
  droppedFrames: number;
  cpuUsage: number;
  memoryUsage: number;
}

Browser Support

These components use modern browser APIs:

• MediaRecorder API for recording
• getDisplayMedia API for screen capture
• WebRTC for streaming

Ensure your target browsers support these APIs. Fallbacks are not provided.

License

MIT