Integrate the Web Co-streaming SDK into your web application to enable real-time co-streaming capabilities.
Notes
-
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.
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.