Хак: sip звонки пользователям сайта (сторонний сервис)

+31
3.75K
У многих соцсетей появляются звонки прямо с сайта. Здесь я предлагаю не совсем полноценный сервис звонков по sip/voip телефонии. Звонящему нужно иметь микрофон и динамики для звонка, принимающему либо скачать программный телефон для Windows с сайта (для Линукса в репозитерии взять любой программный телефон, тот же Ekiga), либо иметь аппаратный sip/voip телефон, подключенный к интернет.
В итеоге от хака мы должны получить такую кнопку:
ИллюстрацияИллюстрацияИллюстрация
Это кнопки, которые появляются до звонка, по время вызова и для завершения звонка.
Для интеграции нам понадобится всего лишь записывать номер sip абонента и подставлять его в код кнопки стороннего скрипта, то есть делов на 5 минут. демо — скачайте и распакуйте html файл, в демо вы совершаете тестовый звонок. Скачать


Все манипуляции были описаны на сайте раннее, просто адаптировал для данного случая.
Создаем поле в базе данных для номера sip пользователя в таблице cms_user_profiles

  1. ALTER TABLE `cms_user_profiles` ADD `callsip` VARCHAR( 5 ) NOT NULL AFTER `city` ;
В файле \components\users\frontend.php делаем правки:

После строк (~377-390):
  1. /////////////////////////////// EDIT PROFILE /////////////////////////////////////////////////////////////////////////////////////////
  2. if ($do=='editprofile'){
  3.  
  4. if (!$inUser->id) { cmsUser::goToLogin(); }
  5.  
  6. if ($inUser->id!=$id && !$inUser->is_admin){ cmsCore::error404(); }
  7.  
  8. $opt = $inCore->request('opt', 'str', 'edit');
  9.  
  10. $cfg_forum = $inCore->loadComponentConfig('forum');
  11.  
  12. if ($opt == 'save'){
  13.  
  14. $errors = false;
Вставить:
  1. $callsip = $inCore->request('callsip', 'str');
Чуть ниже ищем (строка 449-450 где-то):
  1. $sql = "UPDATE cms_user_profiles
  2. SET city = '$city',
И сразу вставляем:
  1. callsip = '$callsip',
То есть получим этот блок:
  1. $sql = "UPDATE cms_user_profiles
  2. SET city = '$city',
  3. callsip = '$callsip',
  4. description = '$description',
  5. showmail='$showmail',
  6. showbirth='$showbirth',
  7. showicq='$showicq',
  8. allow_who='$allow_who',
  9. signature='$signature',
  10. gender='$gender' $forms_sql,
  11. email_newmsg='$email_newmsg',
  12. cm_subscribe='$cm_subscribe'
  13. WHERE user_id = '$id'";
  14. $inDB->query($sql) ;
Далее ищем блок показа в профиле (667):
  1. /////////////////////////////// VIEW PROFILE /////////////////////////////////////////////////////////////////////////////////////////
В нем вставляем после (745):
  1. $usr['cityurl'] = urlencode($usr['city']);
следующее:
  1. ///////// Вставка
  2. $usr['callsip'] = $inDB->get_field('cms_user_profiles', "user_id=$id", 'callsip');
  3. $usr['callnum'] = strlen($usr['callsip']);
  4. /////////////////////////////////////////////////
Данный кусок как делает вывод номера, так и узнает длину его (количество цифр, их должно быть 5

Открываем файл \templates\_ВАШ_ШАБЛОН_\components\com_users_edit_profile.tpl

После блока города:
  1. <tr>
  2. <td valign="top">
  3. <strong>{$LANG.CITY}:</strong>
  4.  
  5. <span class="usr_edithint">{$LANG.CITY_TEXT}</span>
  6. </td>
  7. <td valign="top">
  8. <input name="city" type="text" id="city" class="text-input" style="width:300px" value="{$usr.city|escape:'html'}"/>
  9. <script type="text/javascript">
  10. {$autocomplete_js}
  11. </script>
  12. </td>
  13. </tr>
Вставляем свой блок:
  1. <tr>
  2. <td valign="top"><strong>Номер SIP:</strong>
  3.  
  4. <span class="usr_edithint">Короткий номер, 5 цифр.
  5. Нужно зарегестрировать номер <a href="http://zadarma.com" target="_blank">здесь</a></span>
  6. </td>
  7. <td valign="top"><input maxlength="5" name="callsip" type="text" id="callsip" style="width:300px" value="{$usr.callsip}"/></td>
  8. </tr>
  9. <tr>
Открываем файл профиля \templates\_ВАШ_ШАБЛОН_\components\com_users_profile.tpl:

В самом верху ДОЛЖНЫ быть подключены все эти библиотеки:
{add_js file='includes/jquery/tabs/jquery.ui.min.js'}
{add_js file="components/users/js/profile.js"}
{add_css file='includes/jquery/tabs/tabs.css'}


Ниже вставляем, после:
  1. {literal}
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4. $("#profiletabs > ul#tabs").tabs();
это:
  1. $("#o_call").click(function(){ $("div#call").slideDown("fast"); });
  2. $("#c_call").click(function(){ $("div#call").slideUp("fast"); });
  3. $("#t_call span").click(function(){ $("div#t_call span").toggle(); });
  4. $("input#call_cancel").click(function(){ $("div#call").slideUp("fast"); $("div#t_call span").toggle(); });
то есть код итогово такой будет:
  1. {literal}
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4. $("#profiletabs > ul#tabs").tabs();
  5. $("#o_call").click(function(){ $("div#call").slideDown("fast"); });
  6. $("#c_call").click(function(){ $("div#call").slideUp("fast"); });
  7. $("#t_call span").click(function(){ $("div#t_call span").toggle(); });
  8. $("input#call_cancel").click(function(){ $("div#call").slideUp("fast"); $("div#t_call span").toggle(); });
  9. });
  10. </script>
  11. {/literal}
Далее, ищем блок меню под аватаром, примерно после таких строк или где хотите:
  1. <tr>
  2. <td><img src="/templates/_default_/images/icons/profile/message.png" /></td>
  3. <td><a href="/users/{$usr.id}/sendmessage.html" title="{$LANG.WRITE_MESS}">{$LANG.WRITE_MESS}</a></td>
  4. </tr>
вставляете ссылку для вызова кнопки звонков:
  1. <div style="width: inherit;" id="t_call">
  2. <td><img src="/templates/_ВАШ_ШАБЛОН_/images/icons/profile/call-start.png" /></td>
  3. <td><span id="o_call" ><a href="#" title="Позвонить">Позвонить</a></span><span id="c_call" style="display: none;" title="Позвонить"><a href="#" title="Позвонить">Позвонить</a></span></td>
  4. </div>
  5.  
  6. <tr>
  7. <td colspan="2" width="195">
  8. <div class="usr_avatar" style="display:none;font-size:small;background-color:#E0EAEF;" id="call">
  9. <form action="#" method="POST">
  10. Вы хотите позвонить пользователю <strong>{$usr.nickname}</strong>?
  11. {$LANG.IF} <strong>{$usr.nickname}</strong> подымет трубку, вы сможете пообщаться бесплатно
  12. {if $usr.callnum != 5 and $usr.callsip != 4444}
  13. <strong>{$usr.nickname}</strong> не имеет аккаунт для приема звонков{else}
  14. {literal}
  15. <script type="text/javascript" src="http://zadarma.com/swfobject.js"></script>
  16. <script type="text/javascript">
  17. var flashvars = {};
  18. flashvars.phone="{/literal}{$usr.callsip}{literal}";
  19. flashvars.img1="http://zadarma.com/images/but/call3_green_ru_free.png";
  20. flashvars.img2="http://zadarma.com/images/but/call2_green_ru_connecting.png";
  21. flashvars.img3="http://zadarma.com/images/but/call2_green_ru_reset.png";
  22. flashvars.img4="http://zadarma.com/images/but/call2_green_ru_error.png";
  23. var params = {};
  24. params.wmode='transparent';
  25. var attributes = {};
  26. swfobject.embedSWF("http://zadarma.com/pbutton.swf", "myAlternativeContent", "215", "138", "9.0.0", false, flashvars, params, attributes);
  27. </script>
  28. {/literal}
  29. <div id="myAlternativeContent">
  30. <a href="http://www.adobe.com/go/getflashplayer">
  31. <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
  32. </a>
  33. </div>
  34. {/if}
  35. <div style="text-align:center;">
  36. <input type="button" id="call_cancel" name="cancel" value="Закрыть" />
  37. </div>
  38. </form>
  39. </div>
  40. </td>
  41. </tr>
  42. </tr>
  43.  
Если после вставки, Вы будете видеть ссылку в своем профиле, то обрамляете весь текст, что выше в такую конструкцию:
  1. {if !$myprofile}...................{/if}
Все, кнопка готова. Теперь осталось только добавить картинку call-start.png — подобрать на свое усмотрение и залить ее сюда: /templates/_ВАШ_ШАБЛОН_/images/icons/profile/
ОБРАТИТЕ ВНИМАНИЕ: в коде присутствует ссылка с _ВАШ_ШАБЛОН_ — замените на название папки шаблона.

Осталась малость: регистрироваться на сайте zadarma.com, скачать и настроить sip-телефон (можно их сборку под Windows), ввести номер sip в настройках своего профиля.

Данный хак — это не полноценные звонки на сайте, для полноценных звонков без дополнительного оборудования/программ нужно иметь собственный сервер.

Нашел еще один сервис звонков по sip технологии, но пока не выкладываю, веду переговоры по API — для полной интеграци с платформой.

Больше, чем написал, интеграции не провести для zadarma, получу API другого сервиса — отпишусь.

Должно работать в 1.6-1.9
Исправил, то что недоглядел при оформлени блога. Перепроверил. Теперь бага не будет.
0
Эдька Эдька 12 лет назад #
реально классный сервис
0
eoleg eoleg 12 лет назад #
+
0
lezginka.ru lezginka.ru 12 лет назад #
+++
а если полноценный сделать на основе API, так это вообще коммерческий продукт !
0
Telema93 Telema93 12 лет назад #
а если у себя с биллингом - то сервак свой нужен с настройками voip, а он не у всех есть, у меня есть, да не хочу перегружать, плюс свой скрипт писать instantcms-сервер
касательно API - если буржуи дадут доступ, то поясню как можно интегрировать сторонний сервис с видеозвонками и как стать их партнером
ставил zadarma но по аналоги можно любой, только код поменять на свой вот этот:
Код PHP:
{literal}
<script type="text/javascript" src="http://zadarma.com/swfobject.js"></script> 
<script type="text/javascript"> 
	var flashvars = {};
	flashvars.phone="{/literal}{$usr.callsip}{literal}";
	flashvars.img1="http://zadarma.com/images/but/call3_green_ru_free.png";
	flashvars.img2="http://zadarma.com/images/but/call2_green_ru_connecting.png";
	flashvars.img3="http://zadarma.com/images/but/call2_green_ru_reset.png";
	flashvars.img4="http://zadarma.com/images/but/call2_green_ru_error.png";
	var params = {};
	params.wmode='transparent';
	var attributes = {};
	swfobject.embedSWF("http://zadarma.com/pbutton.swf", "myAlternativeContent", "215", "138", "9.0.0", false, flashvars, params, attributes);
</script> 
{/literal} 
<div id="myAlternativeContent"> 
	<a href="http://www.adobe.com/go/getflashplayer"> 
	<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /> 
	</a> 
</div>
вставив туда {$usr.callsip}
0
lezginka.ru lezginka.ru 12 лет назад #
привязать туда биллинг и все такое прочее
0
Telema93 Telema93 12 лет назад #
интеграция с биллингом: добавить условие - только юзеры группы вип могут получить этот доступ :)
{if {$group.id} == 10} .... {else}Вы не состоите в группе VIP! Для того, чтоб стать vip - /ссылка как стать/{/if}
где 10 - id нужной группы
и тут может быть как биллинг, так и другие возможности
0
Данила Данила 12 лет назад #
Для интеграции нам понадобится всего лишь записывать номер sip абонента и подставлять его в код кнопки стороннего скрипта.
-Можно поподробней как и где сделать это?
0
Telema93 Telema93 12 лет назад #
так все написано же....
0
Telema93 Telema93 12 лет назад #
закралось 2 ошибки, 1 несущественная, вторая в условии - исправил
в самом коде шаблона {if $usr.callnum != 5 && $usr.callsip != 4444} вместо {if $usr.callnum != 5 || $usr.callsip != 4444}
в тексте поправил
+2
Данила Данила 12 лет назад #
Tщё одна ошибка в коде

Код PHP:
("#o_call").click(function(){ $("div#call").slideDown("fast"); });	
$("#c_call").click(function(){ $("div#call").slideUp("fast"); });
$("#t_call span").click(function(){ $("div#t_call span").toggle(); });
$("input#call_cancel").click(function(){ $("div#call").slideUp("fast"); $("div#t_call span").toggle(); });
в самом начале не стоит знак $
+2
soxom soxom 12 лет назад #
Интересный хак... Сегодня-завтра обязательно попробуем его в работе
+2
Виктор Данилов Виктор Данилов 12 лет назад #
Вообще здорово! Правдо только не очень, что нужно чтобы софт был включен.
Вот я этой прогой пользуюсь, может кому поможет
http://wiki.zadarma.com/index.php/PhonerLite
0
BSB BSB 12 лет назад #
Внедрил. Только скрипт поставил из примера.
Спасибо, автор!
-2
Shahin Shahin 10 лет назад #
запрос не добовляется #1146 - Table 'newin.cms_user_profiles' doesn't exist
как добавить поле?

Еще от автора

[Хак] ICQ чат на сайте
Помнится, был раньше такой мессенджер Multul (http://instantcms.ru/blogs/tanatognozija/plagin-mesedzher.html), который скончался.
IP Cloudflare и решение на PHP
Нашел другие файлы, где заменить также!!! Извиняюсь, не досмотрел... Есть такой замечательный CDN сервис - Cloudflare.
Хак - Новое в блогах (mod_latestblogs) - вывод части текста записи в модуле
Мне не очень нравился вывод в модуле Новое в блогах (mod_latestblogs) только названия записи, количества комментариев, автора и названия блога, поэтом
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.