@tmsoft/webphone

SIP softphone component for Vue 3 and Web Components.

Installation

npm install @tmsoft/webphone

Usage

Vue 3

<script setup lang="ts">
import { WebPhone } from '@tmsoft/webphone'
</script>

<template>
  <WebPhone host="pbx.example.com" extension="1001" password="your-password" />
</template>

Web Component

<script src="https://unpkg.com/@tmsoft/webphone/dist/webphone.component.js"></script>

<web-phone host="pbx.example.com" extension="1001" password="your-password"></web-phone>

Props

| Prop | Type | Required | Default | Description | | ----------- | -------------------------------- | -------- | -------- | ------------------------------------------------------------------- | | host | string | No* | — | SIP server hostname. WebSocket URL: wss://<host>:8089/asterisk/ws | | wsUrl | string | No* | — | Custom WebSocket URL. Takes precedence over host | | extension | string | Yes | — | SIP extension | | password | string | Yes | — | SIP password | | mode | 'webcall' \| 'call' \| 'video' | No | 'call' | Operating mode | | logo | string | No | — | Logo URL for webcall mode | | to | string | No | — | Auto-dial number for webcall mode | | contacts | WebPhoneContact[] | No | [] | Contact list |

* Either host or wsUrl must be provided.

Modes

| Mode | Description | | --------- | ----------------------------------------------- | | call | Standard softphone with keypad and call history | | video | Softphone with video support | | webcall | Click-to-call widget. Requires to and logo |

Types

interface WebPhoneContact {
  name: string
  number: string
  type?: 'tool' | 'extension' | 'contact' | 'voicemail'
}

Events

| Event | Description | | ------ | ------------------- | | back | Back button pressed |

License

MIT