@webrtc2/client - Cross-Platform WebRTC React Hooks & Components

React hooks and components for WebRTC cross-platform real-time communication - Build video calls, audio chat, and screen sharing across React Native, Web browsers, and Electron desktop apps.

🚀 WebRTC Made Simple for React Developers

@webrtc2/client solves the complexity of WebRTC integration in React applications by providing:

• 🎯 React Hooks: useWebRTC, useMediaStream, usePeerConnection
• 📱 Cross-Platform: React Native iOS/Android, Web browsers, Electron desktop
• 🔧 TypeScript: Full type safety and IntelliSense support
• ⚡ Zero Config: Works out-of-the-box with sensible defaults
• 🎥 Media Controls: Camera, microphone, screen sharing APIs

📦 Installation

# npm
npm install @webrtc2/client

# yarn
yarn add @webrtc2/client

# pnpm
pnpm add @webrtc2/client

Platform-Specific Setup

React Native WebRTC

npm install react-native-webrtc
# iOS: Add camera/microphone permissions to Info.plist
# Android: Add permissions to AndroidManifest.xml

Electron WebRTC

npm install electron
# WebRTC works natively in Electron's Chromium engine

🎯 Quick Start Examples

Basic Video Call Hook

import { useWebRTC } from '@webrtc2/client';

function VideoCallComponent() {
  const {
    localStream,
    remoteStream,
    connectionState,
    connect,
    disconnect,
    error
  } = useWebRTC({
    iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
  });

  return (
    <div className="video-call">
      {/* Local video stream */}
      <video
        ref={video => video && (video.srcObject = localStream)}
        autoPlay
        muted
        playsInline
      />
      
      {/* Remote video stream */}
      <video
        ref={video => video && (video.srcObject = remoteStream)}
        autoPlay
        playsInline
      />
      
      {/* Connection controls */}
      <div className="controls">
        <button onClick={() => connect('room-123')}>
          Join Call
        </button>
        <button onClick={disconnect}>
          Leave Call
        </button>
        <p>Status: {connectionState}</p>
      </div>
    </div>
  );
}

React Native Video Call

import React from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import { RTCView } from 'react-native-webrtc';
import { useWebRTC } from '@webrtc2/client';

function ReactNativeVideoCall() {
  const { localStream, remoteStream, connect, connectionState } = useWebRTC();

  return (
    <View style={{ flex: 1 }}>
      {/* Local video */}
      <RTCView
        streamURL={localStream?.toURL()}
        style={{ flex: 1 }}
        mirror={true}
      />
      
      {/* Remote video */}
      <RTCView
        streamURL={remoteStream?.toURL()}
        style={{ flex: 1 }}
      />
      
      {/* Controls */}
      <TouchableOpacity
        onPress={() => connect('mobile-room')}
        style={{ padding: 20, backgroundColor: '#007AFF' }}
      >
        <Text style={{ color: 'white', textAlign: 'center' }}>
          Join WebRTC Call
        </Text>
      </TouchableOpacity>
    </View>
  );
}

WebRTC Provider Setup

import { WebRTCProvider } from '@webrtc2/client';

function App() {
  return (
    <WebRTCProvider
      config={{
        iceServers: [
          { urls: 'stun:stun.l.google.com:19302' },
          { 
            urls: 'turn:your-turn-server.com:3478',
            username: 'user',
            credential: 'pass'
          }
        ]
      }}
    >
      <VideoCallComponent />
    </WebRTCProvider>
  );
}

🎛️ Advanced WebRTC Features

Screen Sharing Hook

import { useScreenShare } from '@webrtc2/client';

function ScreenShareComponent() {
  const { 
    screenStream, 
    isSharing, 
    startScreenShare, 
    stopScreenShare,
    error 
  } = useScreenShare();

  return (
    <div>
      <video
        ref={video => video && (video.srcObject = screenStream)}
        autoPlay
        playsInline
      />
      
      <button onClick={isSharing ? stopScreenShare : startScreenShare}>
        {isSharing ? 'Stop Sharing' : 'Share Screen'}
      </button>
    </div>
  );
}

Media Device Controls

import { useMediaDevices } from '@webrtc2/client';

function MediaControls() {
  const {
    devices,
    selectedCamera,
    selectedMicrophone,
    switchCamera,
    switchMicrophone,
    toggleCamera,
    toggleMicrophone,
    isCameraEnabled,
    isMicrophoneEnabled
  } = useMediaDevices();

  return (
    <div className="media-controls">
      {/* Camera controls */}
      <select onChange={e => switchCamera(e.target.value)}>
        {devices.cameras.map(camera => (
          <option key={camera.deviceId} value={camera.deviceId}>
            {camera.label}
          </option>
        ))}
      </select>
      
      <button onClick={toggleCamera}>
        {isCameraEnabled ? '📷' : '📷❌'}
      </button>
      
      {/* Microphone controls */}
      <button onClick={toggleMicrophone}>
        {isMicrophoneEnabled ? '🎤' : '🎤❌'}
      </button>
    </div>
  );
}

Peer Connection Stats

import { usePeerConnectionStats } from '@webrtc2/client';

function ConnectionStats() {
  const { stats, isConnected, latency, bitrate, packetLoss } = usePeerConnectionStats();

  return (
    <div className="connection-stats">
      <p>Status: {isConnected ? '🟢 Connected' : '🔴 Disconnected'}</p>
      <p>Latency: {latency}ms</p>
      <p>Bitrate: {bitrate} kbps</p>
      <p>Packet Loss: {packetLoss}%</p>
    </div>
  );
}

🔧 API Reference

useWebRTC Hook

const {
  localStream,      // Local media stream
  remoteStream,     // Remote media stream
  connectionState,  // 'connecting' | 'connected' | 'disconnected' | 'failed'
  connect,          // (roomId: string) => Promise<void>
  disconnect,       // () => void
  error,            // Error | null
  isConnected,      // boolean
  participants      // Participant[]
} = useWebRTC(config);

WebRTCProvider Props

interface WebRTCConfig {
  iceServers: RTCIceServer[];
  signalingUrl?: string;
  autoConnect?: boolean;
  enableVideo?: boolean;
  enableAudio?: boolean;
  videoConstraints?: MediaTrackConstraints;
  audioConstraints?: MediaTrackConstraints;
}

🌐 Cross-Platform Compatibility

| Feature | Web Browser | React Native | Electron | |---------|-------------|--------------|----------| | Video Calls | ✅ All modern browsers | ✅ iOS/Android | ✅ Desktop | | Audio Calls | ✅ WebRTC API | ✅ Native | ✅ Chromium | | Screen Share | ✅ getDisplayMedia | ✅ iOS 12+ | ✅ Built-in | | File Transfer | ✅ DataChannel | ✅ Custom | ✅ Node.js | | Background Mode | ⚠️ Limited | ✅ Native | ✅ Always |

🐛 Troubleshooting WebRTC Issues

Common Problems & Solutions

Camera/Microphone Permission Denied

// Handle permission errors
const { error } = useWebRTC();

if (error?.name === 'NotAllowedError') {
  return <div>Please allow camera/microphone access</div>;
}

ICE Connection Failed

// Add TURN servers for NAT traversal
const config = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { 
      urls: 'turn:your-turn-server.com:3478',
      username: 'user',
      credential: 'password'
    }
  ]
};

React Native iOS Simulator Issues

// iOS Simulator doesn't support camera
// Test on real device or use mock streams

📚 Related Packages

• @webrtc2/peer - Low-level WebRTC peer connection management
• @webrtc2/types - TypeScript definitions for WebRTC
• @webrtc2/utils - WebRTC utility functions
• @webrtc2/config - Configuration management

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

MIT License - see LICENSE for details.

Keywords: WebRTC React hooks, React Native WebRTC, Electron WebRTC, cross-platform video calls, WebRTC components, React WebRTC client, TypeScript WebRTC, real-time communication React, peer-to-peer React, WebRTC screen sharing, video chat React, audio calls React