Beauty AR Web allows you to implement AR beautification, filters, makeup, stickers, and other features on websites and in Weixin mini programs. This document describes how to quickly run a web application or Weixin mini program that supports real-time beautification locally. Based on this application, you can implement other features as instructed in relevant documents.
Note:
This project is a test project intended for local testing only. To officially launch your project with Beauty AR Web capabilities, you need to purchase an official license and configure the website domain in the product console. For more information, see Creating an Official License.
In the RT-Cube console, go to the Web Licenses page and click Create trial license. Enter the project name and the URL for local development as the domain. Here, localhost:8090 is used as an example. Then, click Confirm.
A web license can be used for a domain and a mini program APPID. Here, to help you quickly run the demo locally, localhost is used as the URL for local development. For your actual project, this needs to be replaced with the website domain.
To run a Weixin mini program, enter its APPID, which can be obtained from the Weixin Official Accounts Platform by logging in with your mini program account and selecting Settings > Account Information.
Note
A trial license is valid for 14 days and can be renewed once to extend the validity to 28 days in total. You can create trial licenses for up to three projects. For official projects, go to the web license purchase page to purchase an official license.
Getting the license key and token
After the creation, you can see the information of the created test project in the project list and get the license token for Beauty AR Web and the license key for the test project.
Note
The license token is used to calculate the authentication signature, so make sure to keep it secure and confidential. Here, the token is used to calculate the signature on the frontend just to help you run the demo locally. In a real production environment, you need to implement the signature algorithm on the server.
A web license can be used for a website or a Weixin mini program. Follow the steps below according to your specific business scenario.
Weixin Mini Program
1. Go to the Weixin Official Accounts Platform, log in with your mini program account, and select Settings > Account Information to get the APPID of your Weixin mini program.
2. Click here to download the demo source code and decompress it to your local path.
3. Import the decompressed project to Weixin DevTools and enter the APPID of the Weixin mini program.
4. Go to the miniprogram directory and run npm i to install the dependencies. Then, go to Weixin DevTools and select Tools > Build npm. For more information, visit here.
5. Replace the specified configuration items in pages/camera/camera.js with the license key, token, and APPID obtained in step 1 and the Weixin mini program APPID obtained in step 1.
6. Select Compile > Preview and scan the QR code with your mobile phone to try out the SDK.
Note
Do not run the project directly on the emulator of Weixin DevTools. As the WebGL canvas heavily rendered by the SDK is currently not supported by Weixin DevTools, we recommend that you debug the code by selecting Compile > Preview and scanning the QR code with your mobile phone.
Website
1. Click here to download the demo source code and decompress it to your local path.
2. Open the decompressed project and replace the specified configuration items with the license key, token, and APPID obtained in step 1 as shown below:
3. Run the project in the local development environment.
Note
Before running your project locally, make sure the nodejs environment is already installed on the device.
Run the following commands successively in the project directory and access localhost:8090 in the browser to try out the capabilities of Beauty AR Web.
# Install dependencies
npm i
# Compile and run the code
npm run dev
After following the steps above, you can try out the filters and effects of the SDK for web in the Weixin mini program or desktop browser. You can use the built-in materials to try out various makeup filters and effects as instructed in Overview, or use more capabilities of Beauty AR Web such as custom stickers, makeup, and filters. For detailed directions on how to customize effect materials, see Material Customization.
Yes
No
Was this page helpful?