VPSS - Virtual Participant Simulation Service

Mock participants for video call testing. VPSS provides a web interface and API to simulate multiple participants in a video call.

Installation

``bash


Run directly with npx (no installation required)

`bash
vpss [options]

Options:
-p, --port Port to run the server on (default: 4747)
-d, --dev Run in development mode
-h, --help Show help

Examples:
vpss Start on default port 4747
vpss --port 3000 Start on port 3000
vpss -p 8080 Start on port 8080
`

Features

- Web UI to manage mock participants
- REST API for programmatic control
- WebSocket for real-time updates
- Simulate video, audio, screen share, and hand raised states
- Multiple participant roles (host, co-host, participant, guest)

REST API

$3

`bash
GET /api/mock-participants
`

Response:
`json
[
{
"id": "abc123",
"name": "John Doe",
"role": "participant",
"isVideoOn": true,
"isAudioOn": true,
"isHandRaised": false,
"isScreensharingOn": false
}
]
`

$3

`bash
POST /api/mock-participants
Content-Type: application/json

{
"name": "Jane Smith",
"role": "participant"
}
`

$3

`bash
PATCH /api/mock-participants/:id
Content-Type: application/json

{
"isVideoOn": false,
"isAudioOn": true,
"isHandRaised": true
}
`

Valid update fields:
- isVideoOn (boolean)
- isAudioOn (boolean)
- isHandRaised (boolean)
- isScreensharingOn (boolean)
- role (string)

$3

`bash
DELETE /api/mock-participants/:id
`

WebSocket Integration

Connect to ws://localhost:4747/ws for real-time participant updates.

$3

participant_added
`json
{
"type": "participant_added",
"participant": { ... },
"allParticipants": [ ... ]
}
`

participant_updated
`json
{
"type": "participant_updated",
"participant": { ... },
"allParticipants": [ ... ]
}
`

participant_removed
`json
{
"type": "participant_removed",
"participantId": "abc123"
}
`

$3

`javascript
const ws = new WebSocket('ws://localhost:4747/ws');

ws.onmessage = (event) => {
const data = JSON.parse(event.data);

switch (data.type) {
case 'participant_added':
console.log('New participant:', data.participant);
break;
case 'participant_updated':
console.log('Updated:', data.participant);
break;
case 'participant_removed':
console.log('Removed:', data.participantId);
break;
}
};
`

Integration Examples

$3

`javascript
// List all participants
const response = await fetch('http://localhost:4747/api/mock-participants');
const participants = await response.json();

// Create a participant
await fetch('http://localhost:4747/api/mock-participants', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Test User', role: 'participant' })
});

// Toggle video for a participant
await fetch(http://localhost:4747/api/mock-participants/${id}, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ isVideoOn: false })
});
`

$3

`bash


List participants

`tsx
import { useParticipants } from 'vpss';

function ParticipantList() {
const participants = useParticipants();

return (


{participants.map(p => (

• {p.name} ({p.role})

))}

Optionally pass a custom base URL:
`tsx
const participants = useParticipants('http://localhost:3000');
`

$3

For full control with loading states, errors, and CRUD operations:

`tsx
import { useParticipantsState } from 'vpss';

function ParticipantManager() {
const {
participants,
loading,
error,
createParticipant,
updateParticipant,
deleteParticipant,
} = useParticipantsState();

if (loading) return

Options:
`ts
useParticipantsState({
baseUrl: 'http://localhost:4747', // VPSS server URL (optional)
})
`

$3

For managing a single participant:

`tsx
import { useParticipant } from 'vpss';

function ParticipantCard({ id }: { id: string }) {
const { participant, loading, update, remove } = useParticipant(id);

if (loading) return

`tsx
import { VPSSProvider, useVPSS } from 'vpss';

function App() {
return (




);
}

function ParticipantCount() {
const { participants } = useVPSS();
return

`tsx
import { withParticipants, WithParticipantsProps } from 'vpss';

class ParticipantList extends React.Component {
render() {
const { participants, participantsLoading } = this.props;
if (participantsLoading) return

export default withParticipants(ParticipantList);
`

$3

`ts
import type {
Participant,
ParticipantUpdate,
CreateParticipantInput,
UseParticipantsOptions,
} from 'vpss';
`

Development

`bash


Clone and install

License

MIT