Integrate the Web Co-streaming SDK-ApsaraVideo Live(LIVE)-阿里云帮助中心

Notes

Important

If your viewers do not need to co-stream, use the Web RTS Push SDK instead.
Web co-streaming requires different ingest and streaming URLs than regular streaming. For more information, see Co-streaming URL generator.
web stream ingest, including co-streaming and regular ingest, supports only ingest URLs that use the ARTC protocol.
For web co-streaming, use the Web Co-streaming SDK (imp-web-live-push), available at https://g.alicdn.com/apsara-media-box/imp-web-live-push/6.4.9/alivc-live-push.js. Do not use imp-web-rtc: it is intended for general-purpose ARTC scenarios, is not published on the standard CDN distribution path, and does not include the co-streaming-specific APIs.

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

Before you start co-streaming, complete Token authentication:

On the server side, call the CreateLiveMessageApp operation to obtain the AppId, AppKey, and AppSign of your messaging application.
On the server side, call the GetMessageToken operation to obtain an AccessToken. The following parameters are required: AppId, DeviceId, DeviceType (ios, android, web, or pc), and UserId. The returned AccessToken includes endpoints (the IM connection address), appId, and a JWT token.
On the client side, pass the AccessToken and AppSign to joinChannel as the authInfo parameter to complete authentication.

Important

AppSign is required and must not be filtered out on the server side. If AppSign is missing, the SDK throws an "authInfo is empty" error.

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