„Kliknij, aby zadzwonić” za pomocą interfejsu API VoIPstudio

Jakub Szczepaniak
24 października, 2014

Uwaga: Sprawdź nasze nowe, rekomendowane rozwiązanie „Kliknij, aby zadzwonić”: JavaScript CTI Connector, który pozwala 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. Odwiedź oficjalną dokumentację VoIPstudio CTI Connector, aby uzyskać wszystkie szczegóły.

Jakiś czas temu na stronie naszej firmy napisaliśmy wpis na blogu o tym, jak stworzyć funkcjonalność Click to Call przy użyciu klasy PHP-SIP, którą udostępniliśmy jako Open Source na warunkach licencji GPL. Używamy go szeroko na naszej platformie do różnych funkcji SIP, jednak jak sugerują komentarze do wspomnianego postu, twórcom stron internetowych nie zawsze jest łatwo go wdrożyć. Głównym powodem jest to, że ta klasa jest w pełni funkcjonalną SIP UAC, ale to oznacza, że musi być powiązana z lokalnym interfejsem sieciowym na porcie UDP 5060. Jest to często problematyczne we współdzielonych środowiskach hostingowych, gdzie firmy hostingowe nakładają różne ograniczenia na sieci niskiego poziomu funkcje (w szczególności funkcja Socket_create jest często wyłączona w typowym współdzielonym środowisku hostingowym PHP).

Na szczęście istnieje teraz inny, znacznie łatwiejszy sposób wdrożenia Click to Call na stronie internetowej opartej na PHP w dowolnym środowisku przy użyciu API VoIP Studio. Poniżej pokażemy krok po kroku jak to osiągnąć.

KLUCZ API VOIP STUDIO

Najpierw (jeśli jeszcze tego nie zrobiłeś) załóż konto próbne (które oferuje wszystkie dostępne funkcjonalności bezpłatnie przez miesiąc). Następnie zaloguj się i przejdź bezpośrednio do sekcji Administracja (patrz punkt 1 na rysunku 1 poniżej). W siatce Użytkownicy kliknij ikonę obok nazwy użytkownika (patrz punkt 2 na rysunku 1 poniżej), aby otworzyć okno Edycja użytkownika. Kliknij strzałkę po prawej stronie okna (patrz punkt 3 na Rysunku 1 poniżej) i przejdź do zakładki Zaawansowane (patrz punkt 4 na Rysunku 1 poniżej). Na koniec skopiuj do schowka API Key, gdyż będzie on potrzebny (wraz z adresem e-mail powiązanym z tym kontem użytkownika) w kolejnym kroku.

ZAPLECZE SKRYPTU PHP

W tym kroku utworzymy prosty skrypt PHP, który będzie obsługiwał żądania POST z naszej strony HTML „Kliknij, aby połączyć”. Wystarczy przechwycić to parametr (który będzie numerem telefonu, na który chcemy zadzwonić) i przekazać go do API VoIP Studio.

click2call.php

<?php
// sprawdź, czy liczba ma format +NUMBER
if (!isset($_REQUEST['do']) || !preg_match('/^+[0-9]{6,15}$/', $_REQUEST['do'])) {
    die("Błąd: brakuje parametru lub ma on nieprawidłowy format");
}

$url = 'https://ssl7.net/voipstudio.com/u/api';

$post_data = tablica (
    'api_email' => 'p.jones@example.com', // tutaj Twój adres e-mail VoIP Studio
    'api_key' => '1234567890abcdef', // tutaj Twój klucz API
    „o” => „połączenie internetowe”,
    „a” => „c2c”,
    'do' => $_REQUEST['do']
);

$opcje = tablica(
    'http' => tablica(
        'header' => "Typ zawartości: aplikacja/x-www-form-urlencodedrn",
        „metoda” => „POST”,
        'content' => http_build_query($post_data),
    ),
);

$context = stream_context_create($opcje);

// wyślij żądanie POST do adresu URL API i zwróć odpowiedź JSON
echo file_get_contents($url, false, $context);


?>

STRONA HTML Z KLIKALNYM NUMEREM TELEFONU

Teraz, gdy mamy już gotowy skrypt PHP zaplecza, utwórzmy prostą stronę z klikalnym numerem telefonu. W tym celu skorzystamy z popularnej biblioteki jQuery, która pomoże nam wysłać żądanie Ajax.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Click to Call via VoIP Studio API</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
Click phone number below to place a call<br/>
<a href="#" onclick="click2call('+13108709750')">+1 310 870 9750</a>

<script>
function click2call(number)
{
	$('body').append('<div>Trying to call '+number+'...</div>');
    
	$.ajax({
    	url: 'click2call.php',
    	data: { to: number },
    	dataType: 'json',
    	success: function (response) {
        	if (response.success) {
            	    $('body').append('<div style="color: green;">' + response.info + '</div>');
        	} else {
           	 
            	if (response.error) {
                	$('body').append('<div style="color: red;">' + response.error + '</div>');
            	} else if (response.errors) {
                	var errors = [];
               	 
                	for (error in response.errors) {
                    	  errors.push(response.errors[error ]);
                	}
               	 
                	$('body').append('<div style="color: red;">' + errors.join('<br/>') + '</div>');
            	}
           	 
        	}
    	}
	});
}
</script>
</body>
</html>

POŁĄCZENIA TESTOWE

Zapiszmy oba pliki na naszym serwerze WWW i otwórzmy w przeglądarce adres URL http://127.0.0.1/click2call.html. Powinniśmy zobaczyć stronę podobną do pokazanej na rysunku 2 poniżej:

**Rysunek 2.** Kliknij, aby wywołać stronę HTML

Jeśli klikniemy liczbę „nie”, najprawdopodobniej wyświetli się komunikat o błędzie, jak pokazano na rysunku 3 poniżej:

**Rysunek 3.** Kliknij, aby połączyć – błąd API

Powyższy błąd wskazuje, że sieć VoIP Studio nie była w stanie nawiązać połączenia z żądanym numerem. W naszym przypadku powodem jest to, że nie mamy zarejestrowanego żadnego punktu końcowego SIP (telefonu programowego lub sprzętowego telefonu IP). Umożliwia pobranie bezpłatnej aplikacji na telefon programowy i zalogowanie się do niej przy użyciu adresu e-mail i hasła.

Spróbujmy ponownie kliknąć nasz link…

**Rysunek 5.** Wykonywanie połączenia testowego

Tym razem zaraz po kliknięciu łącza nasz softphone zaczyna dzwonić, sygnalizując połączenie z „Click2Call”. Gdy tylko odpowiemy, VoIP Studio API spróbuje nawiązać połączenie z klikniętym numerem.

**Rysunek 6.** Nawiązano połączenie testowe

Powyższe ilustruje najbardziej podstawowy przykład. W prawdziwym świecie prawdopodobnie chciałbyś połączyć swój backend PHP z bazą danych lub systemem CRM w celu rejestrowania połączeń i innych procesów biznesowych.

W następnym poście pokażemy jak wykorzystać NodeJs do zarejestrowania kodu JavaScript po stronie serwera w sieci VoIP Studio i otrzymywania powiadomień o połączeniach przychodzących. Zatem zarówno ten samouczek, jak i kolejny, który pojawi się w kolejnych tygodniach, umożliwi zbudowanie kompletnego zintegrowanego rozwiązania telefonii hostowanej.

Read this post in: English