Ванильный JavaScript клиент#

Бета-версия

Функциональность находится в режиме бета-версии. Функции могут быть изменены, а также могут работать нестабильно. В будущем за функционал может взиматься дополнительная плата.
Подключение к функционалу можно запросить через техподдержку GREEN-API

examples/basic-usage-vanilla-js — те же звонки без фреймворка. Это второстепенный пример: он нужен, чтобы посмотреть на API библиотеки отдельно, без слоёв приложения. Если вы делаете полноценный клиент, начинайте с React клиента — это эталонная реализация.

Пример направлен на понимание библиотеки и не является полноценным решением. Всё, чем обмениваются страница и сервер, видно в журнале Log прямо на странице, а часть подробностей — в консоли разработчика в браузере.

Чтобы воспользоваться примером, нужно получить ID инстанса и токен в личном кабинете; для тестирования подойдёт бесплатный тариф «Разработчик».

1. Скачивание примера#

Для установки примера необходимо скачать код из github репозитория.

Скачайте архив или воспользуйтесь командной строкой:

git clone https://github.com/green-api/whatsapp-api-calls-client-js.git

2. Запуск клиента#

В командной строке перейдите в папку примера и установите зависимости:

cd whatsapp-api-calls-client-js/examples/basic-usage-vanilla-js  
npm install  
npm run dev

npm install достаточно выполнять один раз при первой установке.

Vite напечатает адрес, на котором поднялся сервер разработки — откройте его в браузере.

Для остановки сервера нажмите Ctrl + C и затем нажмите кнопку Y.

3. Подключение к инстансу#

Так выглядит пример сразу после запуска: форма подключения и журнал Log.

Необходимые данные для авторизации находятся в вашем личном кабинете GREEN-API:

apiUrl
idInstance
apiTokenInstance

В качестве apiUrl укажите адрес API вашего инстанса — например, https://1234.api.green-api.com. Сам инстанс должен быть уже авторизован в личном кабинете по QR-коду: пример занимается только звонками.

Заполните поля и нажмите Connect. После подключения появляется секция State с текущим состоянием звонка и кнопкой Disconnect, а также форма исходящего вызова. Состояние idle означает, что звонка сейчас нет.

Дополнительная информация

В журнале Log видно, что уходит на сервер и что приходит обратно: запросы к методам, сообщения соединения и состояния звонка. Кнопка Clear log очищает журнал.

4. Приём входящих звонков#

После подключения вы можете начать принимать входящие звонки.

О входящем звонке сообщает состояние inc-call, а в секции Incoming call появляется идентификатор звонящего и кнопки Accept и Reject.

Браузер может спросить разрешение на использование вашего микрофона, для передачи голоса. Необходимо разрешить это действие.

Для окончания звонка нажмите кнопку Hang up в секции Current call. Для вас соединение будет завершено, а клиент услышит в трубку тишину.

При отклонении звонка вызов по-прежнему будет поступать на телефон, что не является ошибкой, а особенностью. Из-за нестабильности технологии voip вы можете не увидеть уведомление о входящем звонке в окне браузера.

5. Выполнение исходящих звонков#

После подключения вы можете начать совершать исходящие звонки.

Введите номер абонента или идентификатор чата в поле Number / chatId и нажмите Dial. Пока идёт дозвон, состояние в секции State — out-call.

Если по какой-то причине звонок не произошёл, посмотрите журнал Log: там видно, чем ответил сервер.

На некоторых телефонах необходимо, чтобы WhatsApp был запущен фоновым процессом для приёма входящих звонков.

Для окончания звонка нажмите кнопку Hang up в секции Current call. Для вас соединение будет завершено, а клиент услышит в трубку тишину.