Latihan - Menambahkan kode Panggilan Suara

  • 3 menit

Di pelajaran ini, kita akan menambahkan lebih banyak kode ke aplikasi web yang dibuat di pelajaran sebelumnya. Aplikasi ini akan memungkinkan kita melakukan panggilan suara dengan Azure Communication Services.

Menambahkan elemen HTML input

Untuk melakukan panggilan, kita memerlukan dua informasi penting:

  1. Token akses pengguna Azure Communication Services untuk pengguna yang melakukan panggilan. Token ini mengidentifikasi dan mengotorisasi pengguna untuk menghubungi layanan dan memulai panggilan suara.
  2. Siapa yang ingin dihubungi pengguna, ID pengguna Azure Communication Services.

Untuk mendapatkan informasi ini dari pengguna, kita akan menggunakan beberapa input formulir HTML standar. Jadi, mari kita tambahkan input formulir HTML standar ke file index.html kita:

  1. Membuka index.html di editor teks

  2. Tambahkan HTML berikut ke dalam isi file HTML, di bawah komentar Calling HTML here:

    <input 
    id="token-input"
    type="text"
    placeholder="Your User access token"
/>
<button id="token-submit" type="button">
    Submit
</button>
<br /><br />
<input 
    id="callee-id-input"
    type="text"
    placeholder="Who would you like to call?"
    style="margin-bottom:1em; width: 200px; display: block;"
/>

Elemen input pertama adalah untuk token pengguna yang melakukan panggilan. Tombol kirim akan digunakan untuk membuat beberapa objek Azure Communication Services setelah token diberikan. Input kedua adalah untuk memasukkan ID pengguna dari orang yang ingin kita panggil.

Menambahkan tombol tindakan panggilan dasar

Kita juga memerlukan beberapa tombol untuk beberapa tindakan panggilan dasar yang memungkinkan pengguna mengontrol panggilan:

  1. Mulai Panggilan
  2. Tutup Panggilan

Jadi, mari kita tambahkan juga tombol-tombol ini di bawah input dari langkah sebelumnya:

<button id="call-button" type="button" disabled="true">
    Start Call
</button>
&nbsp;
<button id="hang-up-button" type="button" disabled="true">
    Hang Up
</button>

Menguji HTML

Dengan memasukkan HTML, kita telah menyelesaikan sebagian besar HTML untuk aplikasi ini. Jika Anda menjalankan aplikasi dengan perintah yang sama dengan unit sebelumnya: npx parcel index.html lalu membuka aplikasi, Anda akan melihat aplikasi berikut di browser Anda: Screenshot of our blank web app showing in a browser.

Aplikasi ini mungkin terlihat sederhana, tetapi hanya elemen visual tersebut yang kita butuhkan untuk membuat aplikasi panggilan suara. Sekarang kita sudah selesai dengan HTML aplikasi kita. Sisa kode lainnya akan menggunakan JavaScript.

Mengimpor beberapa dependensi

Langkah pertama kita dalam file app.js adalah mengimpor dependensi untuk melakukan panggilan Azure Communication Services. Dependensi ini berasal dari SDK yang kita instal sebelumnya dengan NPM. Untuk mengimpor dependensi, tambahkan baris berikut ke file app.js:

import { CallClient } from "@azure/communication-calling";
import { AzureCommunicationTokenCredential } from '@azure/communication-common';

Impor pertama adalah CallClient, yang nantinya akan digunakan untuk benar-benar melakukan panggilan kita. Impor pertama menangani mikrofon, audio, dll. Semuanya untuk Anda. Impor kedua, AzureCommunicationTokenCredential digunakan untuk menangani persyaratan autentikasi untuk Azure Communication Services. Autentikasi memastikan kita mengetahui pengguna saat mereka melakukan panggilan.

Mendapatkan referensi ke HTML kita

Sebelumnya, kita membuat elemen HTML yang akan digunakan pengguna untuk mengontrol aplikasi. Untuk mendengarkan pengguna berinteraksi dengan elemen HTML, kita perlu mendapatkan referensi tentang elemen HTML di JavaScript kita.

Selain itu, kita membutuhkan beberapa variabel untuk menyimpan beberapa item, yang digunakan di seluruh kode kita. Tambahkan kode berikut ke app.js di bawah impor.

const userToken = document.getElementById("token-input"); 
const submitToken = document.getElementById("token-submit");

const calleeInput = document.getElementById("callee-id-input");

const callButton = document.getElementById("call-button");
const hangUpButton = document.getElementById("hang-up-button");

let call;
let callAgent;
let tokenCredential;

Menangani autentikasi

Sekarang kita telah selesai dengan beberapa pengaturan dasar, kita dapat mulai membuat beberapa fungsionalitas. Hal pertama yang kita butuhkan secara fungsional adalah menangani autentikasi. Autentikasi akan ditangani oleh pengguna yang memasukkan token pengguna ke elemen input token yang kita buat dan kemudian mengklik "Kirim Token" kita. Untuk menangani proses ini dalam kode, kita perlu mendaftarkan penangan klik ke tombol kirim token tersebut, yang akan memproses token pengguna. Anda dapat menambahkan kode ini tepat di bawah variabel kita sebelumnya.

submitToken.addEventListener("click", async () => {
  const callClient = new CallClient();
  const userTokenCredential = userToken.value;
    try {
      tokenCredential = new AzureCommunicationTokenCredential(userTokenCredential);
      callAgent = await callClient.createCallAgent(tokenCredential);
      callAgent.on('incomingCall', incomingCallHandler);

      callButton.disabled = false;
      submitToken.disabled = true;
    } catch(error) {
      window.alert("Please submit a valid token!");
    }
})

kode ini:

  1. Buat Klien Panggilan Azure Communication Services.
  2. Ambil token pengguna dari elemen input token, dan buat AzureCommunicationTokenCredential dengan token pengguna. Informasi masuk ini digunakan untuk membuat dan menangani semua panggilan.
  3. Buat CallAgent, yang kita gunakan untuk melakukan dan menerima panggilan.
  4. Daftarkan penangan panggilan masuk, yang akan segera kita tulis.
  5. Perbarui beberapa tombol kita sehingga pengguna dapat melanjutkan.

Membuat panggilan

Dengan tidak adanya autentikasi, kita dapat memulai beberapa fungsionalitas yang sesungguhnya, mari kita mulai dengan mengizinkan pengguna melakukan panggilan:

callButton.addEventListener("click", () => {
  // start a call
  const userToCall = calleeInput.value;
  call = callAgent.startCall(
      [{ id: userToCall }],
      {}
  );

  // toggle button states
  hangUpButton.disabled = false;
  callButton.disabled = true;
});

Kode ini, mendaftarkan penangan klik pada tombol "Mulai Panggilan". Kode ini mengambil ID pemanggil dari elemen input yang cocok dan kemudian menggunakan Agen Panggilan untuk melakukan panggilan.

Menutup panggilan

Setelah panggilan terbuka, kita perlu mengizinkan pengguna untuk menutup panggilan.

hangUpButton.addEventListener("click", () => {
  // end the current call
  call.hangUp({ forEveryone: true });

  // toggle button states
  hangUpButton.disabled = true;
  callButton.disabled = false;
});

Kode ini, mendaftarkan penangan klik pada tombol "Tutup" dan kemudian hanya menginstruksikan panggilan untuk menutup panggilan.

Menerima panggilan

Sekarang kita dapat melakukan panggilan, kita juga perlu menangani penerimaan panggilan. Untuk menangani penerimaan panggilan, kita akan membuat penangan panggilan masuk, yang telah kita sebutkan sebelumnya.

const incomingCallHandler = async (args) => {
  const incomingCall = args.incomingCall;

  // Accept the call
  await incomingCall.accept();

  // Subscribe to callEnded event and get the call end reason
  incomingCall.on('callEnded', args => {
      console.log(args.callEndReason);
  });
};

Pengujian

Selesai, Jika Anda menjalankan aplikasi dengan perintah yang sama seperti pelajaran sebelumnya: npx parcel index.html lalu buka aplikasi di browser Anda. Anda akan memiliki aplikasi panggilan dasar yang berfungsi!

Mendapatkan info masuk pengujian

Untuk menguji apakah benar-benar melakukan panggilan, Anda memerlukan beberapa info masuk. Anda dapat memperoleh info masuk dari portal Azure. Buka sumber daya Azure Communication Services Anda dalam portal Azure dan klik tombol "Identitas & Token Akses Pengguna" di dalam menu sebelah kiri:

Screenshot of the Azure portal, showing the Identities & User Access Tokens menu option highlighted.

Pada halaman yang muncul, Anda dapat membuat informasi masuk pengujian. Untuk aplikasi ini, kita hanya memerlukan izin "Panggilan suara dan video (VOIP)", jadi centang opsi tersebut dan tekan buat:

Screenshot of the token generation window with VOIP option checked.

Anda akan mendapatkan satu identitas Azure Communication Services, yang cocok untuk pengujian. Pastikan untuk menyalin token dan ID ke tempat yang aman untuk pengujian, seperti dokumen notepad kosong.

Screenshot of the token generation window with test credentials showing.

Jika Anda ingin mencoba memanggil pengguna lain, buat kumpulan informasi masuk tambahan.

Yang pertama akan digunakan untuk pengguna panggilan, dan yang kedua untuk pengguna yang menerima panggilan.

Dalam aplikasi dunia nyata, Anda harus menggunakan sistem identitas dan pustaka klien kita untuk membuat dan menyimpan informasi masuk ini. Dengan cara ini, pengguna dunia nyata tidak perlu menyalin dan memasukkan item ini secara manual. Untuk info selengkapnya tentang konsep ini, periksa tautan di akhir modul ini.

Memanggil Echo Bot

Azure Communication Services memiliki Echo Bot, yang dapat Anda hubungi untuk menguji mikrofon Anda. Echo Bot kompatibel dengan aplikasi ini. Untuk memanggil Echo Bot:

  1. Buka aplikasi di browser Anda
  2. Tempel token yang disimpan ke elemen input token pengguna.
  3. Tekan tombol "Kirim"
  4. Masukkan ID pengguna Echo Bot 8:echo123
  5. Tekan "Mulai Panggilan"

Browser Anda mungkin meminta Anda dengan beberapa dialog izin mikrofon, jadi pastikan Anda menerimanya. Jika semuanya berjalan dengan benar, Anda akan berada dalam panggilan dengan Echo Bot. Hal ini akan memungkinkan Anda merekam pesan singkat, yang kemudian akan diputar ulang untuk Anda.

Memanggil pengguna lain

Anda juga dapat memanggil pengguna lain dengan aplikasi ini, Anda memerlukan kumpulan informasi masuk kedua, yang Anda buat sebelumnya:

  1. Buka dua salinan aplikasi, beberapa tab atau jendela harus digunakan untuk menyimulasikan panggilan ke pengguna lain.
  2. Pada salinan pertama, masukkan token pengguna pertama yang disimpan dari generator informasi masuk dan tekan "Kirim"
  3. Pada salinan kedua, masukkan token pengguna kedua yang disimpan dari generator informasi masuk dan tekan "Kirim"
  4. Dari salinan pertama, masukkan ID pengguna kedua, ke elemen input "Siapa yang ingin Anda panggil?".
  5. Sekali lagi dari salinan pertama, klik "Mulai Panggilan".

Jika kedua tab/jendela berada di perangkat yang sama, panggilan mungkin memiliki gema, tetapi hal ini menunjukkan proses dan panggilan berfungsi di antara dua tab browser. Jika Anda menyebarkan aplikasi ke server web yang dapat diakses oleh beberapa mesin, Anda akan dapat melakukan panggilan suara yang sebenarnya tanpa gema.