Перейти к содержанию

Звонок между двумя браузерами через SIP сервер

Описание

SIP звонок между браузерами через WCS является частным случаем звонков между браузером и SIP-устройством, при этом веб-приложение в браузере исполняет роль программного телефона с обоих сторон звонка.

Поддерживаемые платформы и браузеры

Chrome Firefox Safari Edge
Windows ✅ ✅ ❌ ✅
Mac OS ✅ ✅ ✅ ✅
Android ✅ ✅ ❌ ✅
iOS ✅ ✅ ✅ ✅

Поддерживаемые протоколы

  • WebRTC
  • RTP
  • SIP

Поддерживаемые кодеки

  • H.264
  • VP8
  • G.711
  • Speex
  • G.729
  • Opus

Поддерживаемые SIP функции

  • DTMF
  • Удержание звонка
  • Перевод звонка

SIP функции управляются при помощи WebSDK.

Схема работы

1. SIP-сервер как прокси-сервер для передачи вызовов и RTP медиа

 

  1. Браузер 1 начинает звонок с аккаунта Caller на аккаунт Callee
  2. WCS соединяется с SIP-сервером
  3. SIP-сервер передает WCS входящий вызов на аккаунт Callee
  4. WCS передает браузеру 2 событие о поступлении звонка
  5. Браузеры обмениваются аудио- и видеопотоками

2. SIP-сервер только как сервер для передачи вызовов

  1. Браузер 1 начинает звонок с аккаунта Caller на аккаунт Callee
  2. WCS соединяется с SIP-сервером
  3. SIP-сервер передает WCS входящий вызов на аккаунт Callee
  4. WCS передает браузеру 2 событие о поступлении звонка
  5. Браузеры обмениваются аудио- и видеопотоками

3. Без внешнего SIP-сервера. SIP и RTP медиа обрабатываются на WCS.

 

  1. Браузер 1 начинает звонок с аккаунта Caller на аккаунт Callee
  2. WCS устанавливает SIP-соединение между аккаунтами
  3. WCS передает браузеру 2 событие о поступлении звонка
  4. Браузеры обмениваются аудио- и видеопотоками

Краткое руководство по тестированию

  1. Для тестирования используем:
  2. два SIP-аккаунта;

  3. веб-приложение Phone для совершения звонка

  4. Откройте веб-приложение Phone. Введите данные SIP-аккаунта и нажмите кнопку Connect для установки соединения с сервером:

  5. Откройте веб-приложение Phone в другом окне браузера. Введите данные второго SIP-аккаунта и нажмите кнопку Connect:

  6. Введите идентификатор SIP-аккаунта, принимающего звонок, и нажмите кнопку Call:

  7. Примите звонок, нажав кнопку Answer:

    Звонок начался:

  8. Для завершения звонка нажмите кнопку Hangup

Последовательность выполнения операций

Ниже описана последовательность вызовов при использовании примера Phone для создания звонка. SIP-сервер используется как прокси-вервер для передачи команд и медиа

phone.html

phone.js

  1. Создание звонка при помощи WebSDK
    Session.createCall(), Call.call() code

    var outCall = session.createCall({
    callee: $("#callee").val(),
    visibleName: $("#sipLogin").val(),
    localVideoDisplay: localDisplay,
    remoteVideoDisplay: remoteDisplay,
    constraints: constraints,
    receiveAudio: true,
    receiveVideo: false
    ...
});

outCall.call();

  2. Отправка SIP INVITE на SIP сервер

  3. SIP-сервер отправляет SIP INVITE на WCS, поскольку вызываемый абонент зарегистрирован с него же

  4. Отправка второму браузеру события, оповещающего о входящем звонке
    CALL_STATUS.RING code

    Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session, connection){
    ...
}).on(SESSION_STATUS.INCOMING_CALL, function(call){ 
    call.on(CALL_STATUS.RING, function(){
        setStatus("#callStatus", CALL_STATUS.RING);
        ...
    });
    ...
});

  5. Второй браузер отвечает на звонок
    Call.answer() code

    function onIncomingCall(inCall) {
    currentCall = inCall;

    showIncoming(inCall.caller());

    $("#answerBtn").off('click').click(function(){
        $(this).prop('disabled', true);
        var constraints = {
            audio: true,
            video: false
        };
        inCall.answer({
            localVideoDisplay: localDisplay,
            remoteVideoDisplay: remoteDisplay,
            receiveVideo: false,
            constraints: constraints
        });
        showAnswered();
    }).prop('disabled', false);
    ...
}

  6. Передача подтверждения SIP-серверу

  7. Получение подтверждения от SIP-сервера

  8. Первый браузер получает от сервера событие, подтверждающего успешное соединение CALL_STATUS.ESTABLISHED code

    var outCall = session.createCall({
    ...
}).on(CALL_STATUS.ESTABLISHED, function(){
    setStatus("#callStatus", CALL_STATUS.ESTABLISHED);
    $("#holdBtn").prop('disabled',false);
    onAnswerOutgoing();
    ...
});

  9. Стороны звонка обмениваются аудио- и видеопотоками

  10. Завершение звонка
    Call.hangup() code

    function onConnected(session) {
    $("#connectBtn, #connectTokenBtn").text("Disconnect").off('click').click(function(){
        $(this).prop('disabled', true);
        if (currentCall) {
            showOutgoing();
            disableOutgoing(true);
            setStatus("#callStatus", "");
            currentCall.hangup();
        }
        session.disconnect();
    }).prop('disabled', false);
}

  11. Отправка SIP BYE на SIP-сервер

  12. Получение SIP BYE от SIP-сервера

  13. Отправка второму браузеру события, оповещающего о завершении звонка
    CALL_STATUS.FINISH code

    Flashphoner.createSession(connectionOptions).on(SESSION_STATUS.ESTABLISHED, function(session, connection){
    ...
}).on(SESSION_STATUS.INCOMING_CALL, function(call){ 
    call.on(CALL_STATUS.RING, function(){
        ...
    }).on(CALL_STATUS.FINISH, function(){
        setStatus("#callStatus", CALL_STATUS.FINISH);
        onHangupIncoming();
        currentCall = null;
        ...
    });
    ...
});

  14. Отправка подтверждения на SIP-сервер

  15. Получение подтверждения от SIP-сервера

№# Звонки без использования внешнего SIP сервера

WCS может обрабатывать трафик SIP звонка без использования SIP сервера (см схему выше). Для этого необходимо установить следующие настройки в файлеflashphoner.properties

enable_local_videochat=true
sip_add_contact_id=false
  1. Для тестирования используем:

  2. веб-приложение Phone для совершения звонка

  3. Откройте веб-приложение Phone. Введите:

  4. имя пользователя
  5. пароль
  6. в поле SIP Domain укажите адрес WCS сервера (но не доменное имя!)
  7. в поле SIP Outbound Proxy укажите адрес WCS сервера (но не доменное имя!)
  8. в поле SIP Port укажите 0

  9. снимите переключатель Register requred
    Нажмите Connect

  10. Откройте веб-приложение Phone в другом окне браузера. Введите:

  11. имя второго пользователя
  12. пароль
  13. в поле SIP Domain укажите адрес WCS сервера (но не доменное имя!)
  14. в поле SIP Outbound Proxy укажите адрес WCS сервера (но не доменное имя!)
  15. в поле SIP Port укажите 0

  16. снимите переключатель Register requred
    Нажмите Connect

  17. Введите имя пользователя, принимающего звонок, и нажмите Call

  18. Примите звонок, нажав кнопку Answer

  19. Звонок установлен