Android：Uniapp平台中接入即构RTC+相芯美颜

news2024/11/13 12:30:23

0 前言

前阵子使用Uniapp平台开发了一个跨平台app，并且接入了即构RTC后，今天想进一步丰富app的直播功能。之前有相芯美颜的开发经验，打算将相芯美颜接入即构RTC.

**在DCloud插件市场找到了在即构RTC接入相芯美颜插件，https://ext.dcloud.net.cn/plugin?id=18718, 按照里面的readme教程完成接入，**为了让后来者少走弯路，将接入过程以及原理记录到本文中，欢迎大家评论讨论。最终实现的效果如下：
在这里插入图片描述

1 配置准备

先加入在DCloud插件市场中加入两个插件, 分别点击如下两个链接:

  1. 即构RTC接入相芯美颜插件
  2. ZEGO 即构实时音视频 SDK

然后分别点击"点击购买（0元）for 云打包", 如下图所示：

在这里插入图片描述

接下来在HBuilder的App原生插件上加入以上两个插件，如下所示：

在这里插入图片描述

2 代码开发

本文基于即构RTC接入相芯美颜插件的示例项目开发，前往即构RTC接入相芯美颜插件官网下载示例项目ZIP，如下图所示：

在这里插入图片描述

2.1 即构与相芯秘钥配置

打开pages/KeyCenter.js, 填写以下内容：

let appID = ;
let userID =   
let appSign =  
let token = 
let authpack =

以上各个配置参数通过如下途径获取：

  1. appID：打开即构后台管理https://console.zego.im/dashboard，可以得到appID, 形如123456789。
  2. userID：随意定义的字符串，作为当前登录用户的id
  3. appSign：旧的鉴权方式需要使用，建议参考https://doc-zh.zego.im/faq/token_upgrade 切换到最新的鉴权。用户可以从https://console.zego.im/dashboard 获取appSign，注意以后不再提供appSign支持。
  4. token：最新的鉴权方案，参考这里https://doc-zh.zego.im/faq/token_upgrade
  5. authpack：由相芯对接工作人员提供生成代码，可以运行保存下来。相芯提供类似如下代码：
public class authpack {
    public static int sha1_32(byte[] buf){int ret=0;try{byte[] digest=MessageDigest.getInstance("SHA1").digest(buf);return ((int)(digest[0]&0xff)<<24)+((int)(digest[1]&0xff)<<16)+((int)(digest[2]&0xff)<<8)+((int)(digest[3]&0xff)<<0);}catch(Exception e){}return ret;}
    public static byte[] A(){
        byte[] buf=new byte[1266];
        int i=0;
        for(i=-61;i<-59;i++){ buf[0]=(byte)i; if(sha1_32(buf)==-1001144934){break;} }
        //-------------------//
        ...此处重复格式代码略....
        //------------------//
        for(i=80;i<88;i++){ buf[1265]=(byte)i; if(sha1_32(buf)==382609747){break;} }
            return buf;
        }
}

得到上面代码后，调用authpack.A()得到byte[]对象，将数组里面的值打印出来。得到类似如下数据，直接复制出来，设置给authpack。

[-61, -114, -2, -31, -43, 62, -112, -87, -120, 81, -93, 78, -55, -25, -20, 44, -29, -100, -98, 35, 112, -
	94, 58, 67, 57, -21, 59, -110, 56, -56, -73, -118, 57, -48, -9, -83, 80, 121, 58, 124, -107, -53, 38, -106, -58,
	-85, 35, -39, 61, 119, -54, 31, 69, -95, 88, -16, 35, -18, 74, 20, -18, 15, 110, 93, -80, -44, 10, -12, 68, -59,
	-108, 110, -83, -13, -34, -80, -67, -105, 55, 74, 105, 14, -36,.................]

2.2 开启美颜

打开pages/index/index.nvue引入如下几个库：

import ZGFUBeautyWrapper from "@/components/Zego-FUBeautyWrapper/lib/ZGFUBeautyWrapper";
import ZegoFU from "@/components/Zego-FUBeautyWrapper/ZegoFU";
import FaceBeautyEnum from "@/components/Zego-FUBeautyWrapper/FaceBeautyEnum";

接下来开启美颜

//初始化美颜相关操作
let self = this;
let authpack = KeyCenter.getAuthPack();
ZegoFU.initZgAndRegisterFu(authpack, function(succ, msg) {
    self.initReady = succ;
    if (!succ) {
        console.log(msg)
    } else {
        console.log("已完成必要的SDK初始化，注意后面释放RTC引擎的同时，也要关闭美颜！！！")
        console.log("一切ready，接下来可以登录房间...")
    }
});

一切ready后，就可以调用相芯美颜了，相芯美颜的调用主要关注3个地方：美颜类型、美颜名称、美颜强度。美颜类型主要有3个：美肤、美肤、滤镜，每个美颜类型下有不同的美颜方法如：瘦脸、美牙等。可以通过如下方式实现：

//切换美肤、美型、滤镜tab
onClkFuTab(idx) { 
    this.fuSelIdx = idx;
    if (idx == 0) {
        this.curFuList = FaceBeautyEnum.skinList;
        this.fuIsFilter = false;
    } else if (idx == 1) {
        this.curFuList = FaceBeautyEnum.shapeList;
        this.fuIsFilter = false;
    } else {
        this.curFuList = FaceBeautyEnum.filterList;
        this.fuIsFilter = true;
    }
}
//设置美颜名称 
setFuParam(fuEnName, fuCnName) { 
    this.fuSelCnName = fuCnName;
    this.fuSelEnName = fuEnName; 
}
//拖拉条设置美颜强度
sliderChange(e) {
    let v = e.detail.value / 100.0; 
    if (v >= 0 && v <= 1)
        ZegoFU.setFUParam(this.fuSelEnName, v, this.fuIsFilter).then(function(c) {
            console.log(this.fuSelEnName, v, c, this.fuIsFilter ? "setFilter" : "updateParamIntensity")
        })
    else {
        console.log("无效值，过滤" + c);
    }
}

2.3 关闭美颜

最后记得，在不使用美颜的时候要记得关闭美颜。防止出现绑定美颜异常。尤其是在即构RTC引擎被destroy时：

// 销毁引擎
destroyEngine() {
    this.appendActionInfo("Destroy Engine");
    this.logoutRoom(this.roomID);
    ZegoExpressEngine.destroyEngine();
    this.engine = null
    /**
     * 记得要关闭美颜引擎
     **/
    ZGFUBeautyWrapper.closeBeauty().then(function(code) {
        console.log("closeBeauty " + code)
    })
},

3 Native层相芯美颜接入即构RTC的基本原理

美颜可以看成是一种自定义的图像处理算法，即构RTC接入自定义图像处理流程如下：

在这里插入图片描述

具体来说，使用即构RTC的setCustomVideoProcessHandler函数，传入IZegoCustomVideoProcessHandler对象，该对象里面onCapturedUnprocessedTextureData函数传入的是当前摄像头采集的纹理ID(可以理解为opengl中的纹理id)，返回的是用户自定义算法处理完成后的纹理id。参考示例如下：

// 自定义前处理为示例
// 回调方法获取原始数据
// 回调处理
// Effect 初始化反初始化在 Express 视频前处理开始停止回调里
express.setCustomVideoProcessHandler(new IZegoCustomVideoProcessHandler() {
    @Override
    public void onStart(ZegoPublishChannel channel) {
        effects.initEnv(720, 1280);
    }

    // 一定要反初始化，否则会造成内存泄露
    @Override
    public void onStop(ZegoPublishChannel channel) {
        effects.uninitEnv(); 
    }

    // 回调方法获取原始数据 texture
    @Override
    public void onCapturedUnprocessedTextureData(int textureID, int width, int height, long referenceTimeMillisecond, ZegoPublishChannel channel) {

        ZegoEffectsVideoFrameParam param = new ZegoEffectsVideoFrameParam();
        param.format = ZegoEffectsVideoFrameFormat.RGBA32;
        param.width = width;
        param.height = height;

        // 自定义前处理：此处使用 ZEGO Effects SDK
        int processedTextureID = effects.processTexture(textureID, param);

        // 将处理后的 buffer 发回 ZEGO Express SDK 里
        express.sendCustomVideoProcessedTextureData(processedTextureID, width, height, referenceTimeMillisecond);
    }
}

4 结尾

本文参考了DCloud中即构RTC接入相芯美颜插件的示例工程，里面提供了调用细节代码，读者可以多多挖掘，尤其是components/Zego-FUBeautyWrapper里的Uniapp调用封装，可以拿来借鉴相关思路扩展到其他类似项目中

5 结尾

结尾贴上插件链接，感兴趣的朋友可以自行下载体验：
最后附上本文参考的相关资料：

  • 即构RTC接入相芯美颜插件: https://ext.dcloud.net.cn/plugin?id=18718
  • ZEGO 即构实时音视频 SDK：https://ext.dcloud.net.cn/plugin?id=3617
  • 即构RTC接入美颜：https://doc-zh.zego.im/article/11257
  • 即构RTC-uniapp端：https://doc-zh.zego.im/article/7775

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1983608.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Golang | Leetcode Golang题解之第324题摆动排序II

Golang | Leetcode Golang题解之第324题摆动排序II

题目&#xff1a; 题解&#xff1a; func wiggleSort(nums []int) {n : len(nums)x : (n 1) / 2target : quickSelect(nums, x-1)transAddress : func(i int) int { return (2*n - 2*i - 1) % (n | 1) }for k, i, j : 0, 0, n-1; k < j; k {tk : transAddress(k)if nums[t…
阅读更多...
STM32之GPIO（General Purpose Input/Output，通用型输入输出）

STM32之GPIO（General Purpose Input/Output，通用型输入输出）

文章目录 前言一、GPIO简介二、GPIO结构2.1 GPIO基本结构2.2 GPIO位结构2.2.1 输入部分2.2.1 输出部分 四、GPIO模式4.1 浮空/上拉/下拉输入4.2 模拟输入4.3 开漏/推挽输出4.4 复用开漏/推挽输出 前言 提示&#xff1a;本文主要用作在学习江协科大STM32入门教程后做的归纳总结…
阅读更多...
【数据结构-前缀哈希】力扣523. 连续的子数组和

【数据结构-前缀哈希】力扣523. 连续的子数组和

给你一个整数数组 nums 和一个整数 k &#xff0c;如果 nums 有一个 好的子数组 返回 true &#xff0c;否则返回 false&#xff1a; 一个 好的子数组 是&#xff1a; 长度 至少为 2 &#xff0c;且 子数组元素总和为 k 的倍数。 注意&#xff1a; 子数组 是数组中 连续 的部…
阅读更多...
SpringBoot快速学习

SpringBoot快速学习

目录 SpringBoot配置文件 多环境配置 SpringBoot整合junit SpringBoot整合mybatis 1.在创建时勾选需要的模块 2.定义实体类 3.定义dao接口 4.编写数据库配置 5.使用Druid数据源 SpringBoot 是对 Spring 开发进行简化的。 那我们先来看看SpringMVC开发中的一些必须流程…
阅读更多...
C++ | Leetcode C++题解之第324题摆动排序II

C++ | Leetcode C++题解之第324题摆动排序II

题目&#xff1a; 题解&#xff1a; class Solution { public:int partitionAroundPivot(int left, int right, int pivot, vector<int> &nums) {int pivotValue nums[pivot];int newPivot left;swap(nums[pivot], nums[right]);for (int i left; i < right; …
阅读更多...
【Buffer Pool】定长内存池的实现

【Buffer Pool】定长内存池的实现

创建一个大块的内存内存 1.内存的类型是什么&#xff1f; char* 方便有多少字节就乘以多少字节 2.如何还回来内存&#xff1f;可以将换回来的小块的内存块链接起来&#xff0c;使用freeList 3.如何链接起来? 让上一个内存块的数据存下一个内存块的地址即可 4.如果内存块的…
阅读更多...
Mybatis-plus乐观锁

Mybatis-plus乐观锁

为什么要用锁 原因是当两个线程并发修改同一条数据时候 例如有条数据 id 1 count(金额/数量) 500 有两个线程都在查询数据库 查出来都是 1 500 现在两个线程都要修改这条数据 在原来基础上20 和30 那么理论来讲应该是550 可是实际有可能是530 原…
阅读更多...
点双联通分量和边双联通分量如何选择？

点双联通分量和边双联通分量如何选择？

先讲一下 &#xff0c;双联通分量 一定是用于 无向图 考虑什么时候需要用边双联通分量呢&#xff1f;&#xff0c;考虑给你的是一个一般图&#xff0c;需要你把联通的点都缩起来&#xff0c;视作一个点的情况&#xff0c;就是说割点可以反复访问&#xff0c;就是说割点和其他点…
阅读更多...
鸿蒙应用服务开发【华为支付服务】 服务端

鸿蒙应用服务开发【华为支付服务】 服务端

介绍 华为支付云侧接口 Java SDK Sample。 官方 Java 语言开发库pay-java由 core 和 service 组成&#xff1a; core 为基础库。包含自动签名和验签的 HTTP 客户端、回调处理、加解密库。service 为业务服务。基于业务场景提供不同的业务类&#xff0c;其下的方法为对应的ht…
阅读更多...
openai-dotnet：OpenAI官方提供的.NET SDK库！

openai-dotnet：OpenAI官方提供的.NET SDK库！

自从ChatGPT大火以来&#xff0c;针对OpenaAI提供的API接口&#xff0c;封装的SDK库非常多。 之前也推荐过几个.Net版本&#xff0c;今天推荐下OpenAI官方提供的.NET 库&#xff01; 01 项目简介 openai-dotnet是OpenAI 官方提供的 .NET库&#xff0c;用于方便.NET应用程序中…
阅读更多...
【Java数据结构】---初始数据结构

【Java数据结构】---初始数据结构

乐观学习&#xff0c;乐观生活&#xff0c;才能不断前进啊&#xff01;&#xff01;&#xff01; 我的主页&#xff1a;optimistic_chen 我的专栏&#xff1a;c语言 &#xff0c;Java 欢迎大家访问~ 创作不易&#xff0c;大佬们点赞鼓励下吧~ 前言 从今天开始我们就要学习Java…
阅读更多...
搭建基于树莓派的Linux学习环境（TODO）

搭建基于树莓派的Linux学习环境（TODO）

主要是想学一下Linux内核&#xff0c;所以搭一套环境&#xff0c;其实有几个选择&#xff0c;都是我买了板子的。 首先是正点原子的RK3568&#xff0c;最早是想弄安卓&#xff0c;但是SDK的大小真的把我劝退了&#xff0c;动不动几百个G的空间&#xff0c;还有就是保底16个G的…
阅读更多...
108 将有序数组转换为二叉搜索树

108 将有序数组转换为二叉搜索树

解题思路&#xff1a; 平衡二叉树&#xff0c;又称自平衡二叉搜索树&#xff08;简称AVL树&#xff09;&#xff0c;其特点如下: 每个子树都为平衡二叉树高度平衡&#xff1a;任意节左子树与右子树高度差不超过1排序树&#xff1a;左子树的所有节点的值小于该节点&#xff0c;…
阅读更多...
算法回忆录（3）

算法回忆录（3）

11. 假设有7个物品&#xff0c;它们的重量和价值如下表所示。若这些物品均不能被分割&#xff0c;且背包容量M&#xff1d;150&#xff0c;设计算法求解怎么装才能使得获取的价值最大&#xff1f;请写出伪代码。 #include <stdio.h>#define MAX_ITEMS 100 #define …
阅读更多...
怎么读取FRM、MYD、MYI数据文件

怎么读取FRM、MYD、MYI数据文件

一、介绍frm、MYD、MYI文件 在MySQL中&#xff0c;使用MyISAM存储引擎时&#xff0c;数据库表会被分割成几个不同的文件文件描述功能扩展名FRM 文件表结构定义文件存储表的结构信息&#xff0c;字段、索引等.FRMMYD 文件数据文件包含表的实际数据.MYD&#xff08;MYData&#x…
阅读更多...
Vue3安装ffmpeg做视频截取报错

Vue3安装ffmpeg做视频截取报错

通过 yarn 安装 ffmpeg 时报错。 即&#xff0c;执行以下指令时报错&#xff1a; yarn add ffmpeg/ffmpeg^0.10.0 yarn add ffmpeg/core^0.10.0错误信息&#xff1a; node_modules\pngquant-bin: Command failed. Error: pngquant failed to build, make sure that libpng-d…
阅读更多...
Unity强化工程 之 SpriteRender

Unity强化工程 之 SpriteRender

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正 1.SpriteRenderer是什么 渲染精灵用的&#xff0c;是渲染的核心组件&#xff0c;有许多重要参数所以要详细讲一讲 Spri…
阅读更多...
从数据孤岛到一体化平台：PLM系统的变革之路

从数据孤岛到一体化平台：PLM系统的变革之路

在当今快速变化的商业环境中&#xff0c;产品生命周期管理&#xff08;Product Lifecycle Management, PLM&#xff09;系统已成为企业提升竞争力、加速产品创新、优化资源配置的关键工具。相较于传统的产品数据管理&#xff08;Product Data Management, PDM&#xff09;系统和…
阅读更多...
WPF MVVM模式图片占用问题

WPF MVVM模式图片占用问题

在很久以前就遇到这个问题&#xff0c;当时解决了&#xff0c;这过了几年&#xff0c;又遇到这个问题&#xff0c;这里做个总结&#xff0c;防止下次再踩坑了&#xff0c;也顺便帮助一下同样遇到这个问题的朋友 。 出现这个问题的原因是&#xff1a;将文件路径绑定到Image的Sou…
阅读更多...
BUUCTF [安洵杯 2019]easy_serialize_php 1

BUUCTF [安洵杯 2019]easy_serialize_php 1

打开题目&#xff0c;看到一串php代码&#xff0c;试着代码审计一下&#xff0c;看一下有用信息 可以看出是通过$_SESSION[img]来读取文件 extract可以将数组中的变量导入当前变量表 也就是说我们可以伪造$_SESSION 数组中的所有数据 这里传递一个参数fphpinfo 先用hackbar进…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023