Tutorial

Sequence

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.)