Tutorial

README

Hiyve Client - WebRTC Communication Library

Version License Browser TypeScript

Version: 1.0.1000 | License: Commercial | Author: Hiyve Team

A comprehensive WebRTC client library for real-time communication, enabling audio/video conferencing with advanced features like recording, streaming, screen sharing, and file management.

📚 Documentation

Resource Description
API Reference Complete Client class documentation
DeviceCheck Guide Device compatibility validation
File Filtering Guide File management and filtering
Sequence Diagram Connection flow visualization
Events Reference All client events

🚀 Key Features

📹 Real-Time Communication

  • HD Video Conferencing - High-quality audio and video with adaptive bitrate
  • Room Management - Create, join, and manage rooms with owner privileges
  • Device Control - Full control over camera, microphone, and speakers
  • Screen Sharing - Share your screen or specific windows

🎬 Recording & Streaming

  • Cloud Recording - Record meetings with automatic video composition
  • Live Streaming - Stream to external platforms
  • Recording URLs - Get download URLs for completed recordings

💬 Collaboration

  • In-Room Chat - Real-time messaging with history
  • File Sharing - Upload and share files with participants
  • Bandwidth Monitoring - Monitor connection quality in real-time

🛠️ Developer Experience

  • Event-Driven Architecture - Comprehensive events for all state changes
  • TypeScript Support - Full type definitions included
  • Browser Compatibility - Works on Chrome, Firefox, Safari, and Edge

📦 Installation


# include via CDN
<script src="https://s3.amazonaws.com/muzie.media/dist_latest/muziertcclient.js"></script>

Quick Start

Server-side (Generate Room Token)

app.post('/generate-room-token', async function (req, res) {
  const apiKey = process.env.APIKEY // Your API key from Hiyve
  try {
    const response = await fetch('https://rtc.muziemedia.com/room-token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ 
        apiKey: apiKey, // Keep these server side
        secret: process.env.CLIENT_SECRET // Keep these server side
      }),
    });
    const data = await response.json();
    res.send(data); // Return token to client
  } catch (error) {
    console.error('Error:', error);
    res.status(500).send({ error: 'Error generating room token' });
  }
});

Client-side (Basic Implementation)

// Import the client (if using modules)
const { Client, ClientEvents } = window.MuzieClient;

// Initialize client with room token from your server
const client = new Client({
  roomToken: 'your-room-token'
});

// Set up event listeners
client.addEventListener(ClientEvents.MEDIA_TRACK_ADDED, (event) => {
  const { userId, track, kind } = event.detail;
  // Attach remote tracks to video/audio elements
  if (kind === 'video') {
    const videoEl = document.getElementById(`remote-video-${userId}`);
    if (videoEl) {
      videoEl.srcObject = new MediaStream([track]);
    }
  }
});

// List available devices
async function setupDevices() {
  // Get available devices
  const videoDevices = await client.listVideoDevices();
  const audioInputDevices = await client.listAudioInputDevices();
  const audioOutputDevices = await client.listAudioOutputDevices();
  
  // Set devices (if needed)
  await client.setLocalVideoDevice({ videoDeviceId: videoDevices[0].deviceId });
  await client.setLocalAudioInputDevice({ 
    audioInputDeviceId: audioInputDevices[0].deviceId,
    constraints: {
      echoCancellation: true,
      noiseSuppression: true,
      autoGainControl: true
    }
  });
  await client.setAudioOutputDevice({ audioOutputDeviceId: audioOutputDevices[0].deviceId });
}

// Join a room
async function joinRoom() {
  await setupDevices();
  
  // Create or join room
  const room = await client.createRoom({ 
    roomName: 'my-meeting-room', 
    userId: 'user-123' 
  });
  
  // Connect media transports
  await client.connectTransports({ 
    localVideoElementId: 'local-video',
    options: {
      enableAudioInputMonitor: true,
      enableAudioGainControl: true
    }
  });
}

// Handle user leaving
function leaveRoom() {
  client.closeConnection();
}
sequenceDiagram
    participant App as Application
    participant Client as Hiyve Client
    participant Signaling as Signaling Server
    participant MediaServer as Media Server

    Note over App,MediaServer: Step 1: Initialize the client
    App->>App: Generate room token via server API
    App->>Client: new Client({roomToken})
    
    Note over App,MediaServer: Step 2: Configure devices
    App->>Client: listVideoDevices()
    Client->>App: Return video devices array
    App->>Client: listAudioInputDevices()
    Client->>App: Return audio input devices array
    App->>Client: listAudioOutputDevices()
    Client->>App: Return audio output devices array
    App->>Client: setLocalVideoDevice({videoDeviceId})
    App->>Client: setLocalAudioInputDevice({audioInputDeviceId, constraints})
    App->>Client: setAudioOutputDevice({audioOutputDeviceId})
    
    Note over App,MediaServer: Step 3: Create room
    App->>Client: createRoom({roomName, userId})
    Client->>Client: Create Signaling instance
    Client->>Signaling: init({roomName, userId, roomToken})
    Signaling->>Signaling: Connect to server
    Client->>Client: Set up event listeners
    Client->>Signaling: createRoom({roomName})
    Signaling->>MediaServer: Create room request
    MediaServer->>Signaling: Room created response
    Signaling->>Client: Return room object
    Client->>Signaling: getRtpCapabilities()
    Signaling->>MediaServer: Get RTP capabilities
    MediaServer->>Signaling: Return capabilities
    Signaling->>Client: Return capabilities
    Client->>Client: device.load({routerRtpCapabilities})
    Client->>App: Return room object
    
    Note over App,MediaServer: Step 4: Connect media transports
    App->>Client: connectTransports({localVideoElementId})
    
    Client->>Signaling: createTransport()
    Signaling->>MediaServer: Create WebRTC transport
    MediaServer->>Signaling: Transport parameters
    Signaling->>Client: Return transport details
    
    Client->>Client: Create send transport
    Client->>Client: Set up send transport event handlers
    
    Client->>Client: getUserMedia() for audio/video
    Client->>Client: Attach local stream to video element
    
    Client->>Client: sendTransport.produce(videoTrack)
    Client->>Signaling: produce({transportId, kind: "video", rtpParameters})
    Signaling->>MediaServer: Produce video
    MediaServer->>Signaling: Producer ID
    Signaling->>Client: Return producer ID
    
    Client->>Client: sendTransport.produce(audioTrack)
    Client->>Signaling: produce({transportId, kind: "audio", rtpParameters})
    Signaling->>MediaServer: Produce audio
    MediaServer->>Signaling: Producer ID
    Signaling->>Client: Return producer ID
    
    Client->>Signaling: createTransport() for receiving
    Signaling->>MediaServer: Create WebRTC receive transport
    MediaServer->>Signaling: Transport parameters
    Signaling->>Client: Return transport details
    Client->>Client: Create receive transport
    Client->>Client: Set up receive transport event handlers
    
    Note over App,MediaServer: Step 5: Room is ready for communication
    Client->>App: Emit CONNECTED event
    
    Note over App,MediaServer: Step 6: Participants can now communicate
    Client->>App: Emit events (MEDIA_TRACK_ADDED, etc.)

Key Features

Room Management

  • Create rooms as an owner with administrative privileges
  • Join existing rooms with room name or join tokens
  • Get real-time updates on room participants

Media Controls

  • Select audio/video input and output devices
  • Mute/unmute audio and video for local and remote users
  • Monitor audio levels with built-in visualizer
  • Control audio gain

Advanced Features

Screen Sharing

// Start screen sharing
await client.startScreenShare();

// Stop screen sharing and return to camera
await client.stopScreenShare();

Recording

// Start cloud recording (room owner only)
const recordingId = await client.startRecording({ 
  type: 'cloud',
  options: { autoCompose: true }
});

// Stop recording
await client.stopRecording();

// Get recording URLs
const urls = await client.getRecordingUrls({
  recordingId,
  roomName: 'my-room',
  userId: 'user-123'
});

Streaming

// Start streaming (room owner only)
const streamingId = await client.startStreaming({
  type: 'cloud',
  options: { create_mp4: true }
});

// Stop streaming
await client.stopStreaming();

File Sharing

// Upload file
await client.uploadFile({
  file: fileObject,
  location: '/shared'
});

// List files
const files = await client.getUsersFiles({
  location: '/',
  forRoom: true
});

// Share file with specific users
await client.shareFile({
  fileId: 'file-123',
  userIds: ['user-456', 'user-789']
});

Chat

// Send chat message
await client.sendChatMessage({
  message: 'Hello everyone!'
});

// Get chat history
const history = await client.getChatHistory({
  cursor: null // For pagination
});

API Documentation

The library provides a comprehensive API with the following core components:

  • Client: Main class for room management and media handling
  • ClientEvents: Event constants for event listeners
  • DeviceCheck: Utility class for validating device compatibility

Key events:

  • MEDIA_TRACK_ADDED: Remote media available
  • USER_JOINED_ROOM: New participant joined
  • USER_DISCONNECTED: Participant left
  • CONNECTED/DISCONNECTED: Connection status
  • ROOM_CLOSED: Room was closed
  • AUDIO_MUTED/VIDEO_MUTED: Media status changes
  • RECEIVE_CHAT_MESSAGE: New chat message received
  • RECORDING_STARTED/RECORDING_STOPPED: Recording status

Browser Support

Hiyve Client supports:

  • Chrome (desktop and Android)
  • Firefox (desktop and Android)
  • Safari (desktop and iOS)
  • Edge (Chromium-based)

License

Copyright © 2023 by IWantToPractice, LLC. All rights reserved.

Use of this software is subject to license agreement. Unauthorized reproduction, distribution, or modification is expressly forbidden.


For detailed API documentation, refer to the API Documentation.