### Install and run the project

Source: https://www.tencentcloud.com/document/product/1143/53939

Install project dependencies and start the local development server.

```bash
# Install dependencies
npm i 

# Compile and run the code
npm run dev
```

--------------------------------

### Install and Import SDK

Source: https://www.tencentcloud.com/document/product/1143/50102

Methods for installing the SDK via npm or including it via a script tag.

```bash
npm install tencentcloud-webar
```

```javascript
import { ArSdk } from 'tencentcloud-webar';
```

```html
<script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script>
<script>
    // Receive T ArSdk class from window.AR
    const { ArSdk } = window.AR;
    ......
</script>
```

--------------------------------

### Local Server Output

Source: https://www.tencentcloud.com/document/product/1143/68964

Example output indicating a successful local server startup using the serve module.

```text
    Serving!                                       │
   │                                                  │
   │   - Local:            http://localhost:57965     │
   │   - On Your Network:  http://10.91.28.94:57965   │
   │                                                  │
   │   This port was picked because 5000 is in use.   │
   │                                                  │
   │   Copied local address to clipboard! 
```

--------------------------------

### startPreview(source)

Source: https://www.tencentcloud.com/document/product/1143/81193

Starts a real-time preview of the processed video.

```APIDOC
## startPreview(source)

### Description
Starts a real-time preview loop. Returns a processed MediaStream that can be attached to a video element's srcObject.

### Parameters
- **source** (HTMLVideoElement | MediaStream) - Required - The source video element or stream.
```

--------------------------------

### Install and Import SDK

Source: https://www.tencentcloud.com/document/product/1143/50101

Install the package via npm and import the ArSdk class, or use the UMD script tag for browser-based environments.

```bash
npm install tencentcloud-webar
```

```javascript
import { ArSdk } from 'tencentcloud-webar';
```

```html
<script charset="utf-8" src="https://webar-static.tencent-cloud.com/ar-sdk/resources/latest/webar-sdk.umd.js"></script>
<script>
    // Receive ArSdk class from window.AR
    const { ArSdk } = window.AR;
    ......
</script>
```

--------------------------------

### Install SDK via CocoaPods

Source: https://www.tencentcloud.com/document/product/1143/45384

Command to update the local repository and install dependencies defined in the Podfile.

```bash
pod install
```

--------------------------------

### Initialize and Copy Beauty Resources

Source: https://www.tencentcloud.com/document/product/1143/45385

Configures resource paths and performs the file copy operation in a background thread. Ensure this is only executed once per app installation to optimize performance.

```java
String resPath = new File(getFilesDir(), AppConfig.getInstance().getBeautyFileDirName()).getAbsolutePath();
if (!resPath.endsWith(File.separator)) {
    resPath = resPath + File.separator;
}
AppConfig.resPathForSDK = resPath;
AppConfig.lutFilterPath = resPath + "light_material/lut";
AppConfig.motionResPath = resPath + "MotionRes";

new Thread(() -> {
    Context context = getApplicationContext();
    int addResult = XmagicApi.addAiModeFilesFromAssets(context, AppConfig.resPathForSDK);
    Log.d(TAG, "copyRes, add ai model files result = " + addResult);

    String lutDirNameInAsset = "lut";
    boolean result = FileUtil.copyAssets(context, lutDirNameInAsset, AppConfig.lutFilterPath);
    Log.d(TAG, "copyRes, copy lut, result = " + result);

    String motionResDirNameInAsset = "MotionRes";
    boolean result2 = FileUtil.copyAssets(context, motionResDirNameInAsset, AppConfig.motionResPath);
    Log.d(TAG, "copyRes, copy motion res, result = " + result2);
}).start();
```

--------------------------------

### Install Dependencies via Command Line

Source: https://www.tencentcloud.com/document/product/1143/51222

Run these commands in your terminal to fetch and add the SDK dependencies to your Flutter project.

```bash

flutter pub get

```

```bash

flutter pub add tencent_effect_flutter

```

--------------------------------

### Install CocoaPods

Source: https://www.tencentcloud.com/document/product/1143/45384

Command to install the CocoaPods dependency manager via RubyGems.

```bash
sudo gem install cocoapods
```

--------------------------------

### Clone the sample project

Source: https://www.tencentcloud.com/document/product/1143/53939

Download the repository and navigate to the project directory.

```bash
git clone https://github.com/tencentcloud-webar/web-demo-en.git
cd quick-start
```

--------------------------------

### Initialize SDK and Handle Callbacks

Source: https://www.tencentcloud.com/document/product/1143/50103

Configures authentication and beautification parameters, then demonstrates retrieving the output stream in different lifecycle callbacks.

```javascript
// Get the authentication information
const authData = {
    licenseKey: 'xxxxxxxxx',
    appId: 'xxx',
    authFunc: authFunc // For details, see “Configuring and Using a License - Signature”
};

// When initializing the SDK in regular mode, pass in the input or camera parameters
const config = {
    auth: authData, // The authentication information
    beautify: { // The effect parameters
        whiten: 0.1,
        dermabrasion: 0.5,
        lift: 0,
        shave: 0,
        eye: 0.2,
        chin: 0,
    },
    input: inputStream // Prepare the stream data fed into the SDK as the input. For details, see “SDK Integration - Parameters and APIs”.
}
const sdk = new ArSdk(
    // Pass in a config object to initialize the SDK
    config
)
// After authentication succeeds, the SDK will trigger the `created` callback immediately
sdk.on('created', () => {
    // Pull and display the filter and effect list in the `created` callback
    sdk.getEffectList({
        Type: 'Preset',
        Label: 'Makeup',
    }).then(res => {
        effectList = res
    });
    sdk.getCommonFilter().then(res => {
        filterList = res
    })
})

// The data you get by calling `getOutput` in different callbacks vary slightly. Choose the one that fits your needs.
sdk.on('cameraReady', async () => {
    const output = await sdk.getOutput() // The effect parameters have not taken effect
    // Play the stream
    ...
})
sdk.on('ready', async () => {
    const output = await sdk.getOutput() // The effect parameters have taken effect
    // Play the stream
    ...
    // Call `setBeautify`, `setEffect`, or `setFilter` in the `ready` callback
})
```

--------------------------------

### Unknown Error Example

Source: https://www.tencentcloud.com/document/product/1143/50107

Example response for an unknown error, indicated by a Code of -1.

```json
{
    "Code": -1,
    "Message": "Unknown error."
}
```

--------------------------------

### initCore(options)

Source: https://www.tencentcloud.com/document/product/1143/50106

Initializes the SDK with input configuration.

```APIDOC
## initCore(options)

### Description
For pre-initialization scenarios only, it provides input information to the SDK.

### Parameters
- **options** (object) - Required - Configuration object containing input source, camera settings, and mirror options.
```

--------------------------------

### Initialize SDK with Media Stream

Source: https://www.tencentcloud.com/document/product/1143/50102

Initialize the SDK instance using a media stream from navigator.mediaDevices.

```javascript
// Get the authentication information
const authData = {
 licenseKey: 'xxxxxxxxx',
 appId: 'xxx',
 authFunc: authFunc // For details, see “Configuring and Using a License - Signature”
};
// The input stream
const stream = await navigator.mediaDevices.getUserMedia({
 audio: true,
 video: { width: w, height: h }
})

const config = {
 module: {
     beautify: true, // Whether to enable the effect module, which offers beautification and makeup effects as well as stickers
     segmentation: true, // Whether to enable the keying module, which allows you to change the background
     segmentationLevel: 0 // Optional values: 0 | 1 | 2. The higher the value, the better the segmentation effect, but this also increases resource usage and hardware requirements for the device.
 },
 auth: authData, // The authentication information
 input: stream, // The input stream
 beautify: { // The effect parameters for initialization (optional)
     whiten: 0.1,
     dermabrasion: 0.3,
     eye: 0.2,
     chin: 0,
     lift: 0.1,
     shave: 0.2,
     // For more beauty parameter settings, please refer to the「API Documentation」
 }
 // For more config settings, please refer to the「API Documentation」
}
const sdk = new ArSdk(
 // Pass in a config object to initialize the SDK
 config
)
```

--------------------------------

### Request Parameter Error Example

Source: https://www.tencentcloud.com/document/product/1143/50107

Example response for a request parameter error, indicated by a Code of -2.

```json
{
    "Code": -2,
    "Message": "LicenseKey must be a string."
}
```

--------------------------------

### Initialize SDK Instance

Source: https://www.tencentcloud.com/document/product/1143/50101

Configure the SDK with authentication, module settings, and camera parameters, then handle lifecycle events to load effects and filters.

```javascript
// Get the authentication information
const authData = {
    licenseKey: 'xxxxxxxxx',
    appId: 'xxx',
    authFunc: authFunc // For details, see “Configuring and Using a License - Signature”
};

const config = {
    module: {
        beautify: true, // Whether to enable the effect module, which offers beautification and makeup effects as well as stickers
        segmentation: true, // Whether to enable the keying module, which allows you to change the background
        segmentationLevel: 0 // Optional values: 0 | 1 | 2. The higher the value, the better the segmentation effect, but this also increases resource usage and hardware requirements for the device.
    },
    auth: authData, // The authentication information
    camera: { // Pass in the camera parameters
        width: 1280,
        height: 720
    },
    beautify: { // The effect parameters for initialization (optional)
        whiten: 0.1,
        dermabrasion: 0.3,
        eye: 0.2,
        chin: 0,
        lift: 0.1,
        shave: 0.2,
        // For more beauty parameter settings, please refer to the「API Documentation」
    },
    // For more config settings, please refer to the「API Documentation」
}
const sdk = new ArSdk(
    // Pass in a config object to initialize the SDK
    config
)

let effectList = [];
let filterList = [];

sdk.on('created', () => {
    // You can display the effect and filter list in the `created` callback. For details, see “SDK Integration - Parameters and APIs”.
    sdk.getEffectList({
        Type: 'Preset',
        Label: 'Makeup',
    }).then(res => {
        effectList = res
    });
    sdk.getCommonFilter().then(res => {
        filterList = res
    })
})

// Call `setBeautify`, `setEffect`, or `setFilter` in the `ready` callback
// For details, see “SDK Integration - Configuring Effects”
sdk.on('ready', () => {
    // Configure beautification effects
    sdk.setBeautify({
        whiten: 0.2
    });
    // Configure special effects
    sdk.setEffect({
        id: effectList[0].EffectId,
        intensity: 0.7
    });
    // Configure filters
    sdk.setFilter(filterList[0].EffectId, 0.5)
})
```

--------------------------------

### Business Verification Error Example

Source: https://www.tencentcloud.com/document/product/1143/50107

Example response for a business verification error, indicated by a Code greater than 1000.

```json
{
    "Code": 2007,
    "Message": "The project does not exist."
}
```

--------------------------------

### Initialize Podfile

Source: https://www.tencentcloud.com/document/product/1143/45384

Command to generate a Podfile in the current project directory.

```bash
pod init
```

--------------------------------

### Initialize SDK with Image/Video Input and Event Handling

Source: https://www.tencentcloud.com/document/product/1143/50102

Initialize the SDK with static assets or video elements and handle lifecycle events like created and ready.

```javascript
const config = {
 auth: authData, // The authentication information
 input: 'https://xxx.png', // The input stream, also support image and video element
}
const sdk = new ArSdk(
 // Pass in a config object to initialize the SDK
 config
)

// You can display the effect and filter list in the `created` callback. For details, see “SDK Integration - Parameters and APIs”.
sdk.on('created', () => {
 // Get the built-in makeup effects
 sdk.getEffectList({
     Type: 'Preset',
     Label: 'Makeup',
 }).then(res => {
     effectList = res
 });
 // Get the built-in filters
 sdk.getCommonFilter().then(res => {
     filterList = res
 })
})

// Call `setBeautify`, `setEffect`, or `setFilter` in the `ready` callback
// For details, see “SDK Integration - Configuring Effects”
sdk.on('ready', () => {
 // Configure beautification effects
 sdk.setBeautify({
     whiten: 0.2
 });
 // Configure special effects
 sdk.setEffect({
     id: effectList[0].EffectId,
     intensity: 0.7
 });
 // Configure filters
 sdk.setFilter(filterList[0].EffectId, 0.5)
})
```

--------------------------------

### AI Data Callback JSON Example

Source: https://www.tencentcloud.com/document/product/1143/45399

Example of the JSON structure returned by the onAIDataUpdated callback, containing face, hand, and body 3D information.

```json
{
    "face_info": [{
        "expression_weights": [0.001172, 0, 0.029249, ... , 0.060041, 0],
        "face_256_point": [211.844238, 673.247192, ... , 339.247925, 654.792603],
        "face_256_visible": [0.163925, 0.14921, ... , 0.99887, 0.99887],
        "face_3d_info": {
            "pitch": -3.860844850540161,
            "pitch_fixed": 2.1123428344726562,
            "roll": -12.797032356262207,
            "roll_fixed": 1.3187808990478516,
            "transform": [
                [0.8919625878334045, 0.2843534052371979, 0.3514907658100128, 0],
                [-0.17628398537635803, 0.9346542954444885, -0.3087802827358246, 0],
                [-0.41632509231567383, 0.21345829963684082, 0.88380366563797, 0],
                [-0.020958196371793747, -0.04502145200967789, -0.6078543663024902, 1]
            ],
            "yaw": 24.824481964111328,
            "yaw_fixed": 25.02082061767578
        },
        "left_eye_high_vis_ratio": 0,
        "left_eyebrow_high_vis_ratio": 0,
        "mouth_high_vis_ratio": 1,
        "out_of_screen": false,
        "right_eye_high_vis_ratio": 1,
        "right_eyebrow_high_vis_ratio": 0.821429,
        "trace_id": 21
    }],
    "hand_info": {
        "gesture": "PAPER",
        "hand_point_2d": [180.71888732910156, 569.2958984375, ... , 353.8714294433594, 836.246826171875]
    },
    "body_3d_info": {
        "imageHeight": 652,
        "imageWidth": 320,
        "items": [{
            "index": 1,
            "pose": [0.049122653901576996, ... , 0],
            "position_x": [190.47494506835938, 235.23098754882812, ... , 4.948424339294434, 173.59298706054688],
            "position_y": [777.2109375, 836.488037109375, ... , 161.19752502441406, 405.83905029296875],
            "position_z": [0, 0, ... , 0, 0],
            "rotation": [{
                "data": [0.9944382905960083, -0.09695644676685333, -0.0411277711391449, 0.000708006089553237]
            },  
            ......
            {
                "data": [0.9907779693603516, 0.13549542427062988, 0, 0]
            }, {
                "data": [1, 0, 0, 0]
            }]
        }]
    }
}
```

--------------------------------

### Initialize Beauty AR SDK with Preinitialization

Source: https://www.tencentcloud.com/document/product/1143/53940

Configure the SDK without specifying input, then listen for the resourceReady event to confirm resources are loaded before calling initCore.

```javascript
let resourceReady = false
// Basic configuration parameters of the Beauty AR SDK
const config = {
    // input: stream, // Do not specify `input`.
    auth: {
        licenseKey: LICENSE_KEY,
        appId: APPID,
        authFunc: getSignature
    },
    // Initial beauty effects (optional parameters)
    beautify: {
        whiten: 0.1, // The brightening effect. Value range: 0–1.
        dermabrasion: 0.5, // The smooth skin effect. Value range: 0–1.
        lift: 0.3, // The slim face effect. Value range: 0–1.
        shave: 0, // The V shape effect. Value range: 0–1.
        eye: 0, // The big eyes effect. Value range: 0–1.
        chin: 0, // The chin shaping effect. Value range: 0–1.
        ……
    },
    language: 'en'
}
  

// Pass in `ar sdk` for `config`.
const ar = new ArSdk(config);
// If the `resourceReady` callback event is triggered, the resources have been completely loaded, and you need to wait for `initCore` to provide input.
ar.on('resourceReady', () => {
    resourceReady = true
})
// The `ready` event will be triggered after `initCore` is called.
ar.on('ready', () => {
    // Get the output stream data of the Beauty AR SDK
    const arStream = await ar.getOutput();
    // Process the output stream
    ...
})
```

--------------------------------

### Configure Allure Filter

Source: https://www.tencentcloud.com/document/product/1143/48646?lang=en&pg=

Example of applying a LUT-based filter effect.

```objective-c
NSString *propertyType = @"lut";        //Set the effect type, take filter as an example.
NSString *propertyName = [@"lut.bundle/" stringByAppendingPathComponent:@"xindong_lf.png"]; //Specify the effect name, take the Allure filter as an example.
NSString *propertyValue = @"60";           //Set the effect value.
[self.xmagicApi configPropertyWithType:propertyType withName:propertyName withData:propertyValue withExtraInfo:nil];
```

--------------------------------

### Initialize and play video in ready callback

Source: https://www.tencentcloud.com/document/product/1143/50101

Use this approach to play the video after the SDK is fully initialized and effects have been applied.

```javascript
sdk.on('ready', async () => {
  // Initialize a player of the SDK. `my-dom-id` is the ID of the player’s container.
  const player = await sdk.initLocalPlayer('my-dom-id')
  // Play the video
  await player.play()
})
```

--------------------------------

### Get Current OpenGL Context

Source: https://www.tencentcloud.com/document/product/1143/48646?lang=en&pg=

Retrieves the current OpenGL context.

```Objective-C
- (nullable EAGLContext*)getCurrentGlContext;
```

--------------------------------

### async init()

Source: https://www.tencentcloud.com/document/product/1143/81193

Authenticates the SDK and optionally pre-warms the processing pipeline.

```APIDOC
## async init()

### Description
Authenticates the SDK and pre-warms the detect and render pipeline. If beauty options were provided in the constructor, this method pre-loads them to prevent latency during the first frame.
```

--------------------------------

### Initialize demo HTML structure

Source: https://www.tencentcloud.com/document/product/1143/69310

Basic HTML boilerplate for the demo page. Ensure APPID, LICENSE_KEY, and token are configured before use.

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Upload and Display</title>
</head>
```

--------------------------------

### Configure Long Leg Effect

Source: https://www.tencentcloud.com/document/product/1143/48646?lang=en&pg=

Example of applying body retouching for leg stretching.

```objective-c
NSString *propertyType = @"body";        //Set the effect type, take body retouch as an example.
NSString *propertyName = @"body.legStretch"; //Specify the effect name, take the long leg effect as an example.
NSString *propertyValue = @"60";           //Set the effect value.
[self.xmagicApi configPropertyWithType:propertyType withName:propertyName withData:propertyValue withExtraInfo:nil];
```

--------------------------------

### Initialize SDK with Camera and Canvas

Source: https://www.tencentcloud.com/document/product/1143/53943

WXML structure for camera and canvas elements, and JS variables for authentication configuration.

```javascript
// wxml
// Open the camera and hide it by setting `position`
<camera 
  device-position="{{'front'}}" 
  frame-size="large" flash="off" resolution="medium" 
  style="width: 750rpx; height: 134rpx;position:absolute;top:-9999px;" 
/>
// The SDK outputs the processed image to the canvas in real time.
<canvas 
  type="webgl"
  canvas-id="main-canvas"
  id="main-canvas"
  style="width: 750rpx; height: 1334rpx;">
</canvas>
// Take a photo and draw the `ImageData` object onto the canvas
<canvas 
  type="2d" 
  canvas-id="photo-canvas" 
  id="photo-canvas" 
  style="position:absolute;width:720px;height:1280px;top:-9999px;left:-9999px;">
</canvas>
// js
/** ----- Authentication configuration ----- */
  

/**
 * Your Tencent Cloud account's APPID
 * 
 * You can view your APPID in the [Account Center](https://console.cloud.tencent.com/developer).
 */
const APPID = ''; // Enter your APPID
  

/**
 * Web LicenseKey
 * 
 * On the [Web Licenses](https://console.cloud.tencent.com/vcube/web) page of the RT-Cube console, create a project, and a `LicenseKey` will be automatically generated.
 */
const LICENSE_KEY = ''; // Enter the license key of your project
  

/**
 * The token used to calculate the signature
 * 
 * Note: The sample code is for demo debugging only. In the production environment, save the token and calculate the signature on the server. Provide the signature when the frontend calls an API to request it. For more information, see
 * [Signature algorithm](https://cloud.tencent.com/document/product/616/71370#.E7.AD.BE.E5.90.8D.E6.96.B9.E6.B3.95)
 */
const token = ''; // Enter your token
```

--------------------------------

### Manage Effect State

Source: https://www.tencentcloud.com/document/product/1143/58932

Gets or sets the current enabled/disabled state of the beauty effect.

```java
public EffectState getEffectState()
public void setEffectState(EffectState effectState)
```

--------------------------------

### Get Configuration Property

Source: https://www.tencentcloud.com/document/product/1143/48646?lang=en&pg=

Retrieves effect information based on the provided property name.

```Objective-C
- (YTBeautyPropertyInfo * _Nullable)getConfigPropertyWithName:(NSString *_Nonnull)propertyName;
```

--------------------------------

### Get Device Level

Source: https://www.tencentcloud.com/document/product/1143/51224

Retrieves the device tier to determine classification for feature configuration.

```dart
Future<int> getDeviceLevel();
```

--------------------------------

### Handle Ready Event and Apply Effects

Source: https://www.tencentcloud.com/document/product/1143/50106

Use the 'ready' callback to retrieve the output stream and apply beautification, effects, or filters once initialization parameters are active.

```javascript
sdk.on('ready', () => {
    // Get the output stream in the `ready` callback. The initialization parameters have taken effect at this point.
    // You can get the output stream in `ready` if you want your video to show effects the moment it is displayed but do not expect it to be displayed as soon as possible.
    // Between the two methods, choose the one that fits your needs.
    const arStream = await ar.getOutput();
    // Play the stream locally
    // localVideo.srcObject = arStream

    // Call `setBeautify`, `setEffect`, or `setFilter` in the `ready` callback
    sdk.setBeautify({
        whiten: 0.3
    });
    sdk.setEffect({
        id: effectList[0].EffectId,
        intensity: 0.7
    });
    sdk.setEffect({
        id: effectList[0].EffectId,
        intensity: 0.7,
        filterIntensity: 0.5 // In v0.1.18 and later, you can use this parameter to set the filter strength of a special effect. If you do not pass this parameter, the strength specified for the effect will be used.
    });
    sdk.setFilter(filterList[0].EffectId, 0.5)
})
```

--------------------------------

### Configure Skin Brightening Effect

Source: https://www.tencentcloud.com/document/product/1143/48646?lang=en&pg=

Example of setting the beauty effect type to skin brightening.

```objective-c
NSString *propertyType = @"beauty";        //Set the effect type, take beauty as an example.
NSString *propertyName = @"beauty.whiten"; //Specify the effect name, take the skin brightening effect as an example.
NSString *propertyValue = @"60";           //Set the effect value.
[self.xmagicApi configPropertyWithType:propertyType withName:propertyName withData:propertyValue withExtraInfo:nil];
traInfo:nil];
```

--------------------------------

### Constructor: new ArRecorder.ArRecorderSdk(options)

Source: https://www.tencentcloud.com/document/product/1143/81193

Initializes a new instance of the ArRecorder SDK with authentication and configuration options.

```APIDOC
## Constructor: new ArRecorder.ArRecorderSdk(options)

### Description
Initializes the ArRecorder SDK instance. The `options` object configures authentication, beauty settings, module loading, and output encoding.

### Parameters
- **auth** (Object) - Required - Authentication parameters including licenseKey, appId, and authFunc.
- **beautify** (BeautifyOptions) - Optional - Beauty configuration parameters.
- **module** (Object) - Optional - Module configuration, specifically for face detection models.
- **output** (Object) - Optional - MP4 encoding configuration (codec, bitrate, fps).
- **initReport** (Boolean) - Optional - Whether to initialize the reporting module (default: true).
```

--------------------------------

### Gesture Callback JSON Format

Source: https://www.tencentcloud.com/document/product/1143/56174

Example structure of the hand_info object returned within the callback data.

```json
"hand_info": {
    "gesture": "PAPER",
    "hand_point_2d": [180.71888732910156, 569.2958984375, ... , 353.8714294433594, 836.246826171875]
}
```

--------------------------------

### Configure Girl Group Makeup Effect

Source: https://www.tencentcloud.com/document/product/1143/48646?lang=en&pg=

Example of applying a makeup motion effect and adjusting its strength.

```objective-c
NSString *motionMakeupResPath = [[NSBundle mainBundle] pathForResource:@"makeupMotionRes" ofType:@"bundle"];//The absolute path of the `makeupMotionRes` folder
NSString *propertyType = @"motion";        //Set the effect type, take makeup as an example.
NSString *propertyName = @"video_nvtuanzhuang"; //Specify the effect name, take the girl group makeup effect as an example.
NSString *propertyValue = motionMakeupResPath;  //Set the path of the animated effect.
[self.xmagicApi configPropertyWithType:propertyType withName:propertyName withData:propertyValue withExtraInfo:nil];
//Below are settings for the makeup effect (you only need to configure the above parameters once and can change the following settings multiple times).
NSString *propertyTypeMakeup = @"custom";         //Set the effect type, take makeup as an example.
NSString *propertyNameMakeup = @"makeup.strength"; //Specify the effect name, take the girl group makeup effect as an example.
NSString *propertyValueMakeup = @"60";             //Set the effect value.
[self.xmagicApi configPropertyWithType:propertyTypeMakeup withName:propertyNameMakeup withData:propertyValueMakeup withExtraInfo:nil];
```

--------------------------------

### Initialize Adapter and Panel

Source: https://www.tencentcloud.com/document/product/1143/45388

Configures the beauty live adapter and initializes the UI panel view for beauty effects.

```java
this.beautyLiveAdapter = new TEBeautyLiveAdapter(XmagicConstant.EffectMode.PRO, TEBeautyKit.getResPath());
// Set the phone orientation
this.beautyLiveAdapter.notifyScreenOrientationChanged(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
// Set the camera to front-facing or rear-facing, and whether to use encoding mirror
this.beautyLiveAdapter.notifyCameraChanged(isFront, this.isEncoderMirror);

private void initBeautyPanelView() {
    RelativeLayout panelLayout = findViewById(R.id.live_pusher_bp_beauty_panel);
    this.tePanelView = new TEPanelView(this);
    if (lastParamList != null) {  // Used to restore the last beauty effects
        this.tePanelView.setLastParamList(lastParamList);
    }
  this.tePanelView.showView(this);
    panelLayout.addView(this.tePanelView);
}
```

--------------------------------

### setupWithTEBeautyKit

Source: https://www.tencentcloud.com/document/product/1143/58932

Binds the TEBeautyKit object to the panel.

```APIDOC
## setupWithTEBeautyKit(TEBeautyKit beautyKit)

### Description
Binds the TEBeautyKit object so the panel can directly call methods to set properties when items are clicked.

### Parameters
- **beautyKit** (TEBeautyKit) - The TEBeautyKit object to bind.
```

--------------------------------

### Manage Video Recording

Source: https://www.tencentcloud.com/document/product/1143/53943

Starts and stops video recording, saving the resulting file to the local album.

```javascript
Component({
    methods: {
        // Start shooting
        startRecord() {
            this.setData({
                recording: true
            });
            this.ar.startRecord()
        }
        // Stop shooting
        async stopRecord() {
            const res = await this.ar.stopRecord();
            // Save the video
            wx.saveVideoToPhotosAlbum({
                filePath: res.tempFilePath
            });
            this.setData({
                recording: false
            });
        }
    }
})
```

--------------------------------

### Authenticate and copy resources

Source: https://www.tencentcloud.com/document/product/1143/45391

Initializes the SDK with license credentials and handles the authentication callback.

```java
TEBeautyKit.setupSDK(this.getApplicationContext(),LicenseConstant.mXMagicLicenceUrl,LicenseConstant.mXMagicKey, (i, s) -> {
    if (i == LicenseConstant.AUTH_STATE_SUCCEED) {
        runOnUiThread(() -> {
            Intent intent = new Intent(MainActivity.this, ThirdBeautyActivity.class);
            startActivity(intent);
       }
    } else {
        Log.e(TAG, "te license check is failed,please checke  ");
    }
});
```

--------------------------------

### Install Tencent Effect SDK via npm

Source: https://www.tencentcloud.com/document/product/1143/50099

Use this command to add the SDK package to your project dependencies.

```bash
npm install tencentcloud-webar
```

--------------------------------

### Initialize SDK and Fetch Lists

Source: https://www.tencentcloud.com/document/product/1143/50106

Use the 'created' callback to fetch available effects and filters upon SDK initialization.

```javascript
let effectList = [];
let filterList = [];
// Using the callbacks of the SDK
sdk.on('created', () => {
    // Pull and display the filter and effect list in the `created` callback
    sdk.getEffectList({
        Type: 'Preset',
        Label: 'Makeup',
    }).then(res => {
        effectList = res
    });
    sdk.getCommonFilter().then(res => {
        filterList = res
    })
})
```

--------------------------------

### Initialize and play video in cameraReady callback

Source: https://www.tencentcloud.com/document/product/1143/50101

Use this approach to display the original video as quickly as possible before SDK resources are fully loaded.

```javascript
sdk.on('cameraReady', async () => {
  // Initialize a player of the SDK. `my-dom-id` is the ID of the player’s container.
  const player = await sdk.initLocalPlayer('my-dom-id')
  // Play the video
  await player.play()
})
```

--------------------------------

### Configure Animated 2D Cute Effect

Source: https://www.tencentcloud.com/document/product/1143/48646?lang=en&pg=

Example of applying an animated motion effect using a resource path.

```objective-c
 NSString *motion2dResPath = [[NSBundle mainBundle] pathForResource:@"2dMotionRes" ofType:@"bundle"];//The absolute path of the `2dMotionRes` folder
NSString *propertyType = @"motion";        //Set the effect type, take animated effect as an example.
NSString *propertyName = @"video_keaituya"; //Specify the effect name, take animated 2D cute effect as an example.
NSString *propertyValue = motion2dResPath;  //Set the path of the animated effect.
[self.xmagicApi configPropertyWithType:propertyType withName:propertyName withData:propertyValue withExtraInfo:nil];
```

--------------------------------

### isBeautyAuthorized

Source: https://www.tencentcloud.com/document/product/1143/48646?lang=en&pg=

This method is used to get the authorization information of the effect parameter (only supports the parameter of beauty and body retouch).

```APIDOC
## isBeautyAuthorized

### Description
This API is used to get the authorization information of the effect parameter (only supports the parameter of beauty and body retouch).

### Signature
+ (BOOL)isBeautyAuthorized:(NSString * _Nullable)featureId;

### Parameters
- **featureId** (NSString *) - The effect parameter.

### Returns
- **BOOL** - The authorization information of the effect parameter.
```

--------------------------------

### initWithRenderSize

Source: https://www.tencentcloud.com/document/product/1143/48646

Initializes the SDK with a specified render size and resource configuration.

```APIDOC
## initWithRenderSize

### Description
Initializes the XMagic instance with a specific render size and asset dictionary.

### Signature
- (instancetype _Nonnull)initWithRenderSize:(CGSize)renderSize assetsDict:(NSDictionary* _Nullable)assetsDict;

### Parameters
- **renderSize** (CGSize) - The render size.
- **assetsDict** (NSDictionary*) - The resource dictionary.
```

--------------------------------

### Get Property Required Abilities

Source: https://www.tencentcloud.com/document/product/1143/51224

Retrieves the capabilities required by specific animated effect resources to determine compatibility.

```dart
Future<Map<XmagicProperty, List<String>?>> getPropertyRequiredAbilities(
    List<XmagicProperty> assetsList);
```

--------------------------------

### Initialize Beauty Panel

Source: https://www.tencentcloud.com/document/product/1143/58952

Create the XMagicImpl instance or resume it if it already exists.

```java
   private void initXMagic() {
       if (mXMagic == null) {
           mXMagic = new XMagicImpl(this, mBeautyPanelView);
       }else {
           mXMagic.onResume();
       }
   }
```

--------------------------------

### Get Device Capabilities

Source: https://www.tencentcloud.com/document/product/1143/45399

Returns a map of atomic capabilities supported by the current device, used alongside getPropertyRequiredAbilities.

```java
Map<String,Boolean> getDeviceAbilities() 
```

--------------------------------

### Initialize the AR SDK in a Component

Source: https://www.tencentcloud.com/document/product/1143/53943

This snippet demonstrates how to initialize the SDK, including setting up authentication, configuring camera parameters, and handling the 'created' and 'ready' events to load effects and filters.

```javascript
Component({
    data: {
        makeupList: [],
        stickerList: [],
        filterList: [],
        recording: false
    },
    methods: {
        async getCanvasNode(id) {
            return new Promise((resolve) => {
                this.createSelectorQuery()
                    .select(`#${id}`)
                    .node()
                    .exec((res) => {
                        const canvasNode = res[0].node;
                        resolve(canvasNode);
                    });
            });
        },
        getSignature() {
            const timestamp = Math.round(new Date().getTime() / 1000);
            const signature = sha256(timestamp + token + APPID + timestamp).toUpperCase();
            return { signature, timestamp };
        },
        // Initialize the camera type    
        async initSdkCamera() {
            // Get the onscreen canvas. The SDK will output the processed image to the canvas in real time.
            const outputCanvas = await this.getCanvasNode("main-canvas");
            // Get the authentication information
            const auth = {
                licenseKey: LICENSE_KEY,
                appId: APP_ID,
                authFunc: this.getSignature
            };
            // Construct SDK initialization parameters
            const config = {
                auth,
                camera: {
                    width:720,
                    height:1280,
                },
                output: outputCanvas,
                // Initial beauty effects (optional)
                beautify: {
                    whiten: 0.1, // The brightening effect. Value range: 0–1.
                    dermabrasion: 0.3, // The smooth skin effect. Value range: 0–1.
                    lift: 0, // The slim face effect. Value range: 0–1.
                    shave: 0, // The V shape effect. Value range: 0–1.
                    eye: 0.2, // The big eyes effect. Value range: 0–1.
                    chin: 0, // The chin effect. Value range: 0–1.
                }
            };
            const ar = new ArSdk(config);
            // The list of built-in effects and filters can be obtained in the `created` callback.
            ar.on('created', () => {
                // Get the list of built-in makeup effects and stickers
                ar.getEffectList({
                    Type: 'Preset'
                }).then((res) => {
                    const list = res.map(item => ({
                        "name": *item.Name,
                        id: item.EffectId,
                        cover: item.CoverUrl,
                        url: item.Url,
                        label: item.Label,
                        type: item.PresetType,
                    }));
                    const makeupList = list.filter(item=>item.label.indexOf('makeup')>=0)
                    const stickerList = list.filter(item=>item.label.indexOf('sticker')>=0)
                    // Render the list of effects
                    this.setData({
                        makeupList,
                        stickerList
                    });
                }).catch((e) => {
                    console.log(e);
                });
                // Built-in filters
                ar.getCommonFilter().then((res) => {
                    const list = res.map(item => ({
                        "name": *item.Name,
                        id: item.EffectId,
                        cover: item.CoverUrl,
                        url: item.Url,
                        label: item.Label,
                        type: item.PresetType,
                    }));
                    // Render the list of filters
                    this.setData({
                        filterList: list
                    });
                }).catch((e) => {
                    console.log(e);
                });
            });
            // You can set beauty filters and effects in the `ready` callback.
            ar.on('ready', (e) => {
                this._sdkReady = true
            });

            ar.on('error', (e) => {
                console.log(e);
            });
```

--------------------------------

### Initialize Resources (Before v0.3.1.1)

Source: https://www.tencentcloud.com/document/product/1143/51222

Initialize resources using the legacy path management approach.

```dart
String dir =  await BeautyDataManager.getInstance().getResDir();
 TXLog.printlog('The file path: $dir');
 TencentEffectApi.getApi()?.initXmagic(dir,(reslut) {
     _isInitResource = reslut;
     callBack.call(reslut);
     if (!reslut) {
         Fluttertoast.showToast(msg: "Failed to initialize the resources");
     }
 });
```

--------------------------------

### Initialize TEBeautyKit and Configure UI Panel

Source: https://www.tencentcloud.com/document/product/1143/58932

Initializes the beauty kit and populates the panel data models with JSON configurations based on the available feature set.

```java
//TECameraBaseActivity.java
TEBeautyKit.create(this.getApplicationContext(), beautyKit -> {
    mBeautyKit = beautyKit;
    initBeautyView(beautyKit);
});

public void initBeautyView(TEBeautyKit beautyKit){
        List<TEPanelDataModel> panelDataModels = TEUIConfig.getInstance().getPanelDataList();TEUIConfig.getInstance().getPanelDataList();
        panelDataModels.clear();
        //Add the corresponding JSON based on the package features
        TEPanelDataModel template = new TEPanelDataModel("beauty_panel/beauty_template.json", TEUIProperty.UICategory.BEAUTY_TEMPLATE);
        TEPanelDataModel beauty1 = new TEPanelDataModel("beauty_panel/beauty.json", TEUIProperty.UICategory.BEAUTY);new TEPanelDataModel("beauty_panel/beauty.json", TEUIProperty.UICategory.BEAUTY);
        TEPanelDataModel beauty2 = new TEPanelDataModel("beauty_panel/beauty_image.json", TEUIProperty.UICategory.BEAUTY);new TEPanelDataModel("beauty_panel/beauty_image.json", TEUIProperty.UICategory.BEAUTY);
        TEPanelDataModel beauty4 = new TEPanelDataModel("beauty_panel/beauty_shape.json", TEUIProperty.UICategory.BEAUTY);
        TEPanelDataModel beauty3 = new TEPanelDataModel("beauty_panel/beauty_makeup.json", TEUIProperty.UICategory.BEAUTY);


        TEPanelDataModel lut = new TEPanelDataModel("beauty_panel/lut.json", TEUIProperty.UICategory.LUT);new TEPanelDataModel("beauty_panel/lut.json", TEUIProperty.UICategory.LUT);
        TEPanelDataModel lightMakeup = new TEPanelDataModel("beauty_panel/light_makeup.json",new TEPanelDataModel("beauty_panel/light_makeup.json",
                TEUIProperty.UICategory.LIGHT_MAKEUP);
        TEPanelDataModel makeup = new TEPanelDataModel("beauty_panel/makeup.json", TEUIProperty.UICategory.MAKEUP);
        TEPanelDataModel motion = new TEPanelDataModel("beauty_panel/motion_2d.json", TEUIProperty.UICategory.MOTION);
        TEPanelDataModel motion2 = new TEPanelDataModel("beauty_panel/motion_3d.json", TEUIProperty.UICategory.MOTION);
        TEPanelDataModel motion_gesture = new TEPanelDataModel("beauty_panel/motion_gesture.json",new TEPanelDataModel("beauty_panel/motion_gesture.json",
                TEUIProperty.UICategory.MOTION);
        TEPanelDataModel seg = new TEPanelDataModel("beauty_panel/segmentation.json", TEUIProperty.UICategory.SEGMENTATION);


        panelDataModels.add(template);
        panelDataModels.add(beauty1);
        panelDataModels.add(beauty2);
        panelDataModels.add(beauty4);
        panelDataModels.add(beauty3);
        panelDataModels.add(lut);

        panelDataModels.add(lightMakeup);
        panelDataModels.add(makeup);

        panelDataModels.add(motion);
        panelDataModels.add(motion2);
        panelDataModels.add(motion_gesture);
        panelDataModels.add(seg);
    
    mTEPanelView = new TEPanelView(this);
    mTEPanelView.setTEPanelViewCallback(this);
    mTEPanelView.setupWithTEBeautyKit(beautyKit);
    mTEPanelView.showView(this);
    this.mPanelLayout.addView(mTEPanelView, new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
}
```

--------------------------------

### Configure Panel Data Models

Source: https://www.tencentcloud.com/document/product/1143/58932

Example of clearing existing panel data and adding new feature-specific JSON configurations.

```java
List<TEPanelDataModel> panelDataModels = TEUIConfig.getInstance().getPanelDataList();
        panelDataModels.clear();
        //Add the corresponding JSON according to the package features
        TEPanelDataModel template = new TEPanelDataModel("beauty_panel/beauty_template.json", TEUIProperty.UICategory.BEAUTY_TEMPLATE);
        TEPanelDataModel beauty1 = new TEPanelDataModel("beauty_panel/beauty.json", TEUIProperty.UICategory.BEAUTY);
        TEPanelDataModel beauty2 = new TEPanelDataModel("beauty_panel/beauty_image.json", TEUIProperty.UICategory.BEAUTY);
        TEPanelDataModel beauty4 = new TEPanelDataModel("beauty_panel/beauty_shape.json", TEUIProperty.UICategory.BEAUTY);
        TEPanelDataModel beauty3 = new TEPanelDataModel("beauty_panel/beauty_makeup.json", TEUIProperty.UICategory.BEAUTY);

 
        TEPanelDataModel lut = new TEPanelDataModel("beauty_panel/lut.json", TEUIProperty.UICategory.LUT);
        TEPanelDataModel lightMakeup = new TEPanelDataModel("beauty_panel/light_makeup.json",
                TEUIProperty.UICategory.LIGHT_MAKEUP);
        TEPanelDataModel makeup = new TEPanelDataModel("beauty_panel/makeup.json", TEUIProperty.UICategory.MAKEUP);
        TEPanelDataModel motion = new TEPanelDataModel("beauty_panel/motion_2d.json", TEUIProperty.UICategory.MOTION);
        TEPanelDataModel motion2 = new TEPanelDataModel("beauty_panel/motion_3d.json", TEUIProperty.UICategory.MOTION);
        TEPanelDataModel motion_gesture = new TEPanelDataModel("beauty_panel/motion_gesture.json",
                TEUIProperty.UICategory.MOTION);
        TEPanelDataModel seg = new TEPanelDataModel("beauty_panel/segmentation.json", TEUIProperty.UICategory.SEGMENTATION);

        
        panelDataModels.add(template);
        panelDataModels.add(beauty1);
        panelDataModels.add(beauty2);
        panelDataModels.add(beauty4);
        panelDataModels.add(beauty3);
        panelDataModels.add(lut);
        panelDataModels.add(lightMakeup);
        panelDataModels.add(makeup);
        panelDataModels.add(motion);
        panelDataModels.add(motion2);
        panelDataModels.add(motion_gesture);
        panelDataModels.add(seg);
```

--------------------------------

### Facial Data JSON Structure

Source: https://www.tencentcloud.com/document/product/1143/51224

Example of the JSON structure returned by the onYTDataUpdate callback containing information for up to 5 faces.

```json
{
 "face_info":[{
  "trace_id":5,
  "face_256_point":[
   180.0,
   112.2,
   ...
  ],
  "face_256_visible":[
   0.85,
   ...
  ],
  "out_of_screen":true,
  "left_eye_high_vis_ratio:1.0,
  "right_eye_high_vis_ratio":1.0,
  "left_eyebrow_high_vis_ratio":1.0,
  "right_eyebrow_high_vis_ratio":1.0,
  "mouth_high_vis_ratio":1.0
 },
 ...
 ]
}
```

--------------------------------

### Configure Core Initialization

Source: https://www.tencentcloud.com/document/product/1143/50106

Defines the input source and camera configuration for pre-initialization.

```javascript
{  input?:MediaStream|HTMLImageElement|String; // The input source   camera?:CameraConfig; // Only for camera mode  mirror?:boolean;  // Mirror or not}
```

--------------------------------

### Face Information JSON Structure

Source: https://www.tencentcloud.com/document/product/1143/51245

Example of the JSON structure returned by onYTDataUpdate and onAIDataUpdated containing facial tracking information.

```json
{
 "face_info":[{
  "trace_id":5,
  "face_256_point":[
    180.0,
    112.2,
    ...
  ],
  "face_256_visible":[
    0.85,
    ...
  ],
  "out_of_screen":true,
  "left_eye_high_vis_ratio:1.0,
  "right_eye_high_vis_ratio":1.0,
  "left_eyebrow_high_vis_ratio":1.0,
  "right_eyebrow_high_vis_ratio":1.0,
  "mouth_high_vis_ratio":1.0
 },
 ...
 ]
}
```