一分钟集成 SDK

编辑文档更新于 2025-03-26 08:13:14

AndroidiOSWebuni-app

本文主要介绍如何集成 Blive uni-app 插件到到您的项目中。

环境要求

HBuilder X 最新版本，建议 3.8.12 或以上版本

前提条件

您已注册 BRTC 账号
您已经通过[DCloud 插件市场]购买或下载了 Blive uni-app 插件
在DCloud 开发者中心已经注册，并成功登录 HBuilder X 编辑器

集成步骤

一、插件配置

您可以通过本地插件依赖或云端依赖方式来集成插件。访问Blive uni-app 插件页面来购买（0元）或下载。

A. 本地插件

将下载的插件包，解压到您的工程项目根目录下的 nativeplugins文件夹下，如果没有这个文件夹需要手动创建。然后在您的工程的 manifest.json 中的 App原生插件配置 中选择本地插件，如下图所示：

本地插件

B. 云端插件

您也可以通过云端插件来集成，访问 Blive uni-app 插件购买时，页面会引导您和您的应用进行绑定，然后在您的工程的 manifest.json 中的 App原生插件配置 中选择云端插件，如下图所示：

云端插件

两种方式均可，但通常都是需要进行云打包的。

二、导入 JS 封装层

推荐您直接将 Blive uni-app demo 中的 JS 封装层导入到您的工程来使用。JS 封装层封装了访问 uni-app 原生插件的各种方法及回调，极大地简化了您的开发体验。关于 Blive uni-app demo 推荐您参考一分钟跑通 DEMO中的介绍。

JS封装层

三、导入相关模块并编码

您可以参考一分钟跑通 DEMO中 demo 程序的代码，导入必要的模块，开始调用 JS 封装层为您提供的接口，为您的应用程序集成音视频能力。

例如：

导入模块

import permision from "@/BliveSdk/permission.js";
import BliveSdk from '@/BliveSdk/lib/index';
import { BRTCVideoStreamType, BLiveRoleType } from '@/BliveSdk/lib/BliveDefines';
import BliveLocalView from '@/BliveSdk/view/BliveLocalView';
import BliveRemoteView from '@/BliveSdk/view/BliveRemoteView';
import BliveMixStreamView from '@/BliveSdk/view/BliveMixStreamView';

创建实例

this.bliveInstance = BliveSdk.createInstance();

监听回调

this.bliveInstance.on(...)

进入房间

let param = { 
    roomId: this.roomId, 
    userId: this.userId, 
    sdkAppId: this.sdkAppId, 
    userSig: this.userSig,
    roleType: this.roleType,
    userNumber: this.userNumber 
};
this.bliveInstance.enterRoom(param);

播放合流

let mixStreamInfo = {
    viewId: this.mixStreamId,
    mixStreamId: this.mixStreamId,
    videoOn: true,
    audioOn: true
};
this.bliveInstance.playMixStream(mixStreamInfo);

主播开启服务器合流

const mixStreamConfig = {
    mixStreamId: this.transcodeTaskId,
    customData: "Baijiayun Blive uni-app SDK",
    liveLayoutMode: 1, // 1: Default, 2: Gallery画廊布局, 3: Speech演讲布局, 4: Floating悬浮球布局
    forceMix: true,
    layoutCanvasBean: {
        width: 720,
        height: 1280,
        isPortrait: true,
        color: "#000000",
        fitMode: 0, // 0: Fit, 1: AspectFill裁剪, 2: Fill拉伸填充
        layoutVideoBean: {
            useQp: true,
            codec: "h264",
            bitrate: 1000,
            fps: 15,
            gop: 2
        }
    },
    // 实际应用中，根据需要，将一个或多个需要合流的远端用户信息依次创建，排列好布局传给 SDK
    streamCellModel: [
        {
            cellName: this.userId,
            x: 0,
            y: 0,
            width: 720,
            height: 1280,
            zOrder: 1,
            fitMode: 0, // 同上
            color: "#ff0000",
            streamIdentifier: {
                type: "brtc-vloud",
                data: {
                    userId: this.userId
                }
            }
        },
        ...(this.remoteUserId ? [{
            cellName: this.remoteUserId,
            x: 0,
            y: 0,
            width: 360,
            height: 180,
            zOrder: 2,
            fitMode: 0, // 同上
            color: "#ff0000",
            streamIdentifier: {
                type: "brtc-vloud",
                data: {
                    userId: this.remoteUserId
                }
            }
        }] : [])
    ]
};
if (this.bliveInstance) {
    this.bliveInstance.startMixTranscode(JSON.stringify(mixStreamConfig));
}

动态切换角色

this.bliveInstance.switchRole(this.currentRoleType === 1 ? 
                BLiveRoleType.BLiveRoleAnchor : BLiveRoleType.BLiveRoleAudience);

更多的功能需要您的探索，可以结合 demo 程序以及官网开发者中心的 API 接口文档来进行编码。