本文介绍移动端 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。
• 微信小程序 SDK：通过内嵌 H5 观看页的微信小程序端进入直播间。详见接入方通过微信小程序观播 SDK 实现观众连麦。
• uni-app App：通过 uni-app 原生 web-view 组件内嵌 H5 观看页的 Android/iOS App，可参考uni-app App 内嵌 H5 页面观众连麦实现连麦。

前提条件 #

流程介绍 #

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

操作步骤 #

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

1. 申请连麦：观众点击申请连麦，等待主持人同意上麦申请。
   观众在申请发起前，可选择视频连麦或音频连麦。该选择仅与加入连麦时的摄像头开启状态有关，观众可在加入连麦后按需开启关闭摄像头。
   • 视频连麦：默认开启摄像头。
   • 音频连麦/语音连麦：默认不开启摄像头。
     
2. 加入连麦：主持人同意观众的上麦申请后，观众成功加入连麦。
   连麦观众可以拖动自己的摄像头窗口至页面的任意位置。即使主持人未开始直播，连麦观众也可以在播放器看到主持人端的视图画面，但全屏视图下连麦观众端不展示主持人与连麦观众的小窗口。
   
3. 结束连麦：观众需先点击自己的摄像头窗口，再选择断开连麦。
   

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

在微信小程序中，可以使用 web-view 组件将 H5 页面内嵌在微信小程序中，从而在小程序中展示外部网页的内容。接入前，请确认您已开通微信直播组件 live-player 的权限，且已集成微信小程序 SDK（使用 live-player 组件观播的方式），且已在项目的 app.json 文件中引入 WeUI 组件库。详见集成方法。

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

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

2. 创建一个新的 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,
          })
        },
            //...
        })
      

3. 创建一个新的 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 页面跳转至连麦页。
      

接入方通过 uni-app App 内嵌 H5 页面观众连麦 #

如果您使用 uni-app 开发移动端 App，并通过原生 web-view 组件内嵌企业直播 H5 观看页，您可通过以下两种方案实现连麦。

方案一：专属 SDK 接入（推荐）

使用企业直播提供的 uni web-view 专属 SDK 组件替换原生 web-view。详见集成 WebView SDK — uni web-view SDK。

方案二：通用接入

方案二保留 uni-app 原生 web-view 组件，通过宿主 App 监听 H5 观看页抛出的权限申请事件、调用系统运行时权限接口，再将授权结果回传观看页，从而在不改动 Web 观播 SDK 调用方式的前提下完成连麦权限适配。

1. 声明 Android 权限：在 uni-app 工程的 manifest.json 中声明连麦所需的 Android 权限。运行时申请不能代替 manifest.json 声明，两者必须同时配置。

   {
     "app-plus": {
       "distribute": {
         "android": {
           "permissions": [
             "<uses-permission android:name=\"android.permission.CAMERA\"/>",
             "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
             "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>"
           ]
         }
       }
     }
   }
   

   上述权限说明如下所示：
   • CAMERA：视频连麦所需的摄像头权限。
   • RECORD_AUDIO：音频、视频连麦所需的麦克风权限。
   • MODIFY_AUDIO_SETTINGS：连麦音频链路所需的音频设置权限。
2. 宿主监听权限申请并授权。以下为监听权限申请并授权的示例代码及其逻辑：
   观众在 H5 观看页发起连麦时，Web 观播 SDK 检测到当前运行在 uni-app 环境后，会通过 uni.postMessage 向宿主 App 抛出 action: 'requestPermissions' 事件。宿主 uni-app 页面在 <web-view @message> 回调中识别该事件，调用 plus.android.requestPermissions 申请系统权限，再通过 evalJS 向观看页派发 byte-live-webview-response 自定义事件将授权结果回传。

   说明

   event.detail.data 是 uni-app 批量缓冲的消息数组，用 .at(-1) 取最新一条。只有 action === 'requestPermissions' 的消息才需要处理，其余消息忽略即可。

   <template>
     <web-view :src="url" @message="onMessage" />
   </template>
   
   <script>
   export default {
     data() {
       return {
         url: 'https://your-page.example.com',
       };
     },
   
     methods: {
       onMessage(event) {
         const request = event.detail.data.at(-1);
   
         if (request.action !== 'requestPermissions') return;
   
         const permissions = request.payload.permissions;
   
         plus.android.requestPermissions(permissions, result => {
           this.replyToPage({
             namespace: 'byte-live',
             version: 1,
             type: 'response',
             id: request.id,
             action: request.action,
             ok: true,
             result: {
               permissions,
               granted: result.granted,
               deniedPresent: result.deniedPresent,
               deniedAlways: result.deniedAlways,
               ignored: false,
               platform: 'android',
             },
           });
         });
       },
   
       replyToPage(response) {
         const webView = this.$scope.$getAppWebview().children()[0];
   
         webView.evalJS(`
           window.dispatchEvent(
             new CustomEvent('byte-live-webview-response', {
               detail: ${JSON.stringify(response)}
             })
           );
         `);
       },
     },
   };
   </script>
   

常见问题 #

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

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

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