Voice & Text Chat for WebSDK

Integrate real-time voice and text chat into your application using the StreamPixel SDK.

1. Installation

Install the SDK package via npm or yarn as done before and then Import the client in your code:

import { StreamPixelVoiceChat } from 'streampixelsdk';

---

2. Initialization

Create an instance of the chat client by providing room and user details:

const chatSdk = new StreamPixelVoiceChat({
  roomName: 'my-room',       // Unique identifier for the chat room
  userName: 'Alice',         // Display name for the user
  voiceChat: true,           // Enable voice chat
  avatar: 'https://.../img.png', // Optional URL for user avatar
  micStart: false            // If true, mic is unmuted on join
});

2.1 Configuration Options

• roomName (string): Room identifier.

• userName (string): User’s display name.

• voiceChat (boolean): Enable or disable voice chat.

• avatar (string): URL to the user’s avatar image.

• micStart (boolean): Start with mic unmuted if true.

---

3. Connection Lifecycle

Handle connection events to update your UI:

// Fired when successfully connected
chatSdk.onConnect(() => {
  console.log('Connected to chat');
});

// Fired when disconnected or kicked
chatSdk.onDisconnect(() => {
  console.log('Disconnected from chat');
});

// Fired on any connection error
chatSdk.onError((error) => {
  console.error('Chat error:', error);
});

---

4. Text Messaging

4.1 Send a Message

chatSdk.sendMessage('Hello, everyone!');

4.2 Receive Messages

chatSdk.onMessage((message) => {
  console.log(`New message from ${message.user}: ${message.text}`);
  // e.g., append to chat window
});

4.3 Participant Updates

Track when users join or leave:

chatSdk.onParticipantUpdate((participants) => {
  console.log('Current participants:', participants);
});
``` 

Each participant object contains:

- `id` (string)
- `name` (string)
- `avatar` (string)
- `isMuted` (boolean)

---

## 5. Voice Controls

### 5.1 Toggle Your Microphone

```js
// Mute or unmute local mic
chatSdk.toggleMic();

5.2 Mute/Unmute All Remote

chatSdk.muteAllRemote();   // Mute everyone else
chatSdk.unmuteAllRemote(); // Unmute everyone else

5.3 Mute/Unmute Individual Participant

// Mute a specific user by ID
chatSdk.muteSelected('participant-id');

// Unmute a specific user
chatSdk.unmuteSelected('participant-id');

---

6. Leaving and Cleanup

6.1 Leave the Room

await chatSdk.leave();

6.2 Force Disconnect

chatSdk.disconnect();

Both methods clean up resources and stop any active streams.