Как выполнить инициализацию и авторизацию в клиенте#

Бета-версия

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

Библиотека состоит из двух частей:

GreenApiVoipClient — обёртка над REST-методами: набрать номер, принять, отклонить, завершить звонок;
CallsConnection — его возвращает метод connectCalls(). Это WebSocket-соединение: оно сообщает состояние звонка, объявляет входящие вызовы и несёт звук по WebRTC.

Учётные данные передаются в конструктор клиента, отдельного шага входа у библиотеки нет. Сам инстанс должен быть уже авторизован в личном кабинете по QR-коду — библиотека занимается только звонками.

Создание клиента и соединения#

Добавим точку входа для нашей интеграции в JavaScript файл main.js (или main.ts -- если вы используете TypeScript).

import { GreenApiVoipClient } from '@green-api/whatsapp-api-calls-client-js';

const client = new GreenApiVoipClient({
  idInstance: 'your-id-instance',
  apiTokenInstance: 'your-api-token-instance',
  apiUrl: 'your-api-url', // адрес API вашего инстанса, например https://1234.api.green-api.com
});

// Открываем соединение для звонков. Оно переподключается само, а текущее состояние
// звонка приходит сразу после подключения и на каждое изменение.
const calls = client.connectCalls();

calls.addEventListener('connect', () => console.log('Соединение для звонков установлено.'));
calls.addEventListener('disconnect', (event) => console.log('Соединение потеряно:', event.detail.reason));
calls.addEventListener('error', (event) => console.error('Ошибка звонков:', event.detail.message));

Обратите внимание: события подписываются на соединение calls, а не на самом клиенте.

Параметры инстанса#

Для работы нужно передать три значения:

idInstance
apiTokenInstance
apiUrl

Возьмите их в вашем личном кабинете GREEN-API, выбрав нужный авторизованный инстанс.

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

Пример с веб-формой#

В примере на ванильном JavaScript те же данные вводятся в форму на странице, а клиент создаётся по нажатию кнопки.

    <section>
      <p>Initialization</p>
      <input id="apiUrl" placeholder="apiUrl">
      <input id="idInstance" placeholder="instance id">
      <input id="apiTokenInstance" placeholder="instance api token">
      <button id="connectButton">connect</button>
      <button id="disconnectButton" disabled>disconnect</button>
    </section>

    <section style="margin-top: 16px;">
      <p>Outgoing call</p>
      <input id="phoneNumber" placeholder="phone number" disabled>
      <button id="startCallButton" disabled>start call</button>
    </section>

    <section>
      <p>Current call</p>
      <button id="endCallButton" disabled>end call</button>
    </section>

const connectButton = document.getElementById('connectButton');
const disconnectButton = document.getElementById('disconnectButton');
const startCallButton = document.getElementById('startCallButton');
const endCallButton = document.getElementById('endCallButton');
const phoneNumberInput = document.getElementById('phoneNumber');

let client = null;
let calls = null;

connectButton.addEventListener('click', () => {
  client = new GreenApiVoipClient({
    idInstance: document.getElementById('idInstance').value,
    apiTokenInstance: document.getElementById('apiTokenInstance').value,
    apiUrl: document.getElementById('apiUrl').value,
  });

  calls = client.connectCalls();

  calls.addEventListener('connect', () => console.log('Соединение для звонков установлено.'));
  calls.addEventListener('disconnect', (event) => console.log('Соединение потеряно:', event.detail.reason));
  calls.addEventListener('error', (event) => console.error('Ошибка звонков:', event.detail.message));

  phoneNumberInput.disabled = false;
  startCallButton.disabled = false;
  disconnectButton.disabled = false;
  connectButton.disabled = true;
  endCallButton.disabled = false;
});

В таком состоянии клиент готов совершать и принимать звонки.

Закрытие соединения#

Когда звонки больше не нужны, вызовите calls.close(): метод остановит передачу звука и закроет WebSocket.

disconnectButton.addEventListener('click', () => {
  calls.close();
  calls = null;
  client = null;

  phoneNumberInput.disabled = true;
  startCallButton.disabled = true;
  disconnectButton.disabled = true;
  connectButton.disabled = false;
  endCallButton.disabled = true;
});

После этого объекты и переменные вернутся в изначальное состояние, а страница перестанет получать события о звонках.