Integrate the Web Co-streaming SDK - ApsaraVideo Live - Alibaba Cloud Documentation Center

Integrate the Web Co-streaming SDK into your web application to enable real-time co-streaming capabilities.

Notes

Important

If your viewers do not need to co-stream, use other integration methods. For more information, see SDK download.
Web co-streaming requires different ingest and streaming URLs than regular streaming. For more information, see Co-streaming URL generator.

Browser requirements

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

Operating system	Browser	Minimum supported version	SDK version requirements
Windows	Chrome	63	-
	Firefox	62	-
	Opera	15	-
	Edge	79	V2.0.3 or later
	QQ Browser	63 (Chrome kernel version)	V2.1.0 or later
Mac	Chrome	63	-
	Safari	11	-
	Firefox	62	-
	Opera	15	-
	Edge	79	V2.0.3 or later
	QQ Browser	63 (Chrome kernel version)	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 (Chrome kernel version)	V2.1.0 or later
	Huawei Browser	63 (Chrome kernel version)	V2.1.0 or later
	OPPO Browser, OnePlus Browser	40.7.39.1 (HeyTapBrowser kernel version)	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 (Safari kernel version)	V2.1.0 or later

Quick integration

JavaScript

Import the Web Co-streaming SDK.

<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>

The following example shows how to retrieve the list of 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 get the list of microphones.
<script type="text/javascript">
    function getMicrophones() {
        window.AlivcLivePush.AlivcLivePusher.getMicrophones().then(microphones => {
            console.log('Microphone list:',microphones);
        })
    }
</script>

//...
//... Other code
//...

<body>
  <a href="#" onclick="getMicrophones()">Get microphone list</a>
</body>

Import the Web Player SDK. This is required for regular viewers.

<head>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" />  // (Required) For the HTML5 player, you must reference this CSS file.
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js"></script>  // (Required) Import the JS file for the HTML5 player.
</head>

For more information, see Quick integration of the Web Player SDK.

TypeScript

For TypeScript projects, import the SDK as follows. This example uses React 16.8 or later.

Import the Web Co-streaming SDK.

useEffect(() => {
    // Import the Web Co-streaming SDK.
    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 SDK. For example, retrieve the list of microphones.

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

//...
//... Other code
//...

return (
   <div>
      <a href="#" onClick={getMicrophones}>Click to get microphone list</a>
    </div>
 );

Import the Web Player SDK. This is required for regular viewers.
```
useEffect(() => {
    //...
    // For the content, see the example for importing the Web Co-streaming SDK.
    //...
 }, []);
```
For more information, see Quick integration of the Web Player SDK.

References

Web Co-streaming SDK API reference

Web co-streaming development guide