Features

Audio Device Management

The SDK provides comprehensive device management capabilities for handling microphones and speakers. Note: Microphone permission is automatically requested when you start a call - no manual permission request is needed.

For complete API documentation, see Device Management in the API Reference section.

Quick Reference

All SDK methods are documented in the API Reference section. This Features section focuses on practical implementation patterns and examples.

Device Selection Workflow

This example shows the proper flow: query devices first, then optionally set preferences:

// Step 1: Query available devices
const devices = await CallManager.getAvailableDevices();
console.log('Available microphones:', devices.microphones);
console.log('Available speakers:', devices.speakers);

// Step 2: Let user choose or find preferred devices
const preferredMic = devices.microphones.find(m => m.label.includes('USB'));
const preferredSpeaker = devices.speakers.find(s => s.label.includes('Headphones'));

// Step 3: Create CallManager with selected devices (or null for defaults)
const config = {
    microphoneId: preferredMic?.deviceId || null,  // null = system default
    speakerId: preferredSpeaker?.deviceId || null
};

const callManager = new CallManager(callbacks, config);

// Step 4: Make the call
await callManager.handleCall2(PARTNER, CHARACTER, API_KEY);

// Step 5: Change devices during call if needed
// await callManager.changeDevices(newMicId, newSpeakerId);

Device Persistence Example

Save user device preferences and restore them on next session:

// Function to save device preferences
function saveDevicePreferences(microphoneId, speakerId) {
    const preferences = {
        microphoneId: microphoneId,
        speakerId: speakerId,
        timestamp: Date.now()
    };
    localStorage.setItem('audioDevicePrefs', JSON.stringify(preferences));
}

// Function to load and validate device preferences
async function loadDevicePreferences() {
    try {
        const saved = localStorage.getItem('audioDevicePrefs');
        if (!saved) return { microphoneId: null, speakerId: null };
        
        const preferences = JSON.parse(saved);
        const devices = await CallManager.getAvailableDevices();
        
        // Validate that saved devices still exist
        const validMic = preferences.microphoneId && 
            devices.microphones.find(m => m.deviceId === preferences.microphoneId);
        const validSpeaker = preferences.speakerId && 
            devices.speakers.find(s => s.deviceId === preferences.speakerId);
        
        return {
            microphoneId: validMic ? preferences.microphoneId : null,
            speakerId: validSpeaker ? preferences.speakerId : null
        };
    } catch (error) {
        console.warn('Error loading device preferences:', error);
        return { microphoneId: null, speakerId: null };
    }
}

// Usage: Initialize CallManager with saved preferences
async function initializeWithSavedDevices() {
    const preferences = await loadDevicePreferences();
    
    const config = {
        microphoneId: preferences.microphoneId,
        speakerId: preferences.speakerId
    };
    
    const callManager = new CallManager(callbacks, config);
    
    // When user changes devices, save the new preference
    // saveDevicePreferences(newMicId, newSpeakerId);
    
    return callManager;
}

Conversation History

The SDK includes an optional conversation history feature that displays the ongoing dialogue between the user and AI character.

Implementation Requirements

1. Include the History Script

In addition to the core SDK scripts, you must include the history.js file:

<script src="https://sdk.hidoba.com/history.js"></script>
<script src="https://sdk.hidoba.com/audio.js"></script>
<script src="https://sdk.hidoba.com/sdk.js"></script>

2. Create Required HTML Structure

The conversation history requires a specific HTML structure to function correctly:

<div class="container">
    <div class="scroll-box" id="conversation">
        <div class="scroll-box-middle" id="scrollable-conversation">
            <div id="conversation-inner"></div>
        </div>
    </div>
</div>

These element IDs and class names are required for the history feature to work properly.

3. Apply Basic Styling

Add appropriate CSS styling for the conversation container:

.container {
    display: flex;
    flex-direction: column;
    height: 80%;
    margin: 0 2em;
}

.scroll-box {
    flex-grow: 1;
    display: flex;
    overflow: hidden;
}

.scroll-box-middle {
    width: 45em;
    overflow-y: auto;
    border: 2px solid #ccc;
    padding: 15px;
}

#conversation-inner>pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.role {
    color: #D55;
    white-space: nowrap;
}

Once implemented, the conversation history will automatically display and scroll as the conversation with the AI character progresses.

RAG Integration

If your character uses RAG (Retrieval Augmented Generation), the conversation history will automatically show when the AI references external documents. Use the onRagInfo callback to display these sources to users.

For a complete implementation example, refer to the Advanced Example.

Audio Device Management​

Device Selection Workflow​

Device Persistence Example​

Conversation History​

Implementation Requirements​

1. Include the History Script​

2. Create Required HTML Structure​

3. Apply Basic Styling​