JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 13
  • Score
    100M100P100Q80904F
  • License ISC

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

Package Exports

  • trtc-electron-plugin-xmagic
  • trtc-electron-plugin-xmagic/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (trtc-electron-plugin-xmagic) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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