Jakiś czas temu wprowadziliśmy funkcję Click to Call z API VoIPstudio, która pozwala na tworzenie prostych interfejsów użytkownika typu „click2call”. Rozwiązanie ewoluowało od innego starszego wpisu na blogu, który wprowadził „c2c” z klasą PHP-SIP. Dziś chcę Wam pokazać kolejny etap ewolucji wdrożenia c2c: JavaScript CTI Connector pozwalający na integrację telefonii komputerowej (CTI) strony internetowej lub aplikacji klienta oraz VoIPstudio Cloud PBX.
Ta integracja nie wymaga już PHP ani żadnych innych komponentów po stronie serwera. Cała implementacja napisana jest w języku JavaScript i można ją w prosty sposób zintegrować z dowolną aplikacją obsługującą JavaScript w przeglądarce internetowej.
To ogólne złącze JavaScript CTI Connector opiera się na najnowszych pracach, które wykonaliśmy w celu integracji naszej platformy Cloud PBX z Salesforce i Oracle Sales Cloud. Naszym głównym celem było udostępnienie podobnej funkcjonalności programistom pracującym nad dowolnymi aplikacjami internetowymi, które mogą czerpać korzyści z integracji VoIP (telefonii).
Nasz CTI Connector jest w pewnym sensie podobny do WebRTC, ponieważ oferuje bogatą komunikację w czasie rzeczywistym kontrolowaną przez przeglądarkę internetową. Istnieje jednak kilka zasadniczych różnic:
- działa we wszystkich przeglądarkach internetowych (w chwili pisania tego tekstu WebRTC nie jest obsługiwany przez przeglądarkę Internet Explorer, co może ograniczać jego wykorzystanie w aplikacjach biznesowych);
- nie jest to technologia peer-to-peer i korzysta ze wszystkich zaawansowanych funkcjonalności telefonicznych dostępnych w platformie VoIPstudio;
- oferuje łączność z/do sieci PSTN (tradycyjnego telefonu) „od razu po wyjęciu z pudełka”;
WYMAGANIA
Strofa
Nasz Cti.Connector wymaga biblioteki XMPP dla JavaScript: Strophe.js – Strophe wykorzystuje BOSH (strumienie dwukierunkowe przez synchroniczny HTTP) do emulacji trwałego, stanowego, dwukierunkowego połączenia z serwerem XMPP. Więcej informacji o Strophe i XMPP można znaleźć w oficjalnej dokumentacji.
Konto Studio VoIP
Aby móc przetestować nasz Connector, musisz założyć konto próbne – jeśli jeszcze go nie masz. Konto to oferuje wszystkie dostępne funkcjonalności bezpłatnie przez miesiąc.
VoIPstudio ogłosiło także ograniczoną czasowo ofertę dla społeczności programistów – aby umożliwić łatwe testowanie CTI Connector, zaoferuje dodatkowe 5 dolarów darmowego kredytu na połączenia wychodzące i bezpłatny numer przychodzący w dowolnym z ponad 5000 miast w 50 krajach.
ZŁĄCZE
Zalecamy zapoznanie się z naszą oficjalną dokumentacją Cti.Connector w celu uzyskania szczegółów implementacji. W tym artykule chcę się skupić na wdrożeniach i integracji.
Najpierw musisz pobrać Cti.Connector z naszego repozytorium i jego zależności ( Strophe.js ).
Aby zainstalować Cti.Connector w swojej aplikacji, wystarczy skopiować/wkleić następujące linie kodu:
<script src="”https://cdnjs.cloudflare.com/ajax/libs/strophe.js/1.1.3/strophe.min.js”" type="”text/javascript”"></script> <script src="”js/cti-connector.js”" type="”text/javascript”"></script>
I to wszystko, czego potrzeba do integracji.
Tworzenie łącznika CTI
Aby móc komunikować się z API VoIP Studio należy utworzyć instancję Cti.Connector z odpowiednią konfiguracją, uwierzytelnić się i połączyć z API XMPP.
W tym celu należy przekazać tylko jeden parametr: onMessage do konstruktora Connectora. Ale przed wykonaniem tej onMessage funkcji wywołania zwrotnego należy zdefiniować. Dla Ciebie i Twojej integracji jest to najważniejsza część, ponieważ onMessage funkcja nasłuchuje zdarzeń Connector i może odpowiednio na nie reagować.
Tutaj znajdziesz wszystkie niezbędne informacje o zdarzeniach, które wysyła Connector.
var onMessage = function(event) { if (event.name === Cti.EVENT.LOGGED_IN) { // ... } if (event.name === Cti.EVENT.READY) { // ... } if (event.name === Cti.EVENT.RINGING) { // ... } if (event.name === Cti.EVENT.CONNECTED) { // ... } if (event.name === Cti.EVENT.ON_HOLD) { // ... } if (event.name === Cti.EVENT.HUNGUP) { // ... } } var connector = new Cti.Connector({ onMessage: onMessage });
Uwaga: Pamiętaj o dodaniu własnej implementacji, która będzie odpowiadać na wydarzenia, którymi jesteś zainteresowany.
Uwierzytelnianie
Teraz, gdy Connector jest ustawiony, możemy uwierzytelnić się i połączyć z API VoIP Studio przy użyciu danych uwierzytelniających VoIP Studio (nazwa użytkownika i hasło). Jest to tak proste, jak wywołanie metody logowania w instancji Connector z parametrami:
var username = “test@example.com”,
password = “secretpassword”;
connector.login(username, password);
Po pomyślnym uwierzytelnieniu Connector powinien wysłać zdarzenia:
* Cti.EVENT.LOGGED_IN co oznacza, że użytkownik został zalogowany;
* Cti.EVENT.READY co oznacza, że połączenie zostało nawiązane.
Możemy także sprawdzić czy użytkownik jest zalogowany i czy nawiązano połączenie wywołując isConnected metodę:
connector.isConnected();
Metoda ta może być przydatna np. jeśli po odświeżeniu strony chcesz sprawdzić czy Connector jest podłączony.
Aby wylogować się i zamknąć metodę połączenia logout:
connector.logout();
Po wylogowaniu Connector wyśle Cti.EVENT.LOGGED_OUT zdarzenie.
Połączenia
Wykonywanie połączenia
Po otrzymaniu Cti.EVENT.READY zdarzenia jesteśmy gotowi do wykonywania połączeń. Aby wykonać nowe połączenie telefoniczne należy wywołać call metodę z parametrem numeru docelowego w formacie E164 .
var miejsce docelowe = "+123456789";
złącze.call(miejsce docelowe);
Następnie przez Connector zostaną wysłane następujące zdarzenia:
Cti.EVENT.INITIAL– inicjalizacja połączeniaCti.EVENT.ACCEPTED– aby powiadomić, że rozmówca odbierze telefon;Cti.EVENT.RINGING– aby powiadomić, że połączenie jest nawiązywane i dzwoni telefon rozmówcy;Cti.EVENT.CONNECTED– aby powiadomić, że odbiorca odebrał połączenie i połączenie zostało nawiązane.
Uwaga: Każde zdarzenie ma unikalny identyfikator wywołania, którego należy używać do identyfikowania przyszłych zmian wywołań.
Przekazywanie połączenia
Rozpoczęte połączenie można przenieść lub zakończyć. Aby przekierować połączenie do innego miejsca docelowego należy wywołać transfer metodę na instancji Connector z callId parametrem (w celu określenia które połączenie ma zostać przekazane) oraz parametrem numeru docelowego w formacie E164:
var callId = "1432549154470",
miejsce docelowe = "+987654321";
złącze.transfer(id połączenia, miejsce docelowe);
Po przekazaniu połączenia Connector wyśle Cti.EVENT.HANGUP zdarzenie z potwierdzeniem pomyślnej operacji.
Zakończenie połączenia
Aby zakończyć dane wywołanie musimy wywołać terminate metodę z callId parametrem:
var callId = "1432549154470",
złącze.terminate(identyfikator połączenia);
Po zakończeniu połączenia Connector wyśle Cti.EVENT.HANGUP zdarzenie z potwierdzeniem pomyślnej operacji.
Obsługa błędów
W niektórych przypadkach Connector może wysłać Cti.EVENT.ERROR zdarzenie, np. gdy podczas uwierzytelniania przekażemy błędną nazwę użytkownika i hasło lub gdy przekażemy do call metody nieprawidłowy numer docelowy.
Takie zdarzenia powinny być obsługiwane w wywołaniu zwrotnym funkcji onMessage:
var onMessage = funkcja (zdarzenie) {
if (nazwa.zdarzenia === Cti.EVENT.ERROR) {
// każde zdarzenie błędu ma odpowiedni atrybut komunikatu
alert(zdarzenie.wiadomość);
}
}
Wszystkie szczegóły wdrożenia znajdziesz w naszej dokumentacji (https://voipstudio.com/en/manual/Admin_Integrations-CTI-Connector).
SZYBKI START PLATFORMY CTI.PLATFORM
Zachęcamy do zapoznania się z naszą przykładową realizacją:
- Zarejestruj konto na stronie https://voipstudio.pl/rejestracja/
- Pobierz i uruchom softphone https://voipstudio.pl/pobieranie/ (lub użyj dowolnego innego klienta SIP)
- Wyciągnij złącze cti z Githuba na swój komputer
- Otwórz plik example/cti-connector.html w swojej przeglądarce internetowej
- Zaloguj się za pomocą adresu e-mail i hasła VoIPstudio
- Wpisz numer, pod który chcesz zadzwonić
POMOC
Jeśli napotkasz jakiekolwiek problemy, znajdziesz błąd lub masz pomysł na rozszerzenie funkcjonalności CTI Connector, otwórz zgłoszenie na Githubie, a jeden z naszych programistów wkrótce odpowie.
Powodzenia z integracją!
