一、操作系统
·Windows 7+（推荐 Windows 10+）
·MacOS 10.15+（推荐 MacOS 13+）
二、license 认证配置
开发模式
·Windows：electron.exe
·MacOS：com.github.Electron.helper
注意：说明：
注意：开发模式下，默认固定配置上述两个值，这是由 Electron 开发模式启动决定的。Mac 下可以通过修改开发态 Electron 的 Bundle ID 修改，Windows 下暂时不能修改。
打包模式
·Windows：<electron-builder productName>.exe
·MacOS：<electron-builder APP ID>.helper.Renderer
注意：说明：
三、环境与第三方库
·Electron
·trtc-electron-sdk
四、安装
使用 npm 安装必要的 SDK 和库：
npm install trtc-electron-sdknpm install trtc-electron-plugin-xmagic
五、步骤1：创建名为 beauty.js 的文件
从 trtc-electron-plugin-xmagic 导入必要的常量和工厂函数。
// beauty.jsimport TRTCXmagicFactory, { TRTCXmagicEffectConstant, TRTCXmagicEffectValueType,} from "trtc-electron-plugin-xmagic";export { TRTCXmagicEffectConstant, TRTCXmagicEffectValueType, TRTCXmagicEffectCategory, default as TRTCXmagicFactory} from "trtc-electron-plugin-xmagic";function async getAppPath() { // 从 Electron 主进程使用 app.getAppPath()获取应用路径}async function init() { const appPath = await getAppPath(); TRTCXmagicFactory.init(appPath);}init();const { platform } = process;TRTCXmagicEffectConstant["EFFECT_LUT"].options = TRTCXmagicEffectConstant["EFFECT_LUT"].options.concat( lutResourceList.map(item => { return { …TRTCXmagicEffectConstant["EFFECT_LUT"].valueMeta.value, …item, } }));// MakeupTRTCXmagicEffectConstant["EFFECT_MAKEUP"].options = TRTCXmagicEffectConstant["EFFECT_MAKEUP"].options.concat([ { label: "桃花", label_en: "Peach", effKey: platform === "win32" ? "makeup.strength" : "video_fenfenxia", valueType: TRTCXmagicEffectValueType.ZERO_ONE, resPath: platform === "win32" ? "makeupMotionRes.bundle/video_fenfenxia/template.json" : "makeupMotionRes.bundle/video_fenfenxia", icon: "./assets/beauty_panel/panel_icon/makeup_icon/video_fenfenxia.png" }, { label: "晒伤", label_en: "Sunburn", effKey: platform === "win32" ? "makeup.strength" : "video_shaishangzhuang", valueType: TRTCXmagicEffectValueType.ZERO_ONE, resPath: platform === "win32" ? "makeupMotionRes.bundle/video_shaishangzhuang/template.json" : "makeupMotionRes.bundle/video_shaishangzhuang", icon: "./assets/beauty_panel/panel_icon/makeup_icon/video_shaishangzhuang.png" },]);// … 其它export const customEffectConstant = TRTCXmagicEffectConstant;
六、步骤2：启动美颜效果
在你的 Room.vue 脚本中，导入必要的模块并启动美颜效果。
import TRTCCloud, { TRTCPluginType, TRTCVideoPixelFormat } from 'trtc-electron-sdk';import { customEffectConstant, TRTCXmagicFactory } from './beauty.js';const trtcCloud = TRTCCloud.getTRTCShareInstance();const startBeauty = async () => { // 启用美颜效果 trtcCloud.setPluginParams(TRTCPluginType.TRTCPluginTypeVideoProcess, { enable: true, pixelFormat: TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420 }); // 注册美颜插件回调 trtcCloud.setPluginCallback((pluginId, errorCode, msg) => { console.log(`插件信息: ${pluginId}, 错误码: ${errorCode}, 消息: ${msg}`); }); const currentCamera = trtcCloud.getCurrentCameraDevice(); if (currentCamera) { const libPath = await TRTCXmagicFactory.getEffectPluginLibPath(); const beautyPlugin = trtcCloud.addPlugin({ id: `${currentCamera.deviceId}-${new Date().getTime()}`, path: libPath, type: TRTCPluginType.TRTCPluginTypeVideoProcess, }); const initParam = await TRTCXmagicFactory.buildEffectInitParam({ licenseURL: "", // — 重要 — 待办：输入你的许可证URL licenseKey: "", // — 重要 — 待办：输入你的许可证密钥 }); beautyPlugin.setParameter(JSON.stringify(initParam)); beautyPlugin.enable(); // 设置美颜、化妆和动作效果 // 请参考初始查询中提供的代码以了解详细实现 }}
七、步骤3：Electron-Builder构建配置
配置你的 electron-builder 以包含 SDK 和插件中的必要文件。
// electron builder configuration related"build": { "win": { "target": ["nsis","zip"], "extraFiles": [ { "from": "node_modules/trtc-electron-sdk/build/Release/", "to": "./resources", "filter": [ "**/*" ] }, { "from": "node_modules/trtc-electron-plugin-xmagic/plugin/XMagic/win/${arch}/platforms/", "to": "./platforms", "filter": [ "**/*" ] }, { "from": "node_modules/trtc-electron-plugin-xmagic/plugin/XMagic/win/${arch}/", "to": "./resources/app/plugin/XMagic/win/${arch}/", "filter": [ "**/*" ] }, { "from": "node_modules/trtc-electron-plugin-xmagic/plugin/XMagic/win/res/", "to": "./resources/app/plugin/XMagic/win/res/", "filter": [ "**/*" ] } ] }, "mac": { "target": ["dmg"], "extraFiles": [ { "from": "node_modules/trtc-electron-sdk/build/Release/${arch}/trtc_electron_sdk.node", "to": "./Resources" }, { "from": "node_modules/trtc-electron-sdk/build/mac-framework/${arch}/", "to": "./Frameworks" }, { "from": "node_modules/trtc-electron-plugin-xmagic/plugin/XMagic/mac/", "to": "./Resources/app/plugin/XMagic/mac/" } ] },}