@webrtc2/types - WebRTC TypeScript Definitions

Comprehensive TypeScript definitions for WebRTC cross-platform development - Complete type safety for React Native, Web, and Electron WebRTC applications.

🎯 WebRTC TypeScript Made Simple

@webrtc2/types provides complete TypeScript definitions for:

• 🔗 RTCPeerConnection Types: Full WebRTC API coverage
• 🎥 Media Stream Types: Video, audio, and screen sharing
• 🧊 ICE & Signaling Types: Connection establishment
• 📱 Cross-Platform Types: React Native, Web, Electron
• ⚡ Event Types: Type-safe event handling
• 🏠 Room & Participant Types: Multi-user communication

📦 Installation

1npm install @webrtc2/types

🎯 Type Definitions

Core WebRTC Types

1import {
2  RTCConnectionConfig,
3  ConnectionState,
4  WebRTCError,
5  ICEConnectionState
6} from '@webrtc2/types';
7
8// WebRTC configuration with type safety
9const config: RTCConnectionConfig = {
10  iceServers: [
11    { urls: 'stun:stun.l.google.com:19302' },
12    {
13      urls: 'turn:your-turn-server.com:3478',
14      username: 'user',
15      credential: 'password'
16    }
17  ],
18  iceCandidatePoolSize: 10,
19  bundlePolicy: 'max-bundle'
20};
21
22// Connection state management
23const handleStateChange = (state: ConnectionState) => {
24  switch (state) {
25    case 'connecting':
26      console.log('Establishing connection...');
27      break;
28    case 'connected':
29      console.log('Connected successfully!');
30      break;
31    case 'disconnected':
32      console.log('Connection lost');
33      break;
34    case 'failed':
35      console.error('Connection failed');
36      break;
37  }
38};

Media Stream Types

1import {
2  MediaStreamConstraints,
3  MediaDeviceInfo,
4  VideoConstraints,
5  AudioConstraints
6} from '@webrtc2/types';
7
8// Type-safe media constraints
9const videoConstraints: VideoConstraints = {
10  width: { ideal: 1280, max: 1920 },
11  height: { ideal: 720, max: 1080 },
12  frameRate: { ideal: 30, max: 60 },
13  facingMode: 'user'
14};
15
16const audioConstraints: AudioConstraints = {
17  echoCancellation: true,
18  noiseSuppression: true,
19  autoGainControl: true,
20  sampleRate: 48000
21};
22
23const mediaConstraints: MediaStreamConstraints = {
24  video: videoConstraints,
25  audio: audioConstraints
26};
27
28// Device enumeration with types
29const handleDevices = (devices: MediaDeviceInfo[]) => {
30  const cameras = devices.filter(d => d.kind === 'videoinput');
31  const microphones = devices.filter(d => d.kind === 'audioinput');
32  const speakers = devices.filter(d => d.kind === 'audiooutput');
33};

Signaling Types

1import {
2  SignalingMessage,
3  OfferMessage,
4  AnswerMessage,
5  ICECandidateMessage,
6  SignalingEvent
7} from '@webrtc2/types';
8
9// Type-safe signaling messages
10const handleSignalingMessage = (message: SignalingMessage) => {
11  switch (message.type) {
12    case 'offer':
13      const offer = message as OfferMessage;
14      console.log('Received offer from:', offer.from);
15      break;
16    
17    case 'answer':
18      const answer = message as AnswerMessage;
19      console.log('Received answer from:', answer.from);
20      break;
21    
22    case 'ice-candidate':
23      const candidate = message as ICECandidateMessage;
24      console.log('Received ICE candidate:', candidate.candidate);
25      break;
26  }
27};
28
29// Event handling with types
30const signaling = {
31  on: <T extends SignalingEvent>(
32    event: T,
33    handler: (data: SignalingEventData[T]) => void
34  ) => {
35    // Type-safe event handling
36  }
37};

Room & Participant Types

1import {
2  Room,
3  Participant,
4  RoomSettings,
5  ParticipantRole,
6  RoomEvent
7} from '@webrtc2/types';
8
9// Room configuration
10const roomSettings: RoomSettings = {
11  maxParticipants: 50,
12  enableVideo: true,
13  enableAudio: true,
14  enableScreenShare: true,
15  enableChat: true,
16  recordSession: false
17};
18
19// Participant management
20const participant: Participant = {
21  id: 'user-123',
22  name: 'John Doe',
23  role: 'participant',
24  isVideoEnabled: true,
25  isAudioEnabled: true,
26  isScreenSharing: false,
27  joinedAt: new Date(),
28  lastSeen: new Date()
29};
30
31// Room state
32const room: Room = {
33  id: 'room-456',
34  name: 'Team Meeting',
35  settings: roomSettings,
36  participants: [participant],
37  createdAt: new Date(),
38  isActive: true
39};
40
41// Type-safe room events
42const handleRoomEvent = (event: RoomEvent) => {
43  switch (event.type) {
44    case 'participant-joined':
45      console.log('User joined:', event.participant.name);
46      break;
47    case 'participant-left':
48      console.log('User left:', event.participant.name);
49      break;
50    case 'media-state-changed':
51      console.log('Media state changed:', event.mediaState);
52      break;
53  }
54};

🌐 Cross-Platform Types

React Native Types

1import {
2  ReactNativeMediaStream,
3  ReactNativeRTCView,
4  ReactNativeMediaConstraints
5} from '@webrtc2/types';
6
7// React Native specific constraints
8const rnConstraints: ReactNativeMediaConstraints = {
9  video: {
10    width: 640,
11    height: 480,
12    frameRate: 30,
13    facingMode: 'user'
14  },
15  audio: true
16};
17
18// RTCView component props
19interface RTCViewProps extends ReactNativeRTCView {
20  streamURL: string;
21  mirror?: boolean;
22  objectFit?: 'contain' | 'cover';
23}

Electron Types

1import {
2  ElectronWebRTCConfig,
3  ElectronMediaAccess,
4  DesktopCapturerSource
5} from '@webrtc2/types';
6
7// Electron-specific configuration
8const electronConfig: ElectronWebRTCConfig = {
9  webSecurity: false,
10  nodeIntegration: true,
11  contextIsolation: false,
12  enableRemoteModule: true
13};
14
15// Desktop screen capture
16const screenSources: DesktopCapturerSource[] = [
17  {
18    id: 'screen:0',
19    name: 'Entire Screen',
20    thumbnail: Buffer.from('...'),
21    display_id: '0'
22  }
23];

Web Browser Types

1import {
2  WebRTCBrowserSupport,
3  BrowserCapabilities,
4  WebRTCAdapter
5} from '@webrtc2/types';
6
7// Browser compatibility
8const browserSupport: WebRTCBrowserSupport = {
9  webrtc: true,
10  getUserMedia: true,
11  getDisplayMedia: true,
12  dataChannels: true,
13  rtcStats: true
14};
15
16// Feature detection
17const capabilities: BrowserCapabilities = {
18  video: {
19    codecs: ['VP8', 'VP9', 'H264'],
20    maxResolution: { width: 1920, height: 1080 },
21    maxFrameRate: 60
22  },
23  audio: {
24    codecs: ['OPUS', 'G722', 'PCMU'],
25    echoCancellation: true,
26    noiseSuppression: true
27  }
28};

🔧 Utility Types

Generic WebRTC Types

1import {
2  WebRTCEvent,
3  WebRTCEventHandler,
4  WebRTCPromise,
5  WebRTCCallback
6} from '@webrtc2/types';
7
8// Event handling utilities
9type EventMap = {
10  'connected': void;
11  'disconnected': void;
12  'stream': MediaStream;
13  'error': WebRTCError;
14};
15
16class WebRTCEventEmitter {
17  on<K extends keyof EventMap>(
18    event: K,
19    handler: WebRTCEventHandler<EventMap[K]>
20  ): void;
21  
22  emit<K extends keyof EventMap>(
23    event: K,
24    data: EventMap[K]
25  ): void;
26}
27
28// Promise-based API types
29type ConnectResult = WebRTCPromise<{
30  peerId: string;
31  connectionState: ConnectionState;
32}>;
33
34type MediaResult = WebRTCPromise<{
35  stream: MediaStream;
36  devices: MediaDeviceInfo[];
37}>;

Configuration Types

1import {
2  WebRTCConfig,
3  STUNConfig,
4  TURNConfig,
5  SignalingConfig
6} from '@webrtc2/types';
7
8// Complete configuration interface
9interface AppWebRTCConfig extends WebRTCConfig {
10  stun: STUNConfig;
11  turn: TURNConfig;
12  signaling: SignalingConfig;
13}
14
15const config: AppWebRTCConfig = {
16  stun: {
17    urls: ['stun:stun.l.google.com:19302']
18  },
19  turn: {
20    urls: 'turn:your-server.com:3478',
21    username: 'user',
22    credential: 'pass'
23  },
24  signaling: {
25    url: 'wss://signaling.example.com',
26    reconnectInterval: 5000,
27    maxReconnectAttempts: 10
28  }
29};

📚 Type Exports

1// Core WebRTC types
2export * from './webrtc';
3export * from './peer-connection';
4export * from './media-stream';
5export * from './ice';
6
7// Platform-specific types
8export * from './react-native';
9export * from './electron';
10export * from './web';
11
12// Application types
13export * from './room';
14export * from './participant';
15export * from './signaling';
16
17// Utility types
18export * from './events';
19export * from './config';
20export * from './errors';

🔍 Type Checking Examples

1import { WebRTCConnection } from '@webrtc2/types';
2
3// Type-safe WebRTC usage
4const connection: WebRTCConnection = {
5  async connect(peerId: string) {
6    // TypeScript ensures correct parameter types
7    return Promise.resolve();
8  },
9  
10  on(event, handler) {
11    // Event names and handler signatures are type-checked
12  },
13  
14  addStream(stream) {
15    // MediaStream type is enforced
16  }
17};

📚 Related Packages

• @webrtc2/client - React hooks using these types
• @webrtc2/peer - Peer connection with type safety
• @webrtc2/utils - Utility functions with types
• @webrtc2/config - Configuration management

🤝 Contributing

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

📄 License

MIT License - see LICENSE for details.

---

Keywords: WebRTC TypeScript, WebRTC types, RTCPeerConnection types, WebRTC definitions, TypeScript WebRTC, React Native WebRTC types, Electron WebRTC types, WebRTC interfaces, type safety WebRTC