通過閱讀本文,您可以瞭解Web連麥互動SDK的整合方法。
注意事項
此功能是針對於Web連麥互動SDK整合。如果您的業務觀眾端沒有連麥互動推流需求,請使用其他方式整合,詳情可參見SDK下載與發布記錄。
Web連麥互動需要的推播流地址和普通推播流地址有所不同,具體情況可參見連麥地址產生器。
瀏覽器要求
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(微信版本) | - | |
DingTalk內建瀏覽器 | 11.2.5(DingTalk版本) | - | |
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播放器快速接入。