：Co-streaming di web

Ikhtisar tentang cara mengimplementasikan co-streaming

Push SDK mengimplementasikan co-streaming berdasarkan ApsaraVideo Real-time Communication (ARTC), memungkinkan pengguna memulai streaming interaktif dengan lebih banyak peserta dan latensi ultra-rendah.

• Sebelum co-streaming: Streamer menggunakan URL ingest berbasis ARTC untuk mengirim aliran, sementara pemirsa menarik aliran dari CDN.

• Selama co-streaming: Pemirsa menjadi co-streamer. Co-streamer menggunakan URL ingest berbasis ARTC untuk mengirim aliran dan URL streaming berbasis ARTC untuk menarik aliran streamer dengan latensi ultra-rendah. Streamer juga menggunakan URL streaming berbasis ARTC untuk menarik aliran co-streamer dengan latensi ultra-rendah.

• Setelah co-streaming: Co-streamer kembali menjadi pemirsa biasa. Pengiriman aliran berbasis ARTC dan penarikan aliran oleh pemirsa dihentikan, dan pemirsa kembali menarik aliran dari CDN.

Catatan penggunaan

• Dalam mode co-streaming, streamer dan co-streamer hanya dapat menggunakan objek AlivcLivePlayer untuk memutar aliran satu sama lain. Objek AlivcLivePlayer hanya mendukung aliran dengan URL yang dimulai dengan artc://live.aliyun.com/play/.

• Bagian ini menjelaskan cara menggunakan fitur co-streaming di web. Untuk informasi lebih lanjut tentang integrasi SDK co-streaming untuk Web, lihat Integrasi SDK Co-streaming untuk Web.

  Penting

  Pembaruan untuk SDK co-streaming untuk Web dirilis pada 15 Maret 2024, yang membuat SDK kompatibel dengan versi baru Google Chrome. Pengguna yang menggunakan SDK lama disarankan untuk segera memperbarui SDK guna menghindari masalah ketersediaan. Untuk informasi lebih lanjut tentang cara mengintegrasikan versi terbaru SDK, lihat Integrasi SDK Co-streaming untuk Web.

Langkah 1: Aktifkan fitur co-streaming

Untuk menggunakan fitur co-streaming, Anda harus membuat aplikasi co-streaming dan mengonfigurasi domain streaming untuk pemirsa. Untuk informasi lebih lanjut, lihat Memulai dengan Co-streaming.

Langkah 2: Hasilkan URL ingest dan streaming untuk co-streaming

Anda dapat menghasilkan URL ingest dan streaming untuk streamer serta co-streamer, serta URL streaming CDN untuk pemirsa, menggunakan Konsol ApsaraVideo Live atau membangun URL tersebut berdasarkan aturan penggabungan.

Metode 1: Hasilkan URL menggunakan konsol

Anda dapat menggunakan pembuat URL di Konsol ApsaraVideo Live untuk menghasilkan URL ingest dan streaming bagi streamer serta co-streamer, serta URL streaming CDN untuk pemirsa. Untuk informasi lebih lanjut, lihat Pembuat URL co-streaming.

Metode 2: Bangun URL

Token dalam URL ingest dan streaming untuk streamer dan co-streamer yang dihasilkan melalui konsol bersifat sementara dan biasanya digunakan untuk pengujian. Untuk keperluan bisnis, bangun URL tersebut menggunakan aturan penggabungan demi alasan keamanan. Token dalam URL yang dibangun menggunakan aturan penggabungan dihitung berdasarkan SdkAppID, AppKey, ID ruangan, UserID, dan timestamp dengan algoritma enkripsi SHA-256. Token ini menawarkan tingkat keamanan yang lebih tinggi. Untuk informasi lebih lanjut, lihat URL ingest dan streaming untuk streamer dan co-streamer dalam skenario co-streaming dan URL streaming CDN untuk pemirsa.

Langkah 3: Buat objek terkait pengiriman aliran

Langkah ini diperlukan baik di sisi streamer maupun co-streamer.

Buat objek AlivcLivePusher

Buat objek AlivcLivePusher sebagai instance pengiriman aliran dan konfigurasikan callback yang sesuai.

const pusher = new window.AlivcLivePush.AlivcLivePusher();
await pusher.init({
  resolution: window.AlivcLivePush.AlivcResolutionEnum.RESOLUTION_540P,
  fps: window.AlivcLivePush.AlivcFpsEnum.FPS_30,
  // audioOnly: true, Hanya untuk skenario di mana aliran hanya-audio dikirim.
});
pusher.info.on('pushstatistics', _stat => {
  // TODO... Proses data statistik pengiriman aliran.
  // console.log(_stat);
});
pusher.error.on('system', error => {
  console.log(error);
});
pusher.network.on('connectionlost', () => {
  console.log('connectionlost');
});

Mulai pengiriman aliran dalam mode co-streaming

Gunakan URL ingest untuk co-streaming dalam mengirim aliran.

await pusher.startPreview(videoElement);
await pusher.startPush("artc://live.aliyun.com/push/6375?timestamp=1661596947&token=XXX&userId=7135&sdkAppId=XXX"); // URL ingest untuk streamer atau co-streamer.

Langkah 4: Buat objek AliPlayer untuk pemutaran CDN

Langkah ini diperlukan untuk sisi pemirsa.

Untuk menggunakan objek AliPlayer dalam pemutaran CDN, peroleh terlebih dahulu URL streaming CDN untuk pemirsa. Untuk detail lebih lanjut, lihat Langkah 2: Hasilkan URL ingest dan streaming untuk co-streaming.

Kami merekomendasikan penggunaan URL streaming dalam format HTTP-FLV dibandingkan dengan URL streaming dalam format Real-Time Messaging Protocol (RTMP). Saat menggunakan Konsol ApsaraVideo Live untuk menghasilkan URL, sistem akan menghasilkan URL dalam format RTMP dan HTTP-FLV. Meskipun kedua format tersebut berisi konten data yang sama, protokol yang digunakan berbeda. HTTP merupakan protokol utama untuk transmisi informasi di internet. Koneksi melalui protokol HTTP, seperti antara Alibaba Cloud CDN, penyedia layanan internet (ISP), dan perangkat perantara, telah dioptimalkan secara signifikan. Port default untuk HTTP adalah 80, sedangkan port default untuk HTTPS adalah 443. Dalam kebanyakan kasus, port-port ini masuk daftar putih dan tidak dapat dinonaktifkan. Sebaliknya, RTMP adalah protokol yang sudah usang dengan port default 1935, yang mungkin dinonaktifkan oleh firewall, sehingga menyebabkan kesalahan. Dibandingkan dengan RTMP, HTTP-FLV lebih stabil dan menawarkan performa lebih baik. Contohnya, pemutaran video melalui HTTP-FLV memiliki laju tersendat dan latensi yang lebih rendah dibandingkan RTMP.

const player = new window.Aliplayer(
  {
    id: videoId, // ID elemen video
    source: url, // URL streaming, yang bisa berupa URL streaming pihak ketiga atau URL streaming dari ApsaraVideo Live.
    isLive: true, // Tentukan apakah konten yang ingin Anda putar adalah streaming langsung.
  },
  function (player: any) {
    console.log('Pemain telah dibuat.', player);
  }
);

Langkah 5: Mulai co-streaming

Streamer A mengirim aliran berdasarkan ARTC

Streamer A menggunakan objek AlivcLivePusher untuk memulai pengiriman aliran. Berikut adalah contoh kode:

await pusher.startPreview(videoElement); // Anda dapat menggunakan metode antarmuka Dokumen (seperti getElementById) untuk memperoleh objek videoElement.
await pusher.startPush("artc://live.aliyun.com/push/6375?timestamp=1661596947&token=XXX&userId=7135&sdkAppId=XXX"); // URL ingest untuk streamer atau co-streamer.

Pemirsa menggunakan URL streaming CDN untuk memutar aliran Streamer A

Semua pemirsa menggunakan objek AliPlayer untuk memutar aliran Streamer A. Contoh kode:

const player = new window.Aliplayer(
  {
    id: videoId, // ID elemen video
    source: 'rtmp://test.alivecdn.com/live/streamId?auth_key=XXX', // URL streaming, yang bisa berupa URL streaming pihak ketiga atau URL streaming dari ApsaraVideo Live.
    isLive: true, // Tentukan apakah konten yang ingin Anda putar adalah streaming langsung.
  },
  function (player: any) {
    console.log('Pemain telah dibuat.', player);
  }
);

Pemirsa D memulai co-streaming

• Pemirsa D membuat objek AlivcLivePusher dan menggunakan URL ingest untuk co-streaming untuk mengirim aliran. Dalam hal ini, Pemirsa D menjadi co-streamer. Contoh kode:

  const pusher = new window.AlivcLivePush.AlivcLivePusher();
  pusher.init({
    resolution: window.AlivcLivePush.AlivcResolutionEnum.RESOLUTION_540P,
    fps: window.AlivcLivePush.AlivcFpsEnum.FPS_30,
    // audioOnly: true, Hanya untuk skenario di mana aliran hanya-audio dikirim.
  });
  pusher.info.on('pushstatistics', _stat => {
    // TODO... Proses data statistik pengiriman aliran.
    // console.log(_stat);
  });
  pusher.error.on('system', error => {
    console.log(error);
  });
  pusher.network.on('connectionlost', () => {
    console.log('connectionlost');
  });
  await pusher.startPreview(videoElement);  // Anda dapat menggunakan metode antarmuka Dokumen (seperti getElementById) untuk memperoleh objek videoElement.
  await pusher.startPush("artc://live.aliyun.com/push/6375?timestamp=1661596947&token=XXX&userId=7135&sdkAppId=XXX"); // URL ingest untuk streamer atau co-streamer.

• Streamer A memperoleh URL streaming untuk co-streaming Co-streamer D, dan membuat objek AlivcLivePlayer untuk menarik aliran Co-streamer D secara real-time. Contoh kode:

  const player = new window.AlivcLivePush.AlivcLivePlayer();
  // Tentukan URL streaming Co-streamer D, yang dimulai dengan artc://.
  const playInfo = await player.startPlay("artc://live.aliyun.com/play/6375?timestamp=1661596947&token=XXX&userId=7135&sdkAppId=XXX", videoElement);
  
  playInfo.on('userleft', () => {
    // Tangani peristiwa yang dipicu ketika Co-streamer D meninggalkan ruangan.
  });
  
  playInfo.on('canplay', () => {
    // Tangani peristiwa yang dipicu ketika video siap untuk diputar.
  }

• Pada saat yang sama, Co-streamer D memperoleh URL streaming untuk co-streaming Streamer A, dan membuat objek AlivcLivePlayer untuk menarik aliran Streamer A secara real-time. Contoh kode:

  const player = new window.AlivcLivePush.AlivcLivePlayer();
  // Tentukan URL streaming Streamer A, yang dimulai dengan artc://.
  const playInfo = await player.startPlay("artc://live.aliyun.com/play/6375?timestamp=1661596947&token=XXX&userId=7135&sdkAppId=XXX", videoElement);
  
  playInfo.on('userleft', () => {
    // Tangani peristiwa yang dipicu ketika Streamer A meninggalkan ruangan.
  });
  
  playInfo.on('canplay', () => {
    // Tangani peristiwa yang dipicu ketika video siap untuk diputar.
  }

Streamer A memperbarui aliran campuran setelah co-streaming berhasil

Agar Pemirsa B dan Pemirsa C (yang bukan co-streamer) dapat menonton aliran Co-streamer D, Streamer A perlu melakukan operasi pencampuran aliran. Dengan demikian, aliran dari Streamer A dan Co-streamer D akan digabungkan menjadi satu aliran yang dapat diambil oleh pemirsa melalui CDN untuk diputar.

Secara spesifik, Streamer A memanggil metode setLiveMixTranscodingConfig untuk memulai tugas transkoding aliran campuran dan menentukan aliran yang akan dicampur. Parameter seperti resolusi dan frame rate aliran campuran dikonfigurasikan oleh Streamer A di AlivcLivePushConfig saat membuat objek AlivcLivePusher. Sebagai contoh, jika Streamer A menetapkan resolusi menjadi 720p di AlivcLivePushConfig saat membuat objek AlivcLivePusher, maka resolusi aliran campuran adalah 720p.

const resolution = pusher.getResolution();
const width = window.AlivcLivePush.AlivcResolution.GetResolutionWidth(resolution);
const height = window.AlivcLivePush.AlivcResolution.GetResolutionHeight(resolution);

const mixStreams = [];
const transcodingConfig = new window.AlivcLivePush.AlivcLiveTranscodingConfig();
const anchorMixStream = new window.AlivcLivePush.AlivcLiveMixStream(
  userA, // Tentukan ID pengguna Streamer A.
  0,
  0,
  width,
  height,
  1
);
// Tambahkan aliran Streamer A untuk pencampuran.
mixStreams.push(anchorMixStream);

const audienceMixStream = new window.AlivcLivePush.AlivcLiveMixStream(
  userD, // Tentukan ID pengguna Co-streamer D.
  100,
  200,
  200,
  300,
  2
);
// Tambahkan aliran Co-streamer D untuk pencampuran.
mixStreams.push(audienceMixStream);

transcodingConfig.mixStreams = mixStreams;
await pusher.setLiveMixTranscodingConfig(transcodingConfig);

Pemirsa dapat menonton aliran campuran dari Streamer A dan Co-streamer D.

Co-streamer D mengakhiri co-streaming

• Untuk menghentikan co-streaming, Co-streamer D harus memanggil metode yang digunakan untuk menghentikan pengiriman aliran di AlivcLivePusher dan kemudian menghapus AlivcLivePusher. Contoh kode:

  await pusher.destroy();
  pusher = null;

• Pada saat yang sama, Co-streamer D juga harus memanggil metode yang digunakan untuk menghentikan pemutaran di AlivcLivePlayer dan kemudian menghapus AlivcLivePlayer. Contoh kode:

  await player.destroy();
  player = null;

• Co-streamer D menjadi pemirsa biasa, dan dapat menarik aliran dari CDN. Untuk informasi lebih lanjut, lihat Langkah 4: Buat Objek AliPlayer untuk Pemutaran CDN.

• Streamer A perlu memanggil metode yang digunakan untuk menghentikan pemutaran di AlivcLivePlayer dan kemudian menghapus AlivcLivePlayer. Contoh kode:

  await player.destroy();
  player = null;

  Pada saat yang sama, Streamer A perlu memanggil metode setLiveMixTranscodingConfig dan mengirimkan nilai kosong. Dengan cara ini, pencampuran aliran dihentikan. Perhatikan bahwa setiap kali pemirsa hanya ingin menonton aliran Streamer A, Streamer A dapat melakukan operasi sebelumnya untuk menghentikan pencampuran aliran.

  Peringatan

  Jika streamer masih berada di ruangan tetapi tidak memerlukan pencampuran aliran, pastikan untuk menghentikan pencampuran aliran. Jika pencampuran aliran tidak dihentikan, modul pencampuran aliran yang terus berjalan akan menimbulkan biaya tambahan yang tidak perlu.

  pusher.setLiveMixTranscodingConfig();