Skip to content

Latest commit

 

History

History
183 lines (124 loc) · 9.02 KB

README_ru.md

File metadata and controls

183 lines (124 loc) · 9.02 KB
Raw

whatsapp-api-calls-client Library for JavaScript

Поддержка

Support Support Support

Руководства и новости

Guides News News

Библиотека JavaScript WhatsАpp API Calls Client позволяет легко создавать JavaScript/TypeScript приложения для приема входящих звонков и создания исходящих звонков через WhatsApp через API сервиса green-api.com. Чтобы воспользоваться библиотекой, нужно получить ID_INSTANCE и API_TOKEN_INSTANCE в личном кабинете. Есть бесплатный тариф инстанса разработчика.

API

API библиотеки основана на WebSockets и WebRTC(Web Real-Time Communication — коммуникация в режиме реального времени) протоколе.

Плюсы использования WebRTC:

  • Доступность в браузерах
  • Низкая задержка
  • Контроль перегрузки
  • Обязательное шифрование

Установка и импорт библиотеки

Библиотека поддерживает только окружение браузера и может быть установлена как с помощью пакетного менеджера, так и без него.

Установка для Webpack и npm приложений:

npm i @green-api/whatsapp-api-calls-client-js

Импорт библиотеки в проект:

Для ES6 JavaScript или TypeScript

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

Импорт и установка Vanilla JS приложений, добавьте строку в ваш index.html

<script src="https://unpkg.com/@green-api/whatsapp-api-client/lib/whatsapp-api-client.min.js"></script>

Аутентификация

Для использования библиотеки вам понадобится учетная запись GREEN-API на сайте green-api.com. Пройдите аутентификацю с помощью мобильного приложения WhatsApp. Чтобы зарегистрировать учетную запись, вам необходимо перейти на панель управления. После регистрации вы получите уникальную пару ключей ID_INSTANCE и API_TOKEN_INSTANCE. Аутентификация мобильного приложения WhatsApp может быть выполнена в панели управления. Вам необходимо будет отсканировать QR-код.

Примеры

Класс GreenApiVoipClient это EventEmitter класс, который генерирует события, с помощью которыми можно управлять жизненным циклом вызова.

Как инициализировать объект

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

// Инициализация объекта VoipClient  
const greenApiVoipClient = new GreenApiVoipClient();

// Примеры параметров инициализации, замените их фактическими данными вашего инстанса
const initOptions = {
  idInstance: 'your-id-instance',
  apiTokenInstance: 'your-api-token-instance',
};

// Инициализация клиента  
greenApiVoipClient.init(initOptions).then(() => {
  console.log('GreenApiVoipClient initialized and connected.');
}).catch(error => {
  console.error('Failed to initialize GreenApiVoipClient:', error);
});

Обработка входящих звонков

const callBtns = document.getElementById('initBtns');
const audioElement = document.createElement('audio'); // Аудио элемент для передачи звукового потока

// Запустите Event и получайте информацию о звонке из WhatsApp
greenApiVoipClient.addEventListener('incoming-call', (event) => {
  console.log(event.detail.info);

  // Отобразить кнопки принятия и отклонения вызова
  const acceptCallBtn = document.createElement('button');
  const rejectCallBtn = document.createElement('button');
  
  acceptCallBtn.addEventListener('click', async () => {
    await greenApiVoipClient.acceptCall();
  });
  
  rejectCallBtn.addEventListener('click', async () => {
    await greenApiVoipClient.rejectCall();
  });

  callBtns.append(acceptCallBtn, rejectCallBtn);
});

greenApiVoipClient.addEventListener('remote-stream-ready', (event) => {
  // Назначьте удаленному медиапотоку значение из события, чтобы вы могли слышать голос другого участника вызова
  audioElement.srcObject = event.detail;
});

Обработка исходящих звонков

const callBtn = document.getElementById('call');
const audioElement = document.getElementById('remote'); // Аудио элемент для передачи звукового потока

callBtn.addEventListener('click', async () => {
  try {
    await greenApiVoipClient.startCall('Номер телефона получателя');
  } catch (err) {
    console.error(err);
  }
});

greenApiVoipClient.addEventListener('remote-stream-ready', (event) => {
  // Назначьте удаленному медиапотоку значение из события, чтобы вы могли слышать голос другого участника вызова
  audioElement.srcObject = event.detail;
});

Демо примеры на Vanilla JS и React:

Вы можете ознакомиться с нашими демонстрационными примерами по ссылкам ниже:

Скачайте необходимый пример из репозитория по ссылке. После выполните в папке проекта следующие шаги:

npm install  
npm run dev

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

После этого вам станет доступен веб-интерфейс клиента по указанному адресу, например:

 npm run dev

> [email protected] dev
> vite

  VITE v5.2.11  ready in 969 ms

  ➜  Local:   http://localhost:80/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Откройте ссылку в предпочитаемом браузере. Для работы используйте idInstance И apiTokenInstance из личного кабинета. После авторизации вы можете принимать входящие звонки и совершать исходящие.

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

Документация

Для более детальной информации ознакомьтесь с нашим "Пошаговым руководством".

Сторонние библиотеки

Лицензия

Лицензировано на условиях Creative Commons Attribution-NoDerivatives 4.0 International (CC BY-ND 4.0).