Как обработать входящий вызов#

Бета-версия

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

О входящем вызове соединение сообщает событием incoming-call. Оно возникает один раз и содержит в event.detail идентификатор звонка id, идентификатор собеседника в WhatsApp wid и его имя name, если WhatsApp передал имя.

Принять вызов — это метод accept клиента, и передача звука поднимается после него, именно в таком порядке (почему — см. Передача звука).

const audioElement = document.createElement('audio');

calls.addEventListener('incoming-call', async (event) => {
  const { id, wid, name } = event.detail;
  console.log('Входящий звонок от:', name || wid, 'Идентификатор звонка:', id);

  // Здесь стоит показать своё окно входящего вызова;
  // в этом примере вызов принимается сразу.
  try {
    await client.accept();
    await calls.startAudioBridge();
    console.log('Вызов принят.');
  } catch (error) {
    console.error('Ошибка принятия звонка:', error);
  }
});

calls.addEventListener('remote-stream-ready', (event) => {
  audioElement.srcObject = event.detail;
  audioElement.play();
});

Окно входящего вызова#

В примерах для входящих вызовов сделано всплывающее окно с двумя кнопками — принять и отклонить.

const incomingCallPortal = document.getElementById('incoming-call-portal');
const incomingCallPhone = document.getElementById('incoming-call-phone');
const acceptCallButton = document.getElementById('acceptCallButton');
const rejectCallButton = document.getElementById('rejectCallButton');

calls.addEventListener('incoming-call', (event) => {
  const { wid, name } = event.detail;

  incomingCallPhone.textContent = name || wid;
  incomingCallPortal.style.display = 'flex';
});

acceptCallButton.addEventListener('click', async () => {
  incomingCallPortal.style.display = 'none';

  await client.accept();
  await calls.startAudioBridge();
});

rejectCallButton.addEventListener('click', async () => {
  incomingCallPortal.style.display = 'none';

  await client.reject();
});

Окно нужно убирать и тогда, когда вызов закончился сам — по событию end-call: звонящий может положить трубку, а вызов может быть принят на другом устройстве того же аккаунта. Обработка этого события описана в разделе Обработка состояний вызовов.

Разметка и стили окна:

    <div id="incoming-call-portal">
      <section class="incoming-call-modal">
        <section>
          Incoming call: <span id="incoming-call-phone">79836200181</span>
        </section>
        <section>
          <button class="incoming-call-reject" id="rejectCallButton">reject</button>
          <button class="incoming-call-accept" id="acceptCallButton">accept</button>
        </section>
      </section>
    </div>

И CSS

.incoming-call-modal {
    width: 300px;
    height: 100px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;

    background: white;
    box-shadow: 0 0 10px #000000;
}

.incoming-call-reject {
    border: none;
    background: none;

    width: 100px;
    height: 30px;

    border-radius: 10px;

    color: #e8e8e8;
    background: #c53c3c;
}

.incoming-call-reject:hover {
    cursor: pointer;
    color: white;
    background: #e34242;
}

.incoming-call-accept {
    border: none;
    background: none;

    width: 100px;
    height: 30px;

    border-radius: 10px;

    color: #e8e8e8;
    background: #11911d;
}

.incoming-call-accept:hover {
    cursor: pointer;
    color: white;
    background: #11a41e;
}

Метод reject отклоняет входящий вызов, а уже принятый разговор завершается методом hangUp — см. Как окончить или сбросить вызов.