Integrate Co-streaming SDK for Web

This topic describes how to integrate Co-streaming SDK for Web.

Usage notes

Important

You can use the SDK only to integrate the co-streaming feature into web applications. If your application does not require this feature, you can use Push SDKs for other clients. For more information, see SDK download and release notes.
The ingest and streaming URLs for co-streaming are constructed differently. For more information, see Co-streaming URL generator.

Supported browsers

The following table describes the browsers that support Co-streaming SDK for Web.

Operating system	Browser	Supported earliest version	SDK version
Windows	Chrome	63	-
	Firefox	62	-
	Opera	15	-
	Edge	79	V2.0.3 or later
	QQ Browser	63 (with Chrome kernel)	V2.1.0 or later
Mac	Chrome	63	-
	Safari	11	-
	Firefox	62	-
	Opera	15	-
	Edge	79	V2.0.3 or later
	QQ Browser	63 (with Chrome kernel)	V2.1.0 or later
Android	Chrome	63	-
	Edge	79	V2.0.3 or later
	WeChat built-in browser	7.0.9 (WeChat version)	-
	QQ Browser	63 (with Chrome kernel)	V2.1.0 or later
	HUAWEI Browser	63 (with Chrome kernel)	V2.1.0 or later
	Oppo Browser and OnePlus Browser	40.7.39.1 (with HeyTapBrowser kernel)	V2.1.0 or later
iOS	Safari	11	-
	Edge	79	V2.0.3 or later
	WeChat built-in browser	7.0.9 (WeChat version)	-
	DingTalk built-in browser	11.2.5 (DingTalk version)	-
	QQ Browser	11 (with Safari kernel)	V2.1.0 or later

JavaScript

Import Co-streaming SDK for 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>

Use the methods provided by the SDK. The following sample code provides an example on how to define a method to retrieve a list of available microphones:

<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>
// Define a method to retrieve a list of available microphones. 
<script type="text/javascript">
    function getMicrophones() {
        window.AlivcLivePush.AlivcLivePusher.getMicrophones().then(microphones => {
            console.log ('Microphones:',microphones);
        })
    }
</script>

//...
// Code for other features.
//...

<body>
  <a href="#" onclick="getMicrophones()"> Available microphones</a>
</body>

Import ApsaraVideo Player SDK for Web. The SDK is required to play live streams on your application.

<head>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" />  // You must add the .css file for the HTML5 player. 
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js"></script>  // You must add the .js file for the HTML5 player. 
</head>

For more information, see Quick integration.

TypeScript

The following sample code provides an example on how to import the SDK to a project that uses TypeScript. In this example, the project uses React 16.8 or later versions.

Import Co-streaming SDK for Web.

useEffect(() => {
    // Import Co-streaming SDK for 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);

 }, []);

Use the methods provided by the SDK. The following sample code provides an example on how to define a method to retrieve a list of available microphones:

// Define a method to retrieve a list of available microphones. 
const getMicrophones = async () => {
    const microphones=await window.AlivcLivePush.AlivcLivePusher.getMicrophones();
    console.log ('Microphones:',microphones);
}

//...
// Code for other features.
//...

return (
   <div>
      <a href="#" onClick={getMicrophones}>Available microphones</a>
    </div>
 );

Import ApsaraVideo Player SDK for Web. The SDK is required to play live streams on your application.
```
useEffect(() => {
    //...
    // Import the SDK in the same manner as importing Co-streaming SDK for Web.
    //...
 }, []);
```
For more information, see Quick integration.

References

Methods provided by Co-streaming SDK for Web

Developer guide to co-streaming on the web