trtc-electron-plugin-xmagic

trtc-electron-plugin-xmagic

This is a plugin used to integrate Tencent Effect SDK into Tencent TRTC Electron SDK.

Prerequrement

OS

• Windows 7+(Bettor Windows 10+)
• MacOS 10.15+(Better MacOS 13+)

Environment & 3rd library

• Electron
• trtc-electron-sdk

Use

install SDK & library

npm install trtc-electron-sdk
npm install trtc-electron-plugin-xmagic

construct Xmagic effect constants and tool function

// beauty.js
import {
  buildLibPath,
  buildInitParam,
  buildSegmentationConstant,
  buildMotionConstant,
} from 'trtc-electron-plugin-xmagic';

export {
  XmagicBeautyCategory as TUIBeautyCategory,
  XmagicBasicBeautyConstant as TUIBasicBeautyConstant,
  XmagicFaceBeautyConstant as TUIFaceBeautyConstant,
  XmagicBodyBeautyConstant as TUIBodyBeautyConstant,
} from 'trtc-electron-plugin-xmagic';

// To do
function async getAppPath() {

    // get app path from Electron main process use app.getAppPath()
}

export async function getBeautyPluginLibPath() {
  const appPath = await getAppPath();
  return buildLibPath(appPath);
}

export async function getBeautyInitParam() {
  const appPath = await getAppPath();
  const initParam = buildInitParam({
    appPath,
    licenseURL: "", // Get from https://www.tencentcloud.com/products/x-magic
    licenseKey: "",
});
  return initParam;
}

// Virtual backgroud image
const virtualBackgroundImages = {
  blackboard: {
    imgPath: "", // image path in you web project
    bgPath: "",
  },
  ellipse: {
    imgPath: "", // image path in you web project
    bgPath: "",
  },
};
// Virtual background and blur constants
const TUISegmentationConstant = {}
let hasGeneratedFullPath4Segmentation = false;
export async function getTUISegmentationBeautyConstant() {
  const appPath = await getAppPath();
  if (hasGeneratedFullPath4Segmentation) {
    return TUISegmentationConstant;
  }

  const segmenttationConstant = buildSegmentationConstant(appPath);
  TUISegmentationConstant.empty = {
    ...segmenttationConstant.empty,
    imgPath: "",
    bgPath: "",
  };
  TUISegmentationConstant.blur = {
    ...segmenttationConstant.blur,
    imgPath: "",
    bgPath: "",
  };

  Reflect.ownKeys(virtualBackgroundImages).forEach((key) => {
    const item = virtualBackgroundImages[key];
    Object.assign(item, {
      ...segmenttationConstant.virtual,
    })
    if (item.imgPath) {
      if (location.href.startsWith("http")) {
        // development
        item.bgPath = window.path
          .join(appPath, "/public", item.imgPath)
          .replaceAll("\\", "/");
      } else {
        // production
        item.bgPath = window.path
          .join(appPath, "/dist", item.imgPath)
          .replaceAll("\\", "/");
      }
    }
    TUISegmentationConstant[key] = item;
  });
  hasGeneratedFullPath4Segmentation = true;
  return TUISegmentationConstant;
}

const TUIMotionBeautyConstant = {};
let hasGeneratedFullPath4Motion = false;
export async function getTUIMotionBeautyConstant() {
  const appPath = await getAppPath();

  if (hasGeneratedFullPath4Motion) {
    return TUIMotionBeautyConstant;
  }

  const motionBeautyConstant = buildMotionConstant(appPath);
  Object.assign(TUIMotionBeautyConstant, motionBeautyConstant);
  hasGeneratedFullPath4Motion = true;
  return TUIMotionBeautyConstant;
}

Start beauty effect

// Room.vue script
import TRTCCloud, { TRTCPluginType, TRTCVideoPixelFormat } from 'trtc-electron-sdk';
import {
  getBeautyPluginLibPath,
  getBeautyInitParam,
  TUIBeautyCategory,
  TUIBasicBeautyConstant,
  TUIFaceBeautyConstant,
  TUIBodyBeautyConstant,
  getTUISegmentationBeautyConstant,
  getTUIMotionBeautyConstant
} from "./beauty";

const trtcCloud = TRTCCloud.getTRTCShareInstance();

const startBeauty = () {
    // Enable beauty effect
    trtcCloud.setPluginParams(TRTCPluginType.TRTCPluginTypeVideoProcess, {
        enable: true,
        pixelFormat: TRTCVideoPixelFormat.TRTCVideoPixelFormat_I420
    });
    // Regist beauty plugin callback
    trtcCloud.setPluginCallback((pluginId, errorCode, msg) => {
        console.log(`plugin info: ${pluginId}, errorCode: ${errorCode}, msg: ${msg}`);
    });

    const currentCamera = trtcCloud.getCurrentCameraDevice(); // Make sure your PC has a camera
    if (currentCamera) {
        const libPath = await getBeautyPluginLibPath();
        beautyPlugin = trtcCloud.addPlugin({
          id: `${currentCamera.deviceId}-${new Date().getTime()}`, // ID shoud be unique globally
          path: libPath,
          type: TRTCPluginType.TRTCPluginTypeVideoProcess,
        });
        const initParam = await getBeautyInitParam();
        beautyPlugin.setParameter(JSON.stringify(initParam));
        beautyPlugin.enable();

        const beautySetting = {
          beautySetting: [
            { category: TUIBeautyCategory.Beauty, effKey: TUIBasicBeautyConstant.BEAUTY_WHITEN.effKey, effValue: "0.5", },
            { category: TUIBeautyCategory.Beauty, effKey: TUIBasicBeautyConstant.BEAUTY_SMOOTH.effKey, effValue: "0.4", },
            { category: TUIBeautyCategory.Beauty, effKey: TUIBasicBeautyConstant.BEAUTY_ROSY.effKey, effValue: "0.3",},
            { category: TUIBeautyCategory.Beauty, effKey: TUIFaceBeautyConstant.BEAUTY_FACE_NATURE.effKey, effValue: "0.8"},
            { category: TUIBeautyCategory.Beauty, effKey: TUIFaceBeautyConstant.BEAUTY_FACE_V.effKey, effValue: "0",},
            { category: TUIBeautyCategory.Beauty, effKey: TUIFaceBeautyConstant.BEAUTY_ENLARGE_EYE.effKey, effValue: "1",},
            { category: TUIBeautyCategory.BodyBeauty, effKey: TUIBodyBeautyConstant.BODY_THIN_SHOULDER_STRENGTH.effKey, effValue: "0.7",},
            { category: TUIBeautyCategory.BodyBeauty, effKey: TUIBodyBeautyConstant.BODY_SLIM_HEAD_STRENGTH.effKey, effValue: "0.61",}，
            {
              category: TUIBeautyCategory.Segmentation,
              effKey: TUISegmentationConstant["blackboard"].effKey,
              resPath: TUISegmentationConstant["blackboard"].resPath,
              bgPath: TUISegmentationConstant["blackboard"].bgPath,
            }
          ]
        };
        // wait before the library finished loading and initializing
        setTimeout(() => {
          const jsonParam = JSON.stringify(beautySetting);
          beautyPlugin.setParameter(jsonParam);
        }, 100); 
    }
}

Build configuration for electron-builder

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