移动端 H5 页面观众连麦

本文介绍移动端 H5 页面观众连麦的实现方案，从而提高观众的直播观看体验。

效果演示

功能介绍

企业直播支持通过以下方式实现移动端观众连麦：

• SaaS：通过移动端 H5 进入直播间。详见观众连麦。

  说明

  默认仅在观众的操作系统和浏览器符合以下要求时，可在移动端观看页展示连麦入口。如果您需强制在不符合要求观众的移动端观看页展示连麦入口，可以在移动端观看页地址中添加 useUserConnect 参数并将取值设置为 true。例如观看页地址为 https://live.byteoc.com/5628/267****，则添加该参数后的地址为 https://live.byteoc.com/5628/267****?useUserConnect="true"。

  • 操作系统：Android 10 以上或 iOS 14.3 以上。
  • 浏览器：Google Chrome（Android 版本 78.0 以上、iOS 版本 86.0.4240 以上）、Safari 14 以上或微信内嵌浏览器。
• Web SDK：通过集成 Web 观播 SDK 的移动端进入直播间。详见集成 Web 观播 SDK。
• 微信小程序：通过内嵌 H5 观看页的微信小程序端进入直播间。详见接入方通过微信小程序观播 SDK 实现观众连麦。

前提条件

• Saas
  您已开通专业版、旗舰版或定制版套餐。详见计费说明。
• Web SDK
  您已开通定制版套餐。详见计费说明。
• 微信小程序

  • 您已开通定制版套餐。详见计费说明。

  • 您已开通微信直播组件 live-player 的权限，详见申请开通 live-player。

  • 登录小程序开发者后台，在开发管理 > 开发设置 > 服务器域名中配置以下服务器域名白名单。
    

    • request合法域名：添加以下以 https 开头的域名。

      https://live.byteoc.com;
      https://mon.zijieapi.com;
      https://vod.bytedanceapi.com;
      https://common.rtc.volcvideo.com;
      https://common-hl.rtc.volcvideo.com;
      https://log.snssdk.com;
      

    • socket合法域名：添加以下以 wss 开头的域名。

      wss://frontier.snssdk.com;
      wss://ws.rtc.volcvideo.com;
      wss://ws-hl.rtc.volcvideo.com;
      wss://ws-ag-agsxxa.rtc.volcvideo.com;
      wss://ws-ag-aghbwh.rtc.volcvideo.com;
      wss://ws-ag-agsdqd.rtc.volcvideo.com;
      wss://ws-ag-agjsnj.rtc.volcvideo.com;
      wss://ws-ag-aggdsz.rtc.volcvideo.com;
      

  • 登录小程序开发者后台，在开发管理 > 开发设置 > 业务域名中按需配置业务域名，即观看页地址中的域名，例如 live.byteoc.com。

    1. 单击开始配置。
       
    2. 按照界面提示，完成业务域名的配置。
       

流程介绍

SaaS 和 Web SDK

有关主持人的操作，详见观众连麦。

微信小程序

有关主持人的操作，详见观众连麦。

操作步骤

观众通过 Saas 或 Web SDK 观看页加入连麦

1. 申请连麦：观众点击申请连麦，等待主持人同意上麦申请。
   观众在申请发起前，可选择视频连麦或音频连麦。该选择仅与加入连麦时的摄像头开启状态有关，观众可在加入连麦后按需开启关闭摄像头。

   • 视频连麦：默认开启摄像头。
   • 音频连麦/语音连麦：默认不开启摄像头。

   

2. 加入连麦：主持人同意观众的上麦申请后，观众成功加入连麦。
   连麦观众可以拖动自己的摄像头窗口至页面的任意位置。即使主持人未开始直播，连麦观众也可以在播放器看到主持人端的视图画面，但全屏视图下连麦观众端不展示主持人与连麦观众的小窗口。
   

3. 结束连麦：观众需先点击自己的摄像头窗口，再选择断开连麦。
   

接入方通过微信小程序观播 SDK 实现观众连麦

在微信小程序中，可以使用 web-view 组件将 H5 页面内嵌在微信小程序中，从而在小程序中展示外部网页的内容。

1. 下载 SDK 压缩包，解压缩至您自己的项目目录下。
   

   

   volc-mini-sdk-v0.0.5.zip

   未知大小

   
   
   SDK 文件夹的结构如下：

   |volc-mini-sdk
   |---lib/         SDK 依赖文件
   |---assets/      静态文件索引
   |---components/  组件文件夹
   |---|---chat/    聊天组件
   |---|---player/  播放器组件
   |---|---volc-live-portrait  竖屏直播间整体组件
   |---|---connect  连麦组件
   |---index.js     初始化模块
   |---store/       数据缓存目录
   

2. SDK 组件内部使用了微信官方提供的 UI 库 WeUI，因此您需要在项目的 app.json 文件中添加以下代码引入 WeUI 组件库：

   "useExtendedLib": {
       "weui": true
   }
   

3. 在项目的 app.json 文件中引入竖屏直播间整体组件或连麦组件，示例代码如下：

   "usingComponents": {
       "volc-live-portrait": "./volc-mini-sdk/components/volc-live-portrait/volc-live-portrait", // 引入竖屏直播间整体组件
       "connect": "./volc-mini-sdk/components/connect/connect", // 引入连麦组件
    }
   

4. 创建一个新的 page 作为观看页，并在 .wxml 和 .js 文件中完成以下操作：

   1. 在 .wxml 文件中，创建 web-view 组件。示例代码如下：

      <web-view src="{{finalUrl}}"></web-view>
      

   2. 在 .js 文件中，指定直播间的 H5 页面。示例代码如下：

      Page({
        /**
         * 页面的初始数据
         */
        data: {
          finalUrl: '',
        },
        onLoad(e) {
          const liveUrl = 'https://DomainName/xxx/xxx'; // 直播间的观看页地址
          const connectPageUrl  = '/pages/connect/connect'; // 小程序连麦页的地址
          const finalUrl = `${liveUrl}?voiceChatRedirect=${connectPageUrl}`; // 直播间的 H5 页面地址
          this.setData({
              finalUrl,
          })
        },
            //...
        )}
      

5. 创建一个新的 page 作为连麦页，并在 .wxml 和 .js 文件中完成以下操作：

   1. 在 .wxml 文件中，定义该页面包含的组件，即竖屏直播间整体组件或连麦组件。示例代码如下：

      <view>
         // 竖屏直播间整体组件
        <volc-live-portrait /> 
        // 连麦组件
        <connect />
      </view>
      

   2. 在 .js 文件的 onLoad 方法中，初始化微信小程序 SDK。示例代码如下：

      import volc from './volc-mini-sdk/index';
      Page({
        data: {},
        async onLoad(e) {
          // 获取跳转至连麦页时携带的参数，即直播间的活动 ID、用户 ID、用户昵称
          // 如果观众未在直播间的 H5 页面登录，则在跳转至连麦页时不会携带 userId 和 userName 参数，因此无法获取 userId 和 userName
          let {activityId ,userId, userName } = e;
          
           if(!userId || !userName){
              // 如果无法通过跳转至连麦页时携带的参数获取 userId 和 userName，你需要自行定义用户信息并将用户信息传入 getMode2token 方法
            { userId ,userName} = this.getCustomUser(); // 您需要自行实现该方法
          
          // 获取自定义模式（mode=2）时的授权 Token
          const token = await this.getMode2token(activityId ,userId, userName);
          
          // 初始化 SDK
          await initSDK(activityId,token);
          
        },
        async getMode2token(activityId ,userId, userName){
            // 调用 GetSDKTokenAPI 接口获取授权 Token
            const token = await GetSDKTokenAPI(activityId ,userId, userName);
            return token;
        }，
        async initSDK(){
            // 页面加载时，调用 init 方法初始化直播间
           const res = await volc.init({
              activityId: activityId,
              token: token,
              mode: 2,
              autoConnect: true, // 初始化完成后，自动弹出语音连麦或视频连麦选项弹窗
           });
          if (!res) {
            wx.showToast({
              title: '直播间信息错误',
              icon: 'error'
            });
          }
        },
        
        onUnload() {
          // 页面卸载时，调用 destroy 方法销毁直播间
          volc.destroy();
        }
      
      })
      

   在主持人开始观众连麦后，直播间出现连麦按钮，如下图所示。观众点击连麦按钮后，即可从 H5 页面跳转至连麦页。

   

常见问题

观众可以通过我自有账号系统中的用户身份参与连麦吗？

可以。
您可以通过以下方式实现该目的：

• 在开始直播前，设置直播间的观看限制为自定义或 OAuth 2.0。观众在 H5 观看页登录直播间后，即可以您自有账号系统中的用户身份参与连麦。
• 如果观众未在 H5 观看页登录直播间，您可以在初始化微信小程序 SDK 时，自行定义用户信息，即用户在您自有账号系统中的 ID 和昵称，并将用户信息传入 getMode2token 方法。详见本文初始化微信小程序 SDK 的示例代码。