BRTM uni-app 插件

1. 插件配置

1.1. 创建应用，获取 AppID

登录百家云后台，进入 BRTC 频道，点击对应的 App 相关的配置信息，即可以获取对应 App 的应用密钥（key）和 AppID。

1.2. 导入 js 封装层代码

HBuilderX 云端依赖插件后，下载 JS 封装层代码。链接见百家云 BRTC 官方文档。

放入到工程根目录下，具体如下图：

1.3. 示例代码

请移步至百家云 BRTC 官方文档 获取

2. API 常用接口介绍

2.1. API 完整文档

2.2. 注意事项

插件是 uni-app 原生插件，使用前请了解 uni-app 原生插件使用方法，官方教程：uni 原生插件使用教程

使用视频功能时，页面必须使用 .nvue 文件构建。因为扩展的 component 只能在 .nvue 文件中使用，不需要引入即可直接使用。目前的插件中包含扩展 component，用来显示视频流。

2.3. 初始化

import BliveSdk from '@/BliveSdk/lib/index';

this.bliveInstance = BliveSdk.createInstance();

2.4. 进入房间

import { BLiveRoleType } from '@/BliveSdk/lib/BliveDefines';

// 组装进房参数
const params = {
  sdkAppId: "xxxxxxxx";     // Please replace with your own sdkAppId
  userId: "123456";         // Please replace with your own userid
  roomId: "123456";         // Please replace with your own room number 
  userSig: "xxxxxx";        // Please replace with your own userSig
  roleType: 0;				// 0: Audience，1: Anchor
  userNumber: "123456";     // Please replace with your own user number
};
this.bliveInstance.enterRoom(param);

2.5. 开启预览

<template>
  <div>
    <view class="brtc-video-view" id='root'>
      <bliveLocalView :viewId="userId" style="height: 403.84rpx;flex: 1;"></bliveLocalView>
    </view>
  </div>
</template>

<script>
  import BliveLocalView from '@/BliveSdk/view/BliveLocalView';
  import BliveSdk from '@/BliveSdk/lib/index';

  export default {
    components: {
      bliveLocalView: BliveLocalView,
    },
    data() {
      return {
        bliveInstance: BliveSdk.createInstance(),
        userId: '123456'
      }
    },
    methods: {
      startLocalPreview() {
        // 需要在登入房间之后才能开启视频通话
        const isFrontCamera = true;
        this.bliveInstance.startLocalPreview(this.isFrontCamera, this.userId);
      }
    }
  }
</script>

2.6. 拉取其他用户音视频

<template>
  <div>
    <view class="brtc-video-view" id='root'>
      <bliveRemoteView v-if="remoteUserId" :userId="remoteUserId" :viewId="remoteUserId" style="height: 403.84rpx;flex: 1"></bliveRemoteView>
    </view>
  </div>
</template>

<script>
  import BliveLocalView from '@/BliveSdk/view/BliveLocalView';
  import BliveSdk from '@/BliveSdk/lib/index';
  import { BRTCVideoStreamType } from '@/BliveSdk/lib/BliveDefines';

  export default {
    components: {
      bliveRemoteView: BliveRemoteView,
    },
    data() {
      return {
        bliveInstance: BliveSdk.createInstance(),
        remoteUserId: '123456'
      }
    },
    methods: {
      startRemoteView() {
        // 拉取远端音视频
        this.bliveInstance.startRemoteView(this.remoteUserId, BRTCVideoStreamType.BRTCVideoStreamTypeBig, this.remoteUserId);
      }
    }
  }
</script>

2.7. 退出房间

exitRoom() {
  try {
    this.stopLocalPreview();
    this.stopRemoteView();
    this.stopLocalAudio();
    this.bliveInstance.exitRoom();
    this.remoteUserId = '';
    this.handleUninstallEvents();
  } catch (e) {
    // TODO handle the exception
  }
},

2.8. 销毁实例

destroyInstance() {
  if (this.bliveInstance) {
    BliveSdk.destroyInstance();
    this.bliveInstance = null;
  }
}

2.9. 监听事件

2.9.1. 进房事件

this.bliveInstance.on("onEnterRoom", (result) => {
  if (result > 0) {
    console.log(`进房成功，耗时: ${result}ms`);
  }
});

2.9.2. 退房事件

this.bliveInstance.on("onExitRoom", (reason) => {
  console.log(`退房 ${reason}`);
});

2.9.3. 远端用户加入事件

this.bliveInstance.on("onRemoteUserEnterRoom", (userId) => {
  console.log(`远端进房: userId = ${userId}`);
});

2.9.4. 远端用户离开事件

this.bliveInstance.on("onRemoteUserLeaveRoom", (userId) => {
  console.log(`远端离房: userId = ${userId}. reason = ${reason}`);
});

2.9.5. 远端用户发布视频事件

this.bliveInstance.on("onUserVideoAvailable", (res) => {
  console.log('onUserAudioAvailable = ', res);
});

2.9.5. 远端用户发布音频事件

this.bliveInstance.on("onUserAudioAvailable", (res) => {
  const { userId, available } = res;
  if (userId && available) {
    this.remoteUserId = userId;
  }
});