文档反馈官招募中，报名立赚积分兑换代金券！> HOT
文档中心>TRTC 云助手>模块化方案>TRTC Electron 插件 - Xmagic

TRTC Electron 插件 - Xmagic

最近更新时间：2025-08-22 15:22:21

我的收藏

本页目录：

前提条件

操作系统

Windows 7+（推荐 Windows 10+）
MacOS 10.15+（推荐 MacOS 13+）

license 认证配置

腾讯特效 SDK 支持 Electron 插件的 license 认证配置美颜库的认证，在进程运行时，美颜 SDK 会验证当前执行的进程是否与配置相符。在 Windows 下要绑定 .exe 文件，Mac 下要绑定应用进程的 Bundle ID。示例 demo 的配置取值如下，配置需要在腾讯云控制台完成。
开发模式
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
说明：
Windows 下取安装后应用的 .exe 文件名，取决于 packcage.json 文件的 name 或 productName 属性，具体以实际构建的应用包安装程序名为准，不包含安装包名中的版本号。
Mac 下 Bundle ID 格式为：<elelectron-builder APP ID>.helper.Renderer。例如：electron-builder 配置文件中的 AppID 如果配置为 “com.tencent.cloud.trtc.tui-live-studio”，由于美颜库会在 Electron 渲染进程中调用，所以进程对应的 Bundle ID 为：com.tencent.cloud.trtc.tui-live-studio.helper.Renderer。

环境与第三方库

Electron
trtc-electron-sdk

安装

使用 npm 安装必要的 SDK 和库：
npm install trtc-electron-sdk
npm install trtc-electron-plugin-xmagic

使用方法

步骤1：创建名为 beauty.js 的文件

从 trtc-electron-plugin-xmagic 导入必要的常量和工厂函数。
// beauty.js
import 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,
    }
  })
);

// Makeup
TRTCXmagicEffectConstant["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/"
      }
    ]
  },
}

中国站
目录