Интеграция 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.ru: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.ru`));
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 и попапом при входящем звонке.