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

2750
У многих соцсетей появляются звонки прямо с сайта. Здесь я предлагаю не совсем полноценный сервис звонков по sip/voip телефонии. Звонящему нужно иметь микрофон и динамики для звонка, принимающему либо скачать программный телефон для Windows с сайта (для Линукса в репозитерии взять любой программный телефон, тот же Ekiga), либо иметь аппаратный sip/voip телефон, подключенный к интернет.
В итеоге от хака мы должны получить такую кнопку:

Это кнопки, которые появляются до звонка, по время вызова и для завершения звонка.
Для интеграции нам понадобится всего лишь записывать номер sip абонента и подставлять его в код кнопки стороннего скрипта, то есть делов на 5 минут. демо - скачайте и распакуйте html файл, в демо вы совершаете тестовый звонок. Скачать


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

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

После строк (~377-390):
Код PHP:
/////////////////////////////// EDIT PROFILE /////////////////////////////////////////////////////////////////////////////////////////
if ($do=='editprofile'){

	if (!$inUser->id) { cmsUser::goToLogin(); }

	if ($inUser->id!=$id && !$inUser->is_admin){ cmsCore::error404(); }

	$opt = $inCore->request('opt', 'str', 'edit');

	$cfg_forum = $inCore->loadComponentConfig('forum');
	
	if ($opt == 'save'){

		$errors = false;
Вставить:
Код PHP:
$callsip = $inCore->request('callsip', 'str');
Чуть ниже ищем (строка 449-450 где-то):
Код PHP:
$sql = "UPDATE cms_user_profiles 
					SET city = '$city',
И сразу вставляем:
Код PHP:
callsip = '$callsip',
То есть получим этот блок:
Код PHP:
$sql = "UPDATE cms_user_profiles 
					SET city = '$city',
						callsip = '$callsip',
						description = '$description',
						showmail='$showmail',
						showbirth='$showbirth',
						showicq='$showicq',
						allow_who='$allow_who',
						signature='$signature',
						gender='$gender' $forms_sql,
						email_newmsg='$email_newmsg',
						cm_subscribe='$cm_subscribe'
					WHERE user_id = '$id'";
			$inDB->query($sql) ;
Далее ищем блок показа в профиле (667):
Код PHP:
/////////////////////////////// VIEW PROFILE /////////////////////////////////////////////////////////////////////////////////////////
В нем вставляем после (745):
Код PHP:
$usr['cityurl']             = urlencode($usr['city']);
следующее:
Код PHP:
///////// Вставка
	$usr['callsip']				= $inDB->get_field('cms_user_profiles', "user_id=$id", 'callsip');
	$usr['callnum']				= strlen($usr['callsip']);
/////////////////////////////////////////////////
Данный кусок как делает вывод номера, так и узнает длину его (количество цифр, их должно быть 5

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

После блока города:
Код PHP:
<tr>
                        <td valign="top">
                            <strong>{$LANG.CITY}:</strong>

                            <span class="usr_edithint">{$LANG.CITY_TEXT}</span>
                        </td>
                        <td valign="top">
                            <input name="city" type="text" id="city" class="text-input" style="width:300px" value="{$usr.city|escape:'html'}"/>
                            <script type="text/javascript">
                                {$autocomplete_js}
                            </script>
                        </td>
                    </tr>
Вставляем свой блок:
Код PHP:
<tr>
                       <td valign="top"><strong>Номер SIP:</strong>

			<span class="usr_edithint">Короткий номер, 5 цифр.
Нужно зарегестрировать номер <a href="http://zadarma.com" target="_blank">здесь</a></span>			
			</td>
                       <td valign="top"><input maxlength="5" name="callsip" type="text" id="callsip" style="width:300px" value="{$usr.callsip}"/></td>
                   </tr>
                    <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'}


Ниже вставляем, после:
Код PHP:
{literal}
	<script type="text/javascript">
		$(document).ready(function(){
			$("#profiletabs > ul#tabs").tabs();
это:
Код 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(); });
то есть код итогово такой будет:
Код PHP:
{literal}
	<script type="text/javascript">
		$(document).ready(function(){
			$("#profiletabs > ul#tabs").tabs();
$("#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(); });
		});
	</script>
{/literal}
Далее, ищем блок меню под аватаром, примерно после таких строк или где хотите:
Код PHP:
<tr>
                                    <td><img src="/templates/_default_/images/icons/profile/message.png" border="0"/></td>
                                    <td><a href="/users/{$usr.id}/sendmessage.html" title="{$LANG.WRITE_MESS}">{$LANG.WRITE_MESS}</a></td>
                                </tr>
вставляете ссылку для вызова кнопки звонков:
Код PHP:
<div style="width: inherit;" id="t_call">
    <td><img src="/templates/_ВАШ_ШАБЛОН_/images/icons/profile/call-start.png" border="0"/></td>
 <td><span id="o_call" ><a href="#" title="Позвонить">Позвонить</a></span><span id="c_call" style="display: none;" title="Позвонить"><a href="#" title="Позвонить">Позвонить</a></span></td>
</div>

<tr>
<td colspan="2" width="195">
	<div class="usr_avatar" style="display:none;font-size:small;background-color:#E0EAEF;" id="call">
	<form action="#" method="POST">
	Вы хотите позвонить пользователю <strong>{$usr.nickname}</strong>?
	{$LANG.IF} <strong>{$usr.nickname}</strong> подымет трубку, вы сможете пообщаться бесплатно
{if $usr.callnum != 5 and $usr.callsip != 4444}
<strong>{$usr.nickname}</strong> не имеет аккаунт для приема звонков{else}
{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>
{/if} 
 	<div style="text-align:center;">
		<input type="button" id="call_cancel" name="cancel" value="Закрыть" />
	</div>
	</form>						
	</div>
</td>
</tr>
  </tr>
Если после вставки, Вы будете видеть ссылку в своем профиле, то обрамляете весь текст, что выше в такую конструкцию:
Код PHP:
{if !$myprofile}...................{/if}
Все, кнопка готова. Теперь осталось только добавить картинку call-start.png - подобрать на свое усмотрение и залить ее сюда: /templates/_ВАШ_ШАБЛОН_/images/icons/profile/
ОБРАТИТЕ ВНИМАНИЕ: в коде присутствует ссылка с _ВАШ_ШАБЛОН_ - замените на название папки шаблона.

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

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

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

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

Должно работать в 1.6-1.9
Исправил, то что недоглядел при оформлени блога. Перепроверил. Теперь бага не будет.
Хак фотоальбома - добавляем демотиватор! | Хак - Новое в блогах (mod_latestblogs) - вывод части текста записи в модуле
Комментарии (14)
Эдька 18 января 2012 в 19:03 0
реально классный сервис
eoleg 18 января 2012 в 19:07 0
+
lezginka.ru 18 января 2012 в 19:10 0
+++
а если полноценный сделать на основе API, так это вообще коммерческий продукт !
Telema93 18 января 2012 в 19:19 0
а если у себя с биллингом - то сервак свой нужен с настройками 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}
lezginka.ru 18 января 2012 в 19:10 0
привязать туда биллинг и все такое прочее
Telema93 18 января 2012 в 20:32 0
интеграция с биллингом: добавить условие - только юзеры группы вип могут получить этот доступ :)
{if {$group.id} == 10} .... {else}Вы не состоите в группе VIP! Для того, чтоб стать vip - /ссылка как стать/{/if}
где 10 - id нужной группы
и тут может быть как биллинг, так и другие возможности
Данила 18 января 2012 в 21:06 0
Для интеграции нам понадобится всего лишь записывать номер sip абонента и подставлять его в код кнопки стороннего скрипта.
-Можно поподробней как и где сделать это?
Telema93 18 января 2012 в 21:10 0
так все написано же....
Telema93 19 января 2012 в 00:49 0
закралось 2 ошибки, 1 несущественная, вторая в условии - исправил
в самом коде шаблона {if $usr.callnum != 5 && $usr.callsip != 4444} вместо {if $usr.callnum != 5 || $usr.callsip != 4444}
в тексте поправил
Данила 19 января 2012 в 12:19 +2
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(); });
в самом начале не стоит знак $
soxom 19 января 2012 в 15:45 +2
Интересный хак... Сегодня-завтра обязательно попробуем его в работе
Виктор Данилов 11 июня 2012 в 13:28 +2
Вообще здорово! Правдо только не очень, что нужно чтобы софт был включен.
Вот я этой прогой пользуюсь, может кому поможет
http://wiki.zadarma.com/index.php/PhonerLite
BSB 10 октября 2012 в 06:00 0
Внедрил. Только скрипт поставил из примера.
Спасибо, автор!
Shahin 13 января 2014 в 00:20 -2
запрос не добовляется #1146 - Table 'newin.cms_user_profiles' doesn't exist
как добавить поле?