You need to enable JavaScript to run this app.
导航
移动端 H5 页面观众连麦
最近更新时间:2024.07.10 18:30:23首次发布时间:2023.10.11 14:53:49

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

注意

如需通过微信小程序观播 SDK 实现观众连麦,确保您具备微信小程序开发能力。

效果演示

图片

功能介绍

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

  • 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 的示例代码。