Інтеграція SIP-телефонії на веб-сайт
SIP (Session Initiation Protocol) — стандартний протокол для IP-телефонії. Інтеграція SIP-телефонії з веб-сайтом дозволяє приймати і робити звонки безпосередньо з браузера через WebRTC, пов'язувати звонки з замовленнями та клієнтами, вести історію звернень.
Архітектура SIP-інтеграції
Браузер (WebRTC) ←→ SIP Gateway (Asterisk/FreeSWITCH) ←→ SIP-провайдер ←→ ТСОП
↑
API сайту (події, аналітика)
SIP-клієнт у браузері працює через WebRTC, SIP Gateway конвертує WebRTC в SIP, далі звонок йде по звичайних SIP-каналах.
SIP.js — клієнт для браузера
// npm install sip.js
import { UserAgent, Inviter, SessionState } from 'sip.js';
const ua = new UserAgent({
uri: UserAgent.makeURI('sip:[email protected]'),
transportOptions: {
server: 'wss://sip.yourpbx.ua:8089/ws'
},
authorizationUsername: sipLogin,
authorizationPassword: sipPassword
});
await ua.start();
// Здійснити звонок
const target = UserAgent.makeURI('sip:[email protected]');
const inviter = new Inviter(ua, target);
inviter.stateChange.addListener((state) => {
if (state === SessionState.Established) {
// Звонок встановлений
}
if (state === SessionState.Terminated) {
// Звонок завершений
}
});
await inviter.invite();
Кнопка Click-to-Call
На сторінці замовлення або картці клієнта — кнопка "Позвонити":
document.getElementById('call-btn').addEventListener('click', async () => {
// Запросити дозвіл на мікрофон
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const inviter = new Inviter(ua, UserAgent.makeURI(`sip:${phoneNumber}@pbx.ua`));
await inviter.invite({
sessionDescriptionHandlerOptions: {
constraints: { audio: true, video: false }
}
});
});
Попап при вхідному звонку
При вхідному звонку через PBX webhook — показати попап з даними клієнта:
// PBX відправляє webhook при вхідному
Route::post('/webhooks/pbx/call', function (Request $request) {
$callerPhone = $request->caller_number;
// Знайти клієнта за номером
$customer = Customer::where('phone', $this->normalizePhone($callerPhone))->first();
// Push через WebSocket до менеджера
broadcast(new IncomingCallEvent($callerPhone, $customer));
});
На фронті: Echo.private('agent.{id}').listen('IncomingCallEvent', ...) — відображає попап з історією клієнта ще до відповіді на звонок.
Запис розмов
При використанні Asterisk або FreeSWITCH — записи зберігаються у WAV/MP3, шлях до файлу передається через AMI/ESL. Файл копіюється на S3, посилання зберігається у call_records:
call_records (
id, call_id, customer_id, agent_id,
started_at, duration_sec,
recording_url, disposition: answered | noanswer | busy
)
Тривалість розробки: 2–3 тижні для повної інтеграції з SIP-клієнтом у браузері, click-to-call та попапом при вхідному звонку.