Web连麦互动SDK集成

通过阅读本文,您可以了解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

  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端连麦开发指南