כיצד לטפל בשיחה נכנסת#

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

calls.addEventListener('incoming-call', async (event) => {
  const { id, wid, name } = event.detail;
  console.log('Incoming call from:', name || wid, 'Call ID:', id);

  // Show your own incoming call window here;
  // in this example, the call is accepted immediately.
  try {
    await client.accept();
    await calls.startAudioBridge();
    console.log('Call accepted.');
  } catch (error) {
    console.error('Error accepting the call:', 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();
});

    <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>

.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;
}