@vkontakte/calls-sdk

Appearance

Работа с участниками ​

SDK предоставляет методы и коллбэки для управления участниками звонка.

Получение информации об участниках ​

При входе в звонок ​

Информация о текущих участниках приходит в коллбэке onConversation:

javascript
await SDK.init({
    // ...
    onConversation: (externalId, mediaModifiers, muteStates, participants, rooms) => {
        // participants - массив участников звонка
        participants.forEach(participant => {
            console.log('Участник:', participant.uid);
            console.log('Статус:', participant.status);
            console.log('Медиа:', participant.mediaSettings);
        });
    }
});

Запрос списка участников ​

javascript
// Получить участников по ID
const participants = await SDK.getParticipants({
    externalIds: [
        { id: 'user123', type: ExternalIdType.USER }
    ]
});

// Получить чанк списка участников (для больших звонков)
const chunk = await SDK.getParticipantListChunk({
    pageMarker: null,
    count: 50
});

Отслеживание статусов участников ​

Статус подключения ​

javascript
await SDK.init({
    // ...
    onRemoteStatus: (userIds, status, data) => {
        // status: ParticipantStatus
        // - WAITING - ожидание
        // - CONNECTING - подключение  
        // - CONNECTED - подключен
        // - HANGUP - отключился
        
        userIds.forEach(userId => {
            console.log(`${userId} - ${status}`);
        });
    }
});

Настройки медиа участника ​

javascript
await SDK.init({
    // ...
    onRemoteMediaSettings: (userId, mediaSettings, markers) => {
        // mediaSettings содержит:
        // - isAudioEnabled - микрофон включен
        // - isVideoEnabled - камера включена
        // - isScreenSharingEnabled - демонстрация экрана
        // - isAnimojiEnabled - Vmoji включен
        
        if (mediaSettings.isVideoEnabled) {
            // Запросить видео от участника
            SDK.updateDisplayLayout([{
                uid: userId,
                mediaType: MediaType.CAMERA,
                width: 1920,
                height: 1080
            }]);
        }
    }
});

Добавление участников ​

javascript
import { ExternalIdType } from '@vkontakte/calls-sdk';

// Добавить одного участника
await SDK.addParticipant({
    id: 'user123',
    type: ExternalIdType.USER
});

// Добавить нескольких участников
await SDK.addParticipant([
    { id: 'user123', type: ExternalIdType.USER },
    { id: 'user456', type: ExternalIdType.USER }
]);

Удаление участников ​

javascript
// Удалить участника
await SDK.removeParticipant({
    id: 'user123',
    type: ExternalIdType.USER
});

// Удалить и забанить участника
await SDK.removeParticipant(
    { id: 'user123', type: ExternalIdType.USER },
    true  // ban
);

Отключение участника от звонка ​

javascript
await SDK.init({
    // ...
    onRemoteRemoved: (userId, markers) => {
        // Участник покинул звонок
        console.log('Участник вышел:', userId);
    }
});

Качество связи участников ​

javascript
await SDK.init({
    // ...
    // Качество локального соединения
    onLocalNetworkStatusChanged: (rating) => {
        // rating: 0-5 (0 - плохое, 5 - отличное)
        console.log('Моё качество связи:', rating);
    },
    
    // Качество соединения участников
    onNetworkStatusChanged: (status) => {
        status.forEach(item => {
            console.log(`${item.uid}: качество ${item.rating}`);
        });
    }
});

Состояние участника ​

Участники могут иметь кастомные состояния (например, "поднял руку"):

javascript
await SDK.init({
    // ...
    onRemoteParticipantState: (externalId, state, markers) => {
        if (state.hand?.state === '1') {
            console.log('Участник поднял руку:', externalId);
        }
    }
});

// Изменить своё состояние (поднять руку)
await SDK.changeParticipantState({
    hand: { state: '1' }
});

// Опустить руку
await SDK.changeParticipantState({
    hand: { state: '0' }
});

Определение говорящего ​

javascript
await SDK.init({
    // ...
    onSpeakerChanged: (userId) => {
        // userId - ID участника, который сейчас говорит
        console.log('Говорит:', userId);
    },
    
    // Уровни громкости участников
    onVolumesDetected: (volumes) => {
        volumes.forEach(item => {
            console.log(`${item.uid}: громкость ${item.volume}`);
        });
    }
});