更新记录

1.0.0（2025-08-30）

1.0.0

• 实现基础美颜，高级美颜，高级美型功能；
• 实现相机美颜和图片美颜功能；

平台兼容性

uni-app(4.07)

uni-app x(4.07)

bsf-ali-queen

阿里云美颜 SDK uni-app 插件，基于 UTS 技术实现，提供实时美颜、虚拟化妆、背景虚化等视频处理能力。

📋 功能特性

• 🎨 实时美颜处理 - 磨皮、美白、红润等基础美颜功能
• 🔍 高级美颜与美型 - 高级美颜与美型功能的视线
• 📱 跨平台支持 - iOS、Android 双端适配
• ⚡ 高性能 - 基于原生 SDK，确保流畅的实时处理体验

🛠 技术架构

• UTS 层: 提供统一的 TypeScript 接口
• iOS 层: 基于 Queen.framework，使用 Objective-C/Swift
• Android 层: 基于阿里云 Queen SDK，使用 Kotlin
• 跨平台: 支持 uni-app Vue2/Vue3 项目

📦 安装配置

1. 添加插件

请登录阿里云控制购买并申请美颜功能，获取到下载证书和参数。

2. 下载插件

将插件放置在项目的 uni_modules 目录下：

your-project/
├── uni_modules/
│   └── bsf-ali-queen/
└── ...

3. 配置插件

安卓端配置：

将证书文件放置到到插件app-android/assets目录下，

配置app-android/AndroidManifest.xml：

 <application>
  <meta-data
  android:name="com.aliyun.alivc_license.licensekey" 
  android:value="xxxxx"/> 
  <meta-data
  android:name="com.aliyun.alivc_license.licensefile"
  android:value="xxxx.crt"/> 

 </application>

IOS端配置：

将证书文件放置到到插件app-ios/Resources目录下，

初始化的时候传入密钥和证书文件名

3. SDK 资源配置

确保以下资源文件已正确配置：

• iOS: queen.framework 及 queen-ios.Bundle 资源包
• Android: Queen SDK 相关资源文件

🚀 快速开始

基础使用

<template>
  <view class="container">
    <!-- 美颜相机组件 -->
    <bsf-queue-camera 
      ref="camera"
      @onTakePhoto="handleTakePhoto"
      @onGetFrame="handleGetFrame"
      @onPermissionDeny="handlePermissionDeny"
      @onPermissionPermit="handlePermissionPermit"
      @onBeautyImage="handleBeautyImage"
    />

    <!-- 控制按钮 -->
    <view class="controls">
      <button @click="takePhoto">拍照</button>
      <button @click="toggleCamera">切换摄像头</button>
      <button @click="toggleBeauty">开关美颜</button>
      <button @click="toggleTorch">开关闪光灯</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cameraRef: null
    }
  },
  onReady() {
    this.cameraRef = this.$refs.camera
  },
  methods: {
    // 拍照
    takePhoto() {
      this.cameraRef?.takePhoto()
    },

    // 切换摄像头
    toggleCamera() {
      this.cameraRef?.toggleCamera()
    },

    // 开关美颜
    toggleBeauty() {
      this.cameraRef?.toggleBeauty()
    },

    // 开关闪光灯
    toggleTorch() {
      this.cameraRef?.toggleTorch()
    },

    // 拍照回调
    handleTakePhoto(e) {
      const { base64 } = e.detail
      console.log('拍照结果:', base64)
      // 处理拍照结果
    },

    // 实时帧数据回调
    handleGetFrame(e) {
      const { base64 } = e.detail
      // 处理实时帧数据
    },

    // 权限被拒绝
    handlePermissionDeny() {
      console.log('相机权限被拒绝')
    },

    // 权限已授予
    handlePermissionPermit() {
      console.log('相机权限已授予')
    },

    // 图片美颜处理结果
    handleBeautyImage(e) {
      const { base64 } = e.detail
      console.log('美颜处理结果:', base64)
    }
  }
}
</script>

📚 API 文档

组件事件

组件方法

基础控制方法

toggleCamera()

切换前后摄像头

this.$refs.camera.toggleCamera()

toggleBeauty()

开关美颜功能

this.$refs.camera.toggleBeauty()

toggleTorch()

开关闪光灯

this.$refs.camera.toggleTorch()

takePhoto()

拍照

this.$refs.camera.takePhoto()

stopCamera()

停止相机

this.$refs.camera.stopCamera()

destoryCamera()

销毁相机资源

this.$refs.camera.destoryCamera()

实时帧处理方法

startFrame()

开始获取实时帧数据

this.$refs.camera.startFrame()

stopFrame()

停止获取实时帧数据

this.$refs.camera.stopFrame()

美颜参数设置方法

enableBeautyType(type, enable, mode)

启用/禁用特定美颜类型

参数:

• type (number): 美颜类型
• enable (boolean): 是否启用
• mode (number): 模式参数，默认为 0

// 启用磨皮
this.$refs.camera.enableBeautyType(1, true, 0)

// 禁用美白
this.$refs.camera.enableBeautyType(2, false)

setBeautyParam(type, value)

设置美颜参数值

参数:

• type (number): 美颜参数类型
• value (number): 参数值 (0.0 - 1.0)

// 设置磨皮强度为 0.8
this.$refs.camera.setBeautyParam(1, 0.8)

// 设置美白强度为 0.6
this.$refs.camera.setBeautyParam(2, 0.6)

updateFaceShape(type, value)

更新面部塑形参数

参数:

• type (number): 塑形类型
• value (number): 塑形强度 (0.0 - 1.0)

// 设置瘦脸强度
this.$refs.camera.updateFaceShape(1, 0.5)

// 设置大眼强度
this.$refs.camera.updateFaceShape(2, 0.3)

beautifyImage(filePath)

对指定图片进行美颜处理

参数:

• filePath (string): 图片文件路径

// 处理本地图片
this.$refs.camera.beautifyImage('/path/to/image.jpg')

🎯 美颜参数说明

参数映射表

类型参数

模型参数

美颜参数

美型参数

安卓美颜失败代码

int QUEEN_OK = 0; int QUEEN_FAIL = -1; int QUEEN_INVALID_HANDLE = -2; int QUEEN_INVALID_PARAMS = -3; int QUEEN_TIMEOUT = -4; int QUEEN_FILE_ERROR = -5; int QUEEN_FILE_NOT_EXIST = -6; int QUEEN_UNZIP_ERROR = -7; int QUEEN_NET_ERROR = -8; int QUEEN_INVALID_LICENSE = -9; int QUEEN_NO_EFFECT = -10;

💡 使用示例

1. 实时美颜相机

export default {
  onReady() {
    const camera = this.$refs.camera

    // 启用基础美颜
    camera.enableBeautyType(1, true) // 磨皮
    camera.enableBeautyType(2, true) // 美白

    // 设置美颜强度
    camera.setBeautyParam(1, 0.8) // 磨皮强度
    camera.setBeautyParam(2, 0.6) // 美白强度

    // 设置面部塑形
    camera.updateFaceShape(1, 0.3) // 轻微瘦脸
    camera.updateFaceShape(2, 0.2) // 轻微大眼
  }
}

2. 图片美颜处理

export default {
  methods: {
    async processImage() {
      // 选择图片
      uni.chooseImage({
        count: 1,
        success: (res) => {
          const imagePath = res.tempFilePaths[0]

          // 对图片进行美颜处理
          this.$refs.camera.beautifyImage(imagePath)
        }
      })
    },

    handleBeautyImage(e) {
      const { base64 } = e.detail

      // 处理美颜后的图片
      console.log('美颜处理完成:', base64)

      // 可以保存到相册或显示
      // ...
    }
  }
}

3. 实时帧数据处理

export default {
  methods: {
    startVideoProcess() {
      // 开始获取实时帧
      this.$refs.camera.startFrame()
    },

    stopVideoProcess() {
      // 停止获取实时帧
      this.$refs.camera.stopFrame()
    },

    handleGetFrame(e) {
      const { base64 } = e.detail

      // 处理实时帧数据，可以用于:
      // 1. 实时滤镜效果
      // 2. 人脸识别
      // 3. 手势识别
      // 4. 其他 AI 分析
    }
  }
}

⚠️ 注意事项

1. 性能优化

   • 实时美颜处理对性能要求较高，建议在中高端设备上使用
   • 可根据设备性能调整美颜参数，避免过度处理

2. 权限处理

   • 使用前确保已获得相机权限
   • 处理权限被拒绝的情况，引导用户手动开启

3. 资源管理

   • 及时调用 destoryCamera() 释放资源
   • 避免内存泄漏

4. 兼容性

   • iOS 最低支持版本: iOS 11.0
   • Android 最低支持版本: API Level 21 (Android 5.0)