ApsaraVideo Live：Memulai dengan Alibaba Cloud ARTC Web SDK

Langkah 1: Buat aplikasi

1. Masuk ke ApsaraVideo Live console.

2. Pada panel navigasi di sebelah kiri, klik Live + > ApsaraVideo Real-time Communication > Applications.

3. Klik Create Application.

4. Masukkan Instance Name kustom, centang kotak Terms of Service, lalu klik Purchase Now.

5. Setelah muncul pesan sukses, refresh halaman Application Management untuk melihat aplikasi ApsaraVideo Real-time Communication baru Anda.

   Catatan

   Pembuatan aplikasi gratis. Anda dikenai biaya berdasarkan pay-as-you-go sesuai penggunaan aktual. Untuk informasi selengkapnya, lihat harga ApsaraVideo Real-time Communication.

Langkah 2: Dapatkan App ID dan AppKey

Setelah membuat aplikasi, temukan aplikasi tersebut dalam daftar aplikasi. Pada kolom Actions, klik Manage untuk membuka halaman Basic Information. Di halaman ini, Anda dapat menemukan Application ID dan AppKey.

Langkah 3: Integrasikan SDK

1. Integrasikan SDK.

   Integrasikan menggunakan tag script

   Pada halaman HTML Anda, impor skrip SDK.

   <script src="https://g.alicdn.com/apsara-media-box/imp-web-rtc/7.1.9/aliyun-rtc-sdk.js"></script>

   Integrasikan menggunakan npm

   Pada proyek Anda, instal SDK menggunakan npm.

   npm install aliyun-rtc-sdk --save

2. Inisialisasi engine.

   // Pilih salah satu dari dua metode impor berikut.
   // Gunakan pernyataan impor ini jika Anda menggunakan paket npm.
   import AliRtcEngine from 'aliyun-rtc-sdk';
   // Gunakan pernyataan impor ini jika Anda menggunakan tag script.
   const AliRtcEngine = window.AliRtcEngine;
   
   // Periksa lingkungan.
   const checkResult = await AliRtcEngine.isSupported();
   if (!checkResult.support) {
     // Lingkungan saat ini tidak didukung. Minta pengguna untuk beralih atau memperbarui browser mereka.
   }
   
   // Buat instans engine. Anda dapat menyimpannya sebagai variabel global.
   const aliRtcEngine = AliRtcEngine.getInstance();
   

3. Setelah membuat instans AliRtcEngine, dengarkan dan tangani event terkait.

   // Pengguna saat ini meninggalkan channel.
   aliRtcEngine.on('bye', (code) => {
     // Parameter code menunjukkan alasan. Untuk informasi selengkapnya, lihat referensi API.
     console.log(`bye, code=${code}`);
     // Tambahkan logika bisnis Anda di sini, misalnya keluar dari halaman panggilan.
   });
   
   // Dengarkan pengguna jarak jauh yang online.
   aliRtcEngine.on('remoteUserOnLineNotify', (userId, elapsed) => {
     console.log(`Pengguna ${userId} bergabung ke channel dalam ${elapsed} detik`);
     // Tambahkan logika bisnis Anda di sini, misalnya menampilkan modul untuk pengguna ini.
   });
   
   // Dengarkan pengguna jarak jauh yang offline.
   aliRtcEngine.on('remoteUserOffLineNotify', (userId, reason) => {
     // Parameter reason menunjukkan alasan. Untuk informasi selengkapnya, lihat referensi API.
     console.log(`Pengguna ${userId} meninggalkan channel. Kode alasan: ${reason}`);
     // Tambahkan logika bisnis Anda di sini, misalnya menghapus modul untuk pengguna ini.
   });
   
   // Dengarkan perubahan langganan aliran jarak jauh.
   aliRtcEngine.on('videoSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
     // Parameter oldState dan newState bertipe AliRtcSubscribeState. Nilai valid: 0 (Init), 1 (Unsubscribed), 2 (Subscribing), dan 3 (Subscribed).
     // Parameter interval menunjukkan selang waktu antara dua status dalam milidetik.
     console.log(`Status langganan pengguna jarak jauh ${userId} di channel ${channelId} berubah dari ${oldState} menjadi ${newState}`);
     // Tambahkan logika untuk menonton aliran jarak jauh di sini.
     // Saat newState menjadi 3, Anda dapat memanggil setRemoteViewConfig untuk memutar aliran jarak jauh.
     // Saat newState menjadi 1, Anda dapat menghentikan pemutaran.
   });
   
   // Dengarkan kedaluwarsa informasi autentikasi.
   aliRtcEngine.on('authInfoExpired', () => {
     // Callback ini dipicu saat informasi autentikasi kedaluwarsa.
     // Anda perlu mendapatkan token baru dan data lainnya, lalu panggil operasi refreshAuthInfo untuk memperbarui data autentikasi.
     aliRtcEngine.refreshAuthInfo({
       userId,
       token,
       timestamp
     });
   });
   
   // Dengarkan saat informasi autentikasi pengguna akan kedaluwarsa.
   aliRtcEngine.on('authInfoWillExpire', () => {
     // Callback ini dipicu 30 detik sebelum informasi autentikasi kedaluwarsa. Segera perbarui informasi autentikasi setelah menerima callback ini.
     // Jika ingin tetap dalam session, dapatkan token baru dan data lainnya, lalu panggil joinChannel untuk bergabung kembali ke channel.
   });
   

4. (Opsional) Atur mode channel. Mode default adalah mode panggilan. Untuk informasi selengkapnya, lihat Atur mode channel dan role pengguna.

   // Atur mode channel. Nilai string valid: communication (mode panggilan) dan interactive_live (mode interaktif).
   aliRtcEngine.setChannelProfile('interactive_live');
   // Atur role pengguna. Pengaturan ini hanya berlaku dalam mode interaktif.
   // Nilai string valid: interactive (role interaktif, memungkinkan stream ingest dan pulling) dan live (role penonton, hanya memungkinkan stream pulling).
   aliRtcEngine.setClientRole('interactive');

5. Bergabung ke channel. Untuk informasi tentang cara menghitung token, lihat Autentikasi berbasis token. Anda dapat memilih untuk bergabung ke channel dengan satu parameter atau beberapa parameter sesuai kebutuhan.

   • Bergabung dengan satu parameter

     const userName = 'TestUser1'; // Anda dapat mengganti ini dengan username Anda. Karakter Cina didukung.
     
     try {
       // Anda perlu mengimplementasikan fetchToken untuk mendapatkan Base64Token dari server.
       const base64Token = await fetchToken();
       await aliRtcEngine.joinChannel(base64Token, userName);
       // Berhasil bergabung ke channel. Anda dapat melakukan operasi lainnya.
     } catch (error) {
       // Gagal bergabung ke channel.
     }

   • Bergabung dengan beberapa parameter

     // Untuk informasi selengkapnya, lihat topik Autentikasi berbasis token. Hasilkan informasi autentikasi dari server atau lokal.
     // Catatan: Demi keamanan data, jangan pernah merilis logika perhitungan token yang mencakup appKey kepada pengguna dalam kondisi apa pun.
     const appId = 'yourAppId'; // Dapatkan ini dari console.
     const appKey = 'yourAppKey'; // Dapatkan ini dari console. Catatan: Jangan pernah mengekspos AppKey Anda di lingkungan produksi.
     const channelId = 'AliRtcDemo'; // Anda dapat mengganti ini dengan ID channel Anda. Hanya huruf dan angka yang didukung.
     const userId = 'test1'; // Anda dapat mengganti ini dengan ID pengguna Anda. Hanya huruf dan angka yang didukung.
     const userName = 'TestUser1'; // Anda dapat mengganti ini dengan username Anda. Karakter Cina didukung.
     const timestamp = Math.floor(Date.now() / 1000) + 3600; // Kedaluwarsa dalam satu jam.
     
     try {
       const token = await generateToken(appId, appKey, channelId, userId, timestamp);
       // Bergabung ke channel. Parameter seperti token dan nonce biasanya dikembalikan oleh server.
       // Catatan: Saat memanggil operasi ini, pastikan parameter channelId, userId, appId, dan timestamp sama dengan yang digunakan untuk menghasilkan token.
       await aliRtcEngine.joinChannel({
         channelId,
         userId,
         appId,
         token,
         timestamp,
       }, userName);
       // Berhasil bergabung ke channel. Anda dapat melakukan operasi lainnya.
     } catch (error) {
       // Gagal bergabung ke channel.
     }

6. Pratinjau dan ingest aliran. Secara default, setelah bergabung ke channel, data audio dan video lokal secara otomatis ditangkap dan didorong ke Alibaba Cloud Global Real-time Transport Network (GRTN). Anda dapat melakukan pratinjau feed video lokal Anda sebagai berikut.

   1. Dalam kode HTML, tambahkan elemen VIDEO dengan id diatur ke localPreviewer.

      <video
        id="localPreviewer"
        muted
        style="display: block;width: 320px;height: 180px;background-color: black;"
      ></video>

   2. Panggil metode setLocalViewConfig dan berikan ID elemen untuk memulai pratinjau.

      // Parameter pertama bisa berupa HTMLVideoElement atau ID elemennya. Berikan null untuk menghentikan pratinjau.
      // Parameter kedua bisa berupa 1 (pratinjau aliran kamera) atau 2 (pratinjau aliran berbagi layar).
      aliRtcEngine.setLocalViewConfig('localPreviewer', 1);

7. Berlangganan aliran audio dan video jarak jauh. Secara default, setelah bergabung ke channel, Anda secara otomatis berlangganan aliran audio dan video dari streamer lain. Aliran audio diputar secara otomatis. Untuk menonton aliran kamera atau berbagi layar, Anda harus memanggil operasi setRemoteViewConfig untuk mengaktifkannya.

   1. Dalam kode HTML, tambahkan elemen DIV dengan id diatur ke remoteVideoContainer sebagai wadah.

      <div id="remoteVideoContainer"></div>

   2. Setelah menerima event tentang perubahan langganan aliran video jarak jauh, panggil operasi setRemoteViewConfig untuk memutar aliran jika telah berlangganan. Jika aliran dibatalkan langganan, hapus elemen tersebut.

      // Simpan elemen Video.
      const remoteVideoElMap = {};
      // Elemen wadah jarak jauh.
      const remoteVideoContainer = document.querySelector('#remoteVideoContainer');
      
      function removeRemoteVideo(userId) {
        const el = remoteVideoElMap[userId];
        if (el) {
          aliRtcEngine.setRemoteViewConfig(null, userId, 1);
          el.pause();
          remoteVideoContainer.removeChild(el);
          delete remoteVideoElMap[userId];
        }
      }
      
      // Ini sama dengan contoh videoSubscribeStateChanged pada langkah "Dengarkan event".
      aliRtcEngine.on('videoSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
        // Parameter oldState dan newState bertipe AliRtcSubscribeState. Nilai valid: 0 (Init), 1 (Unsubscribed), 2 (Subscribing), dan 3 (Subscribed).
        // Parameter interval menunjukkan selang waktu antara dua status dalam milidetik.
        console.log(`Status langganan pengguna jarak jauh ${userId} di channel ${channelId} berubah dari ${oldState} menjadi ${newState}`);
        // Contoh
        if (newState === 3) {
          const video = document.createElement('video');
          video.autoplay = true;
          video.setAttribute('style', 'display: block;width: 320px;height: 180px;background-color: black;');
          remoteVideoElMap[userId] = video;
          remoteVideoContainer.appendChild(video);
          // Parameter pertama adalah HTMLVideoElement.
          // Parameter kedua adalah ID pengguna jarak jauh.
          // Parameter ketiga bisa berupa 1 (pratinjau aliran kamera) atau 2 (pratinjau aliran berbagi layar).
          aliRtcEngine.setRemoteViewConfig(video, userId, 1);
        } else if (newState === 1) {
          removeRemoteVideo(userId);
        }
      });

8. Akhiri proses.

   // Hentikan pratinjau lokal.
   await aliRtcEngine.stopPreview();
   // Tinggalkan channel.
   await aliRtcEngine.leaveChannel();
   // Hapus instans.
   aliRtcEngine.destroy();

Demo cepat

- demo
  - quick.html
  - quick.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>aliyun-rtc-sdk quick start</title>
    <link rel="stylesheet" href="https://g.alicdn.com/code/lib/bootstrap/5.3.0/css/bootstrap.min.css" />
    <style>
      .video {
        display: inline-block;
        width: 320px;
        height: 180px;
        margin-right: 8px;
        margin-bottom: 8px;
        background-color: black;
      }
    </style>
  </head>
  <body class="container p-2">
    <h1>aliyun-rtc-sdk quick start</h1>

    <div class="toast-container position-fixed top-0 end-0 p-3">
      <div id="loginToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          Pesan LogonPengguna OnlinePengguna Offline

function hex(buffer) {
  const hexCodes = [];
  const view = new DataView(buffer);
  for (let i = 0; i < view.byteLength; i += 4) {
    const value = view.getUint32(i);
    const stringValue = value.toString(16);
    const padding = '00000000';
    const paddedValue = (padding + stringValue).slice(-padding.length);
    hexCodes.push(paddedValue);
  }
  return hexCodes.join('');
}
async function generateToken(appId, appKey, channelId, userId, timestamp) {
  const encoder = new TextEncoder();
  const data = encoder.encode(`${appId}${appKey}${channelId}${userId}${timestamp}`);

  const hash = await crypto.subtle.digest('SHA-256', data);
  return hex(hash);
}

function showToast(baseId, message) {
  $(`#${baseId}Body`).text(message);
  const toast = new bootstrap.Toast($(`#${baseId}`));

  toast.show();
}

// Masukkan App ID dan AppKey Anda.
const appId = '';
const appKey = '';
AliRtcEngine.setLogLevel(0);
let aliRtcEngine;
const remoteVideoElMap = {};
const remoteVideoContainer = document.querySelector('#remoteVideoContainer');

function removeRemoteVideo(userId, type = 'camera') {
  const vid = `${type}_${userId}`;
  const el = remoteVideoElMap[vid];
  if (el) {
    aliRtcEngine.setRemoteViewConfig(null, userId, type === 'camera' ? 1: 2);
    el.pause();
    remoteVideoContainer.removeChild(el);
    delete remoteVideoElMap[vid];
  }
}

function listenEvents() {
  if (!aliRtcEngine) {
    return;
  }
  // Dengarkan pengguna jarak jauh yang online.
  aliRtcEngine.on('remoteUserOnLineNotify', (userId, elapsed) => {
    console.log(`Pengguna ${userId} bergabung ke channel dalam ${elapsed} detik`);
    // Tambahkan logika bisnis Anda di sini, misalnya menampilkan modul untuk pengguna ini.
    showToast('onlineToast', `Pengguna ${userId} online`);
  });

  // Dengarkan pengguna jarak jauh yang offline.
  aliRtcEngine.on('remoteUserOffLineNotify', (userId, reason) => {
    // Parameter reason menunjukkan alasan. Untuk informasi selengkapnya, lihat referensi API.
    console.log(`Pengguna ${userId} meninggalkan channel. Kode alasan: ${reason}`);
    // Tambahkan logika bisnis Anda di sini, misalnya menghapus modul untuk pengguna ini.
    showToast('offlineToast', `Pengguna ${userId} offline`);
    removeRemoteVideo(userId, 'camera');
    removeRemoteVideo(userId, 'screen');
  });

  aliRtcEngine.on('bye', code => {
    // Parameter code menunjukkan alasan. Untuk informasi selengkapnya, lihat referensi API.
    console.log(`bye, code=${code}`);
    // Tambahkan logika bisnis Anda di sini, misalnya keluar dari halaman panggilan.
    showToast('loginToast', `Anda telah meninggalkan channel. Kode alasan: ${code}`);
  });

  aliRtcEngine.on('videoSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
    // Parameter oldState dan newState bertipe AliRtcSubscribeState. Nilai valid: 0 (Init), 1 (Unsubscribed), 2 (Subscribing), dan 3 (Subscribed).
    // Parameter interval menunjukkan selang waktu antara dua status dalam milidetik.
    console.log(`Status langganan pengguna jarak jauh ${userId} di channel ${channelId} berubah dari ${oldState} menjadi ${newState}`);
    const vid = `camera_${userId}`;
    // Contoh
    if (newState === 3) {
      const video = document.createElement('video');
      video.autoplay = true;
      video.className = 'video';
      remoteVideoElMap[vid] = video;
      remoteVideoContainer.appendChild(video);
      // Parameter pertama adalah HTMLVideoElement.
      // Parameter kedua adalah ID pengguna jarak jauh.
      // Parameter ketiga bisa berupa 1 (pratinjau aliran kamera) atau 2 (pratinjau aliran berbagi layar).
      aliRtcEngine.setRemoteViewConfig(video, userId, 1);
    } else if (newState === 1) {
      removeRemoteVideo(userId, 'camera');
    }
  });

  aliRtcEngine.on('screenShareSubscribeStateChanged', (userId, oldState, newState, interval, channelId) => {
    // Parameter oldState dan newState bertipe AliRtcSubscribeState. Nilai valid: 0 (Init), 1 (Unsubscribed), 2 (Subscribing), dan 3 (Subscribed).
    // Parameter interval menunjukkan selang waktu antara dua status dalam milidetik.
    console.log(`Status langganan aliran berbagi layar dari pengguna jarak jauh ${userId} di channel ${channelId} berubah dari ${oldState} menjadi ${newState}`);
    const vid = `screen_${userId}`;
    // Contoh    
    if (newState === 3) {
      const video = document.createElement('video');
      video.autoplay = true;
      video.className = 'video';
      remoteVideoElMap[vid] = video;
      remoteVideoContainer.appendChild(video);
      // Parameter pertama adalah HTMLVideoElement.
      // Parameter kedua adalah ID pengguna jarak jauh.
      // Parameter ketiga bisa berupa 1 (pratinjau aliran kamera) atau 2 (pratinjau aliran berbagi layar).
      aliRtcEngine.setRemoteViewConfig(video, userId, 2);
    } else if (newState === 1) {
      removeRemoteVideo(userId, 'screen');
    }
  });
}

$('#loginForm').submit(async e => {
  // Cegah aksi pengiriman formulir default.
  e.preventDefault();
  const channelId = $('#channelId').val();
  const userId = $('#userId').val();
  const timestamp = Math.floor(Date.now() / 1000) + 3600 * 3;

  if (!channelId || !userId) {
    showToast('loginToast', 'Data tidak lengkap');
    return;
  }

  aliRtcEngine = AliRtcEngine.getInstance();
  listenEvents();

  try {
    const token = await generateToken(appId, appKey, channelId, userId, timestamp);
    // Atur mode channel. Nilai string valid: communication (mode panggilan) dan interactive_live (mode interaktif).
    aliRtcEngine.setChannelProfile('communication');
    // Atur role pengguna. Pengaturan ini hanya berlaku dalam mode interaktif.
    // Nilai string valid: interactive (role interaktif, memungkinkan stream ingest dan pulling) dan live (role penonton, hanya memungkinkan stream pulling).
    // aliRtcEngine.setClientRole('interactive');
    // Bergabung ke channel. Parameter seperti token dan nonce biasanya dikembalikan oleh server.
    await aliRtcEngine.joinChannel(
      {
        channelId,
        userId,
        appId,
        token,
        timestamp,
      },
      userId
    );
    showToast('loginToast', 'Berhasil bergabung ke channel');
    $('#joinBtn').prop('disabled', true);
    $('#leaveBtn').prop('disabled', false);

    // Pratinjau
    aliRtcEngine.setLocalViewConfig('localPreviewer', 1);
  } catch (error) {
    console.log('Gagal bergabung ke channel', error);
    showToast('loginToast', 'Gagal bergabung ke channel');
  }
});

$('#leaveBtn').click(async () => {
  Object.keys(remoteVideoElMap).forEach(vid => {
    const arr = vid.split('_');
    removeRemoteVideo(arr[1], arr[0]);
  });
  // Hentikan pratinjau lokal.
  await aliRtcEngine.stopPreview();
  // Tinggalkan channel.
  await aliRtcEngine.leaveChannel();
  // Hapus instans.
  aliRtcEngine.destroy();
  aliRtcEngine = undefined;
  $('#joinBtn').prop('disabled', false);
  $('#leaveBtn').prop('disabled', true);
  showToast('loginToast', 'Meninggalkan channel');
});