通过阅读本文,您可以了解Web连麦互动SDK的集成方法。
注意事项
- 此功能是针对于Web连麦互动SDK集成。如果您的业务观众端没有连麦互动推流需求,请使用Web RTS推流SDK。 
- Web连麦互动需要的推播流地址和普通推播流地址有所不同,具体情况可参见连麦地址生成器。 
- 目前Web端推流(包括连麦互动推流和普通推流),只支持artc协议的推流地址。 
浏览器要求
Web连麦互动SDK能力需要浏览器支持,浏览器具体要求如下所示。
| 操作系统 | 浏览器 | 支持的最低版本 | SDK版本要求 | 
| Windows | Chrome | 63 | - | 
| Firefox | 62 | - | |
| Opera | 15 | - | |
| Edge | 79 | V2.0.3及以上 | |
| QQ浏览器 | 63(Chrome内核版本) | V2.1.0及以上 | |
| Mac | Chrome | 63 | - | 
| Safari | 11 | - | |
| Firefox | 62 | - | |
| Opera | 15 | - | |
| Edge | 79 | V2.0.3及以上 | |
| QQ浏览器 | 63(Chrome内核版本) | V2.1.0及以上 | |
| Android | Chrome | 63 | - | 
| Edge | 79 | V2.0.3及以上 | |
| 微信内置浏览器 | 7.0.9(微信版本) | - | |
| QQ浏览器 | 63(Chrome内核版本) | V2.1.0及以上 | |
| 华为系统浏览器 | 63(Chrome内核版本) | V2.1.0及以上 | |
| OPPO系统浏览器、一加系统浏览器 | 40.7.39.1(HeyTapBrowser内核版本) | V2.1.0及以上 | |
| iOS | Safari | 11 | - | 
| Edge | 79 | V2.0.3及以上 | |
| 微信内置浏览器 | 7.0.9(微信版本) | - | |
| 钉钉内置浏览器 | 11.2.5(钉钉版本) | - | |
| QQ浏览器 | 11(Safari内核版本) | V2.1.0及以上 | 
快速接入
JavaScript
- 引入Web连麦互动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>
- 使用方法,假设此处我们需要获取麦克风列表。 - <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> //定义方法获取麦克风列表 <script type="text/javascript"> function getMicrophones() { window.AlivcLivePush.AlivcLivePusher.getMicrophones().then(microphones => { console.log('麦克风列表:',microphones); }) } </script> //... //...其他代码 //... <body> <a href="#" onclick="getMicrophones()">获取麦克风列表</a> </body>
- 引入Web播放器SDK(普通观众需要)。 - <head> <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.15.2/skins/default/aliplayer-min.css" /> //(必须)H5模式播放器,需引用此css文件。 <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.15.2/aliplayer-h5-min.js"></script> //(必须)引入H5模式的js文件。 </head>- 详细信息可参见Web播放器快速接入。 
TypeScript
如果您的项目使用的是TypeScript,引入方式如下,这里我们拿React 16.8+举例。
- 引入Web连麦互动SDK。 - useEffect(() => { // 引入Web连麦互动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); }, []);
- 使用方法,假设此处我们需要获取麦克风列表。 - //定义方法获取麦克风列表 const getMicrophones = async () => { const microphones=await window.AlivcLivePush.AlivcLivePusher.getMicrophones(); console.log('麦克风列表:',microphones); } //... //...其他代码 //... return ( <div> <a href="#" onClick={getMicrophones}>点击获取麦克风列表</a> </div> );
- 引入Web播放器SDK(普通观众需要)。 - useEffect(() => { //... //内容参考引入Web连麦互动SDK //... }, []);- 详细信息可参见Web播放器快速接入。