Как добавить себе на сайт WebRTC звонки без лишних затрат и обойти баги с граблями, расскажем ниже.
Зачем кнопка с WebRTC?
- Удобно! Не нужно ничего набирать или оставлять свой номер, просто нажимаем кнопку.
- Выгодно. Ни вы, ни клиент ничего не платите. Связь бесплатна для всех.
Какие бывают решения?
Своя разработка
Можете установить себе asterisk или freeswitch и попробовать запустить на нем бесплатный код webrtc телефона. Рано или поздно код заработает, но чтобы работал с большинством браузеров придется пройти длинный путь. Далее начнется поддержка:
- во-первых, asterisk с внешним ip требует знаний безопасности (очень их любят ломать),
- во-вторых, поддержка webrtc в браузерах не статична, нюансы меняются в новых версиях.
Пример проблем с WebRTC
Осенью 2018 года после обновления Firefox и Safari в них сломалась работа большинства Webrtc телефонов. В Firefox была проблема во время начала звонка, в Safari просто пропал звук. После нескольких дней работы разработчиков и тестировщиков проблемы устранили (еще до того как обновилось большинство клиентов). В Firefox поставили временный фикс до следующих обновлений, для Safari слегка упростили алгоритм работы веб-телефона. Вы уверены, что готовы самостоятельно отслеживать и устранять все подобные проблемы?
Внешний виджет
Если у вас нет времени и желания бороться с проблемами WebRTC, можно установить облачный виджет. Облачный виджет уже создан и поддерживается оператором, нужно только потратить несколько минут на установку.
Обычно главным минусом облачного решения является цена — нужно регулярно платить за использование виджета, а чем он тогда лучше например номера 800? Проект Zadarma предлагает другое решение — бесплатный виджет для звонков с сайта по WebRTC. Все что требуется с финансовой стороны — это хоть иногда пополнять счет (раз в 3 месяца), использовать средства можно на любые услуги телефонии, сам виджет бесплатен.
Возможности бесплатного облачного виджета
- Настраиваемый дизайн (форма, цвет, шрифт, кнопки)
- Расширенная статистика работы виджета
- Интеграция с бесплатной облачной АТС и всеми крупными CRM системами
Установка бесплатного виджета
Создать виджет крайне просто:
- Создаем учетную запись и пополняем счет (на любую сумму)
- В ЛК сервиса переходим в раздел “Кнопка “Позвонить нам” и нажимаем “Создать Виджет”
- Настраиваем дизайн виджета, нажимаем “Сохранить” и получаем код виджета
В виджете настраивается многое, даже можно выбрать, что хранить у себя, а что в облаке (крупным сайтам и любителям AWS может захочется разместить его у себя).
Для хранения виджета в облаке (простой способ) нужно скопировать 2 блока кода к себе на сайт.
- Внизу страницы (раздела Body) копируем загрузочный код библиотеки виджета.
- Устанавливаем сам код виджета в ту часть страницы, где должна находиться кнопка «Позвоните нам».
Как видите, дизайн виджета можно изменить в любой момент.
Если вы решили хранить виджет у себя, его нужно скачать и сохранить. Тогда выбираем вкладку “Автономная установка”, качаем последнюю версию и также вставляем 2 куска кода (только в первом нужно указывать пути с учетом той папки куда скачали).
Установка завершена! Кнопка для звонков с сайта готова и работает. Можете кликать, звонить, смотреть статистику.
Комментарии (28)
Marger1
20.02.2019 16:04Как-то не верится в бесплатность, а что с этого виджета имеете вы?
pavlikarev Автор
20.02.2019 16:20+1Виджет WebRTC (как и callback или коллтрекинг) — дополнительный продукт в витрине, который привлекает новых клиентов. Вместо дорогой рекламы тратим часть бюджета на создание и поддержку бесплатных сервисов.
b_oberon
20.02.2019 21:35Если учесть, что в WebRTC основной трафик передается peer to peer, сигнализация много не требует, а клиента WebRTC компания и так поддерживает, то бесплатный виджет, требующий активного аккаунта и регулярного пополнения счета — это отличный способ привлечения клиентов! Так что я вполне поверю в аттракцион невиданной щедрости :)
IgorDimitrov
20.02.2019 23:03Вы не учли главный момент: офисная телефония и виртуальная АТС работают по SIP, а он не peer to peer, тем более когда нужно преобразовать WebRTC-SIP. Так что трафик необходимо проксировать (да и для функционала АТС это также нужно).
arheops
21.02.2019 02:24Вполне вериться. Задарма зарабатывает на платных сервисах типо звонков на международку, они у задарма сильно дороже среднего.
Соответственно есть виджет — больше звонят(звонят из ситуаций, когда нет смартфона). Больше звонят — больше процент платных звонков, больше зарабатывает сервис.
А cpu/bandwidth cost поддержки таких звонков не особо то значительный. На одном похожем сервисе, для которого у меня есть внутренние данные, минута звонка обходится компании приблизительно в 0.03 цента. Причем там хостинг очень дорогой, softlayer. В стоимость входят сервера, суппорт, траффик. Тоесть если предположить, что средняя наценка в 1цент(у задарма, похоже, сильно больше), надо гдето 1 платную минуту на 30 бесплатных получить. Ну либо, что более реально, взять сервера из дешевого сегмента, разница получится до 10 раз. Уже будет 1 платная на 300 бесплатных.
К тому же уже сейчас собственный webrtc виджет практически не требует постоянного суппорта. Если взять, например, код из kazoo/2600 или другого проекта.
Еще года два-три и это не будет проблемой.IgorDimitrov
21.02.2019 12:05А можно пожалуйста пример этих «средних» которые сильно дешевле задарма?
Только с учетом того, чтобы:
1. это были премиум маршруты с передачей CallerID (реальной передачей а не иногда, и в случае если где-то не передалось чтобы также поддержка устраняла),
2. были цены действительно «сильно дешевле» и не в одну страну в африке а везде или много где, в том числе в Европу, где у Zadarma есть также специальные тарифы,
3. это был сервис для клиентов, то есть пополнение не на миллион и договор не год складывать и лицензии клиенту не требуются,
3. так как для бизнеса звонки без номеров обычно не имеют смысла, чтобы и на номера были адекватные цены и покрытие (для тех-же международных звонков),
4. для большинства бизнеса нужна и АТС и интеграция, их также желательно получить и цену с их учетом считать, но это уже не обязательно.
Да, в одну какую-то страну можно иногда найти и дешевле (так как Zadarma не ставит перед собой задачу быть самыми дешевыми везде и всегда), но будет либо дороже в другие либо плохое качество либо никаких других функций.
И тут даже дело не в том что Zadarma такие супер крутые, цены на звонки премиум качества (с передачей callerid и без gsm терминации) диктуют не SIP провайдеры а мобильные операторы, именно мобильные операторы определяют цену звонков в свою сеть.arheops
21.02.2019 13:41siptraffic.com? anveo? вообще воз и малая тележка их. Задарма не самый дешевый.
АТС да, но она сейчас на впс за $2 работает, номера дороже.IgorDimitrov
21.02.2019 14:03Вы точно читали мое сообщение целиком?
Вся эта «малая тележка» это клоны одного и того-же лоукост оператора (он-же Вася он-же Петя, в прошлом бетамакс по моему). Работают по принципу у одного клона одно дешево у другого другое, (остальное дорого, например Germany cellular o2 $0.139 у Zadarma $0.03, Spain mobile аналогично anveo 22 цента а Zadarma 2 цента), если с CallerID то все очень дорого, посекундной тарификации нет, при этом минимальное пополнение обычно 10 евро. То есть чтобы звонить по адекватной цене в несколько стран нужно несколько аккаунтов, цены меняются и часть аккаунтов на клонах может потом просто не понадобится. Номера если с бесплатными входящими то стоят тоже в несколько раз дороже чем у Zadarma.
Сравнивать любого полноценного оператора и этих чудо клонов… немного не корректно.
Ну и в дополнение поднимать АТС на vps своими руками, веселая будет поделка.
Кому не жалко своего времени и правда может развлекаться с этим всем, может получится сэкономить (хотя не похоже). Но если связь для бизнеса то время стоит денег, для бизнеса порекомендую подключать любого настоящего оператора а не клона и не тратить время/деньги на asterisk на vps.
alekssamos
21.02.2019 11:09Я установил. На айфоне iOS 11 и 12 работает, на компьютерах работает,
а на андроид телефонах и планшетах нет. Версии браузера последние. почему?IgorDimitrov
21.02.2019 11:54Попробовал со своего телефона (android 9, crhome) кнопку на сайте Zadarma, работает в обе стороны. А напишите пожалуйста заявку в поддержку (именно не в чат а сразу заявку, чтобы разработчикам передали все детали) и укажите ссылку и детали про ваши устройства.
alekssamos
21.02.2019 12:04Я пробовал. И друзьям отправлял. Нет.
Samsung, BQ, xiaomi… и Яндекс браузер, и встроенный.
В поддержку писал.IgorDimitrov
21.02.2019 12:06Номер заявки в поддержку сообщите пожалуйста.
Яндекс браузер, тем более на мобильном, никогда не пробовал. Про него ничего не могу сказать (хотя он на том-же движке crhomium и должен работать, но может они что-то поменяли).
alekssamos
21.02.2019 12:07Например,
User-agent: Mozilla/5.0 (Linux; Android 6.0; BQ-5022 Build/MRA58K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 YaBrowser/15.10.2454.3908.00 Mobile Safari/537.36
А браузер какой у вас?alekssamos
21.02.2019 12:09Вот еще:
User-agent: Mozilla/5.0 (Linux; Android 8.0.0; AUM-L41) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 YaBrowser/18.11.1.979.00 Mobile Safari/537.36IgorDimitrov
21.02.2019 12:14Я не разработчик и не администратор. Даже если просто скопировать и передать разработчикам, что делать дальше? Их вопросы копировать и если попросят тесты или логи это тоже делать через комментарии?
Пожалуйста, напишите эту информацию в заявке в поддержку и сообщите номер заявки.
Если уже писали еще лучше, просто сообщите номер заявки.IgorDimitrov
21.02.2019 12:29Показал разработчикам и админам ваш комментарий, посмотрят и протестируют. Но без заявки не получится обратной связи, потому ждем.
IgorDimitrov
21.02.2019 12:50У меня crhome как я выше и писал.
Также протестировали разработчики на встроенных и яндекс браузере, везде работает. Возможно вы отклонили запрос на разрешение аудио.
Но гадать не могу, я не гадалка. Чтобы что-то проверить и ответить точно нужен номер заявки.
P.S.: Надо зажать на замке зеленом слева от урл — высветится окошко. Там будет сказано заблокирован микрофон или нет.
alekssamos
21.02.2019 15:18Тикет 420369].)
Снова 50 на 50, у одних работает, у других нет. Версия судя по агентам у всех одинаковая. А на замочек нажимаешь когда вообще ничего про микрофон там нет. Запрос не появляется. Просто на кнопке написано connectingIgorDimitrov
21.02.2019 19:48Спасибо за номер тикета, передал разработчикам. Они отправят скрин с замком наверное и еще раз согласуете версию ОС и браузера.
artsavel
21.02.2019 12:16Заявленную фишку с авторизацией через гос. услуги до сих пор не починили (уже год прошел)
pavlikarev Автор
21.02.2019 12:17В октябре 2018 года ЕСИА урезал функционал для телеком-операторов и мы убрали с сайта форму авторизации через ГосУслуги (для подключения российских номеров без загрузки документов). Все это время общаемся с представителями портала ГосУслуги, уточняем детали и как только будет результат, обязательно сообщим (в том числе и на Хабре, возможно это будет полезно и другим операторам)
acd
21.02.2019 12:16Какие STUN/TURN сервера используете? Насколько корректно обходятся интранетовские блокировки (UDP трафик например и прочее).
IgorDimitrov
21.02.2019 12:26В WebRTC встроена поддержка ICE, мы ее используем на прокси, очень помогает с NAT и подобным.
acd
21.02.2019 15:48Для обмена ICE кандидатами клиенты должны получить «дискавер» информацию от STUN сервера, ну и использовать релэй при необходимости. Собственно эти сервера вы указываете в iceServers секции конфига конструктора RTCPeerConnection (в JS). Вопрос был в том, подняты ли у вас свои сервера или используются публичные? Нет ли проблем в случаях, когда например внутри компаний жестко настроены политики безопасности с ограничениями по портам и протоколам.
И еще вопрос, что происходит у вас на клиенте при смене сети? (Wifi отвалился, переключение на 3g/LTE и т.п.)IgorDimitrov
21.02.2019 19:53Подняты конечно свои, в каждом датацентре. Использовать публичные недостаточно надежно (к надежности и безопасности подходим истерически, дублируем все что можно дублировать).
Жалоб на проблемы с доступом не слышал, насколько знаю WebRTC работает с этим намного лучше чем SIP.
Какой именно клиент имеется в виду, WebRTC или SIP? Если в процессе разговора отвалится сеть то думаю разговор прервется на любом клиенте. Для нового исходящего звонка разницы нет никакой конечно. Для нового входящего вопрос «не потерять входящий вызов» решается по разному, в зависимости от типа клиента.acd
22.02.2019 11:15Да, речь о WebRTC. Я имел ввиду процесс рестарта ICE, все ли работает корректно? Когда занимался данной проблемой пару лет назад, возникали некоторые сложности.
IgorDimitrov
В статье не рассказали про другие варианты интеграции (кроме собственно размещения кода на сайте).
А они есть: можно через API получать статистику, можно через вебхуки получать уведомления при каждом звонке (и роутить куда захочется). Есть мысли и по развитию интеграции (в сторону api или вебхуков или webrtc) но ждем обратную связь.
У кого какие есть потребности по интеграции?