Integrasi Co-streaming SDK untuk Web

Topik ini menjelaskan cara mengintegrasikan Co-streaming SDK untuk Web.

Catatan Penggunaan

Penting

Anda hanya dapat menggunakan SDK ini untuk mengintegrasikan fitur co-streaming ke dalam aplikasi web. Jika aplikasi Anda tidak memerlukan fitur ini, Anda dapat menggunakan Push SDK untuk klien lainnya. Untuk informasi lebih lanjut, lihat Unduhan SDK dan Catatan Rilis.
URL ingest dan streaming untuk co-streaming dibangun secara berbeda. Untuk informasi lebih lanjut, lihat Pembuat URL Co-streaming.

Browser yang Didukung

Tabel berikut menjelaskan browser yang mendukung Co-streaming SDK untuk Web.

Sistem Operasi	Browser	Versi paling awal yang didukung	Versi SDK
Windows	Chrome	63	-
	Firefox	62	-
	Opera	15	-
	Edge	79	V2.0.3 atau lebih baru
	QQ Browser	63 (dengan kernel Chrome)	V2.1.0 atau lebih baru
Mac	Chrome	63	-
	Safari	11	-
	Firefox	62	-
	Opera	15	-
	Edge	79	V2.0.3 atau lebih baru
	QQ Browser	63 (dengan kernel Chrome)	V2.1.0 atau lebih baru
Android	Chrome	63	-
	Edge	79	V2.0.3 atau lebih baru
	Browser bawaan WeChat	7.0.9 (versi WeChat)	-
	QQ Browser	63 (dengan kernel Chrome)	V2.1.0 atau lebih baru
	HUAWEI Browser	63 (dengan kernel Chrome)	V2.1.0 atau lebih baru
	Oppo Browser dan OnePlus Browser	40.7.39.1 (dengan kernel HeyTapBrowser)	V2.1.0 atau lebih baru
iOS	Safari	11	-
	Edge	79	V2.0.3 atau lebih baru
	Browser bawaan WeChat	7.0.9 (versi WeChat)	-
	Browser bawaan DingTalk	11.2.5 (versi DingTalk)	-
	QQ Browser	11 (dengan kernel Safari)	V2.1.0 atau lebih baru

JavaScript

Impor Co-streaming SDK untuk Web.

<head>
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-live-push/6.4.9/alivc-live-push.js"></script>
</head>

Gunakan metode yang disediakan oleh SDK. Contoh kode berikut menunjukkan cara mendefinisikan metode untuk mengambil daftar mikrofon yang tersedia:

<script charset="utf-8" type="text/javascript"  src="https://g.alicdn.com/apsara-media-box/imp-web-live-push/6.4.9/alivc-live-push.js"></script>
// Definisikan metode untuk mengambil daftar mikrofon yang tersedia. 
<script type="text/javascript">
    function getMicrophones() {
        window.AlivcLivePush.AlivcLivePusher.getMicrophones().then(microphones => {
            console.log ('Mikrofon:',microphones);
        })
    }
</script>

//...
// Kode untuk fitur lainnya.
//...

<body>
  <a href="#" onclick="getMicrophones()"> Mikrofon yang tersedia</a>
</body>

Impor ApsaraVideo Player SDK untuk Web. SDK ini diperlukan untuk memutar live stream di aplikasi Anda.

<head>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" />  // Anda harus menambahkan file .css untuk pemain HTML5. 
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js"></script>  // Anda harus menambahkan file .js untuk pemain HTML5. 
</head>

Untuk informasi lebih lanjut, lihat Integrasi Cepat.

TypeScript

Contoh kode berikut menunjukkan cara mengimpor SDK ke proyek yang menggunakan TypeScript. Dalam contoh ini, proyek menggunakan React 16.8 atau versi yang lebih baru.

Impor Co-streaming SDK untuk Web.

useEffect(() => {
    // Impor Co-streaming SDK untuk Web.
    const alivcLivePushScript = document.createElement('script');
    alivcLivePushScript.src = 'https://g.alicdn.com/apsara-media-box/imp-web-live-push/6.4.9/alivc-live-push.js';
    document.body.appendChild(alivcLivePushScript);

 }, []);

Gunakan metode yang disediakan oleh SDK. Contoh kode berikut menunjukkan cara mendefinisikan metode untuk mengambil daftar mikrofon yang tersedia:

// Definisikan metode untuk mengambil daftar mikrofon yang tersedia. 
const getMicrophones = async () => {
    const microphones=await window.AlivcLivePush.AlivcLivePusher.getMicrophones();
    console.log ('Mikrofon:',microphones);
}

//...
// Kode untuk fitur lainnya.
//...

return (
   <div>
      <a href="#" onClick={getMicrophones}>Mikrofon yang tersedia</a>
    </div>
 );

Impor ApsaraVideo Player SDK untuk Web. SDK ini diperlukan untuk memutar live stream di aplikasi Anda.
```
useEffect(() => {
    //...
    // Impor SDK dengan cara yang sama seperti mengimpor Co-streaming SDK untuk Web.
    //...
 }, []);
```
Untuk informasi lebih lanjut, lihat Integrasi Cepat.

Referensi

Metode yang disediakan oleh Co-streaming SDK untuk Web

Panduan Pengembang untuk Co-streaming di Web