全部產品
Search
文件中心

ApsaraVideo Live:Web連麥互動SDK整合

更新時間:Jul 19, 2024

通過閱讀本文,您可以瞭解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

  1. 引入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>
  2. 使用方法,假設此處我們需要擷取麥克風列表。

    <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>
  3. 引入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+舉例。

  1. 引入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);
    
     }, []);
  2. 使用方法,假設此處我們需要擷取麥克風列表。

    //定義方法擷取麥克風列表 
    const getMicrophones = async () => {
        const microphones=await window.AlivcLivePush.AlivcLivePusher.getMicrophones();
        console.log('麥克風列表:',microphones);
    }
    
    //...
    //...其他代碼
    //...
    
    return (
       <div>
          <a href="#" onClick={getMicrophones}>點擊擷取麥克風列表</a>
        </div>
     );
  3. 引入Web播放器SDK(一般觀眾需要)。

    useEffect(() => {
        //...
        //內容參考引入Web連麥互動SDK
        //...
     }, []);

    詳細資料可參見Web播放器快速接入

相關文檔

Web連麥互動SDK介面說明

Web端連麥開發指南