@callpromn/rtc-kit

v0.0.3

Published

4 months ago

CallPro Web Components Kit for Web

0High
0Medium
0Low

blgn94

callpro

artistry449

wep-component ui components rtc calling voip callpro

RTC Kit UI

Энэхүү sdk нь Real-time communication (RTC) програм бүтээхэд зориулсан Web Components-ийн иж бүрэн сан юм. TypeScript хэлээр бичигдсэн бөгөөд бүх вэб фреймворкуудад хялбараар интеграцлах боломжтой.

Онцлогууд - Features

✨ Фреймворк хараат бус - React, Vue, Angular эсвэл vanilla JavaScript зэрэг хэл болон сангууд дээр ажиллана. 🎨 Загвар солих боломжтой - "Dark mode" бүхий дизайний сонголттой. 🔧 TypeScript дэмжлэг - Хувьсагч болон фунлкцуудын typescript type-ууд тодорхойлогдсон. 🚀 Хамаарал байхгүй - Хөнгөн бөгөөд хурдан ачаалах.

Суулгах - Installation

npm install @callpromn/rtc-kit

Хурдан эхлэх - Quick Start

Vanilla JavaScript/HTML

<!DOCTYPE html>
<html>
<head>
    <script type="module">
        import '@callpromn/rtc-kit';
    </script>
</head>
<body>
    <!-- Дуудлагын товчлуур - Call Button -->
    <call-button to-phone-number="+1234567890" theme="dark"></call-button>
    
    <!-- Дугаар оруулах numpad -->
    <rtc-numpad theme="dark" max-length="10"></rtc-numpad>
    
    <!-- Дугаар харуулах талбар - Number Display Field -->
    <number-field phone-number="123456789" theme="dark"></number-field>
</body>
</html>

Module Bundlers-ийн хамт (Webpack, Vite, гэх мэт)

import '@callpromn/rtc-kit';

// Бүх компонентууд custom element-ээр ашиглах боломжтой
const callButton = document.createElement('call-button');
callButton.setAttribute('to-phone-number', '+1234567890');
document.body.appendChild(callButton);

Компонентууд - Components

📞 Дуудлагын товчлуур - Call Button

Default дизайнтай товчлуураар гадагшаа дуудлага хийх.

<call-button 
    to-phone-number="+1234567890" 
    theme="dark"
    disabled="false">
</call-button>

Атрибутууд - Attributes

to-phone-number - Залгах утасны дугаар
theme - Light болон Dark mode ("light" | "dark")
disabled - Товчлуурыг идэвхгүй болгох ("true" | "false")
style - Тусгай CSS загвар

✅ Accept button

Ирж буй дуудлагыг хүлээн авах товчлуур.

<accept-button theme="dark"></accept-button>

Атрибутууд - Attributes

theme - Харагдах загвар ("light" | "dark")
disabled - Товчлуурыг идэвхгүй болгох
style - Тусгай CSS загвар

❌ Decline button

Ирж буй дуудлагыг таслах товчлуур.

<decline-button theme="dark"></decline-button>

Атрибутууд - Attributes

theme - Харагдах загвар ("light" | "dark")
disabled - Товчлуурыг идэвхгүй болгох
style - Тусгай CSS загвар

📞 End button

Идэвхтэй буюу явагдаж байгаа дуудлагыг дуусгах товчлуур.

<end-button theme="dark"></end-button>

Атрибутууд:

theme - Харагдах загвар ("light" | "dark")
disabled - Товчлуурыг идэвхгүй болгох
style - Тусгай CSS загвар

🎙️ Mic button

Дуудлагын үеэр микрофоныг асаах/унтраах.

<mic-button theme="dark"></mic-button>

Атрибутууд - Attributes

theme - Харагдах загвар ("light" | "dark")
disabled - Товчлуурыг идэвхгүй болгох
muted - Анхны дуугүй төлөв
style - Тусгай CSS загвар

🔢 Numpad

Утасны дугаар оруулахад зориулсан интерактив тоон самбар.

<rtc-numpad 
    phone-number="" 
    max-length="10"
    theme="dark">
</rtc-numpad>

Атрибутууд - Attributes

phone-number - Одоогийн утасны дугаарын утга
max-length - Оронын хамгийн их тоо (анхдагч: 8)
theme - Харагдах загвар ("light" | "dark")
style - Тусгай CSS загвар

Events:

number-click - Тоо дарагдах үед гарна

numpad.addEventListener('number-click', (event) => {
    console.log('Дарагдсан:', event.detail.value);
    console.log('Одоогийн дугаар:', event.detail.phoneNumber);
});

Аргууд - Functions

getPhoneNumber() - Одоогийн утасны дугаарыг авах
setPhoneNumber(value) - Утасны дугаарыг програмчлалаар тохируулах
clearPhoneNumber() - Утасны дугаарыг арилгах

📱 Number field

Гараас оруулсан утасны дугаарыг харуулах талбар.

<number-field 
    phone-number="1234567890"
    theme="dark">
</number-field>

Атрибутууд - Attributes

phone-number - Харуулах утасны дугаар
theme - Харагдах загвар ("light" | "dark")
style - Тусгай CSS загвар

⌫ Number delete button

Дугаар устгах товчлуур.

<number-delete-button 
    phone-number="123456"
    theme="dark">
</number-delete-button>

Атрибутууд - Attributes

phone-number - Одоогийн утасны дугаар (төлөв удирдахад)
theme - Харагдах загвар ("light" | "dark")
disabled - Устгах тоо байхгүй үед идэвхгүй болгох
style - Тусгай CSS загвар

Загвар

Бүх компонентууд Light болон Dark mode-ийг дэмждэг:

<!-- Хар загвар (анхдагч) -->
<call-button theme="dark"></call-button>

<!-- Цагаан загвар -->
<call-button theme="light"></call-button>

Тусгай загвар

CSS-ын style атрибут ашиглан компонентынхоо загварыг солих боломжтой:

<call-button 
    style="
        --button-bg: #ff6b6b; 
        --button-color: white;
        border-radius: 8px;
    ">
</call-button>

Компонент загварын жишээнүүд

Call button-ны загвар

<!-- Тусгай Call button загвар -->
<call-button 
    style="
        background-color: #007bff;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        box-shadow: 0 4px 20px rgba(0, 123, 255, 0.4);
    "
    theme="dark">
</call-button>

Numpad-ны загвар

<!-- Numpad-ны загвар -->
<rtc-numpad 
    style="
        width: 200px;
        height: 250px;
        background: #f8f9fa;
        border-radius: 16px;
        border: 2px solid #e9ecef;
    "
    theme="light">
</rtc-numpad>

Number field-ны загвар

<!-- Number field-ны загвар -->
<number-field 
    style="
        background: rgba(255, 255, 255, 0.05);
        border: 2px solid #007bff;
        border-radius: 12px;
        padding: 16px 20px;
        font-size: 24px;
        font-weight: 600;
        color: #007bff;
        text-align: center;
        min-height: 60px;
        backdrop-filter: blur(10px);
    "
    phone-number="123456789"
    theme="dark">
</number-field>

Advanced Usage

Бүрэн диалер бүтээх

<div class="phone-dialer">
    <!-- Дугаар харуулах -->
    <number-field id="numberDisplay" phone-number="" theme="dark"></number-field>
    
    <!-- Numpad -->
    <rtc-numpad id="numpad" theme="dark" max-length="15"></rtc-numpad>
    
    <!-- Controller -->
    <div class="controls">
        <number-delete-button id="deleteBtn" theme="dark"></number-delete-button>
        <call-button id="callBtn" theme="dark"></call-button>
    </div>
</div>

<script>
    const numpad = document.getElementById('numpad');
    const numberDisplay = document.getElementById('numberDisplay');
    const callBtn = document.getElementById('callBtn');
    const deleteBtn = document.getElementById('deleteBtn');
    
    // Дугаар оруулах
    numpad.addEventListener('number-click', (event) => {
        const phoneNumber = event.detail.phoneNumber;
        numberDisplay.setAttribute('phone-number', phoneNumber);
        callBtn.setAttribute('to-phone-number', phoneNumber);
        deleteBtn.setAttribute('phone-number', phoneNumber);
    });
    
    // Дугаар устгах
    deleteBtn.addEventListener('click', () => {
        const currentNumber = numpad.getPhoneNumber();
        const newNumber = currentNumber.slice(0, -1);
        numpad.setPhoneNumber(newNumber);
        numberDisplay.setAttribute('phone-number', newNumber);
        callBtn.setAttribute('to-phone-number', newNumber);
    });
</script>

Browser Support

✅ Chrome 67+
✅ Firefox 63+
✅ Safari 13.1+
✅ Edge 79+

TypeScript дэмжлэг

Бүрэн TypeScript type тодорхойлолт багтсан:

import '@callpromn/rtc-kit';

// Type-safe элемент үүсгэх
const callButton = document.createElement('call-button') as HTMLElement & {
    'to-phone-number': string;
    theme: 'light' | 'dark';
    disabled: boolean;
};

Фреймворк интеграци - Framework integration

Эдгээр нь vanilla Web Components боловч бүх томоохон фреймворкуудтай хялбарханаар ажиллана:

React: @callpromn/rtc-kit-react
Vue: Тун удахгүй
Angular: Тун удахгүй
Svelte: Тун удахгүй

Лиценз - License

Энэ төсөл нь CallPro LLC-ийн өмчийн програм хангамж юм. Дэлгэрэнгүй мэдээллийг LICENSE.txt-ээс үзнэ үү.

Дэмжлэг - Support

📧 И-мэйл: [email protected]
📖 Баримт бичиг - documentation: https://docs.callpro.mn

Made with ❤️ by CallPro LLC

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

RTC Kit UI

Онцлогууд - Features

Суулгах - Installation

Хурдан эхлэх - Quick Start

Vanilla JavaScript/HTML

Module Bundlers-ийн хамт (Webpack, Vite, гэх мэт)

Компонентууд - Components

📞 Дуудлагын товчлуур - Call Button

✅ Accept button

❌ Decline button

📞 End button

🎙️ Mic button

🔢 Numpad

📱 Number field

⌫ Number delete button

Загвар

Тусгай загвар

Компонент загварын жишээнүүд

Call button-ны загвар

Numpad-ны загвар

Number field-ны загвар

Advanced Usage

Бүрэн диалер бүтээх

Browser Support

TypeScript дэмжлэг

Фреймворк интеграци - Framework integration

Лиценз - License

Дэмжлэг - Support