SDK Integration

Mobile SDK Integration

Personal Information Protection Rules

Please follow the PAG SDK Personal Information Protection Rules for accessing and using the SDK

SDK Acquisition

Latest SDK:SDK download

The Enterprise Edition SDK contains the word 'enterprise', but the Community Edition does not.

Community Edition Feature Suffix:

  • No suffix: The suffix free version is a full version, and the Android platform includes a software decoder that can be used back in case of hardware decoding failure. iOS does not have a built-in software decoder due to good hardware decoder compatibility.
  • Noffavc: The version with the suffix of noffavc does not contain a software decoder internally, but can support external injection of the decoder. This version is not available on the iOS platform.

Enterprise Edition Feature Suffix:

  • No suffix: The suffix free version is a basic version, which does not contain the Movie module and supports multi-byte emoji, but includes material encryption and 3D layer capabilities. iOS provides additional support for multi-byte emoji.
  • Noffavc: The version with the suffix of noffavc does not contain Movie module and multi-byte emoji capabilities, does not contain software decoder internally, but can support external injection of decoder. iOS does not have a built-in software decoder due to good hardware decoder compatibility.
  • Movie: The version with the suffix of movie includes audio playback, material encryption, one-click video replacement with placeholder image, video files export and 3D layers, and multi-byte emoji capabilities.

Unlike the Community Edition, the access of the Enterprise Edition requires SDK authentication

Platform Description:

  • The Android SDK is an aar file, supporting armeabi, armv7a, arm64
  • The iOS SDK is a framework file, which provides full versions (arm64, simulator x84_64/arm64) of dynamic libraries and static libraries. Static libraries only support the SDK download page and manually import them after downloading.


Android Integration

Basic Requirements

  • Support Android 4.4 and above system
  • It is recommended to use gradle 3.0 and above version for compilation

aar integration

  1. Place the aar file of libpag in the libs directory of the Android project
  2. Add aar library dependencies
    Add library dependencies for libpag in the app/build. gradle file of the app
    android {
        repositories {
        flatDir {
            dirs 'libs'
        }
    }
    
    dependencies {
        //libpag's core library
        //Replace libpag_enterprise_4.2.41_android_armeabi_armv7a_arm64v8a.aar with the name of aar file you downloaded
        implementation(name: 'libpag_enterprise_4.2.41_android_armeabi_armv7a_arm64v8a.aar', ext: 'aar')
        implementation("androidx.exifinterface:exifinterface:1.3.3")
    }

Note: You need to add the libpag keep rule in the ProGuard list:

    -keep class org.libpag.** {*;}
    -keep class androidx.exifinterface.** {*;}

After the configuration is complete, sync it before compiling.

maven integration

It provides six versions (take version 4.2.41 as an example):

Enterprise basic version:com.tencent.tav:libpag-enterprise:4.2.41. It does not include the Movie module and can't support multi-byte emoji, but includes material encryption and 3D layer capabilities.

Enterprise movie version:com.tencent.tav:libpag-enterprise:4.2.41-movie. It includes audio playback, material encryption, one-click video replacement with placeholder image, video files export, 3D layers and multi-byte emoji capabilities.

Enterprise noffavc version:com.tencent.tav:libpag-enterprise:4.2.41-noffavc. It does not contain the Movie module and multi-byte emoji capabilities, does not contain a software decoder internally, but supports external injection of the decoder.

Community basic version:com.tencent.tav:libpag:4.2.41. It does not support multi-byte emoji, but include the basic capabilities of PAG.

Community harfbuzz version:com.tencent.tav:libpag:4.2.41-harfbuzz. It supports multibyte emoji capabilities.

Community noffavc version:com.tencent.tav:libpag:4.2.41-noffavc. It does not support multi-byte emoji, does not contain a software decoder internally, but supports external injection of the decoder.

i. Modify the build.gradle file under the root project directory and addmavenCentral()

buildscript {

    repositories {
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

ii. Add library dependencies for libpag in the app/build. gradle file of the app

Basic version:

    dependencies {
        //Basic version. If you want to keep the latest version, you can use latest.release to refer to it
        implementation 'com.tencent.tav:libpag-enterprise:latest.release'
    }

Movie version:

    dependencies {
        // Use the movie version with the movie suffix:
        implementation 'com.tencent.tav:libpag-enterprise:4.2.41-movie'
    }

Noffavc version:：

    dependencies {
        // Use the noffavc version with the noffavc suffix:
        implementation 'com.tencent.tav:libpag-enterprise:4.2.41-noffavc'
    }

Note： You need to add libpag's keep rule in the ProGuard list:

    -keep class org.libpag.** {*;}
    -keep class androidx.exifinterface.** {*;}

After the configuration is complete, sync it before compiling.

Official demo download

iOS Integration

Basic Requirements

  • Support iOS9 and above system
  • It is recommended to use Xcode11.0 and above version for compilation

Framework integration

  1. Place libpag's framework files libpag.xcframework and FFMovie.xcframework (for the movie version) in the iOS project directory.
  2. In the project engineering, configure the General->Embedded Binaries of the Target used, and add libpag.xcframework and FFMovie.xcframework (for the movie version).
  3. Since Bitcode has been deprecated by Apple, configure Build Settings->Build Options->Enable Bitcode to No.

cocoapods integration

Modify the Podfile file in the app directory, and add the corresponding libpag reference.

The following takes 4.2.41 as an example, and please select the corresponding version for business as needed.

Enterprise movie version:

    pod 'libpag-enterprise', '4.2.41-movie'

Enterprise basic version:

    pod 'libpag-enterprise', '4.2.41'

Community version:

    pod 'libpag', '4.2.41'

Note: For the latest SDK version, please refer to: SDK download page

Swift Package Manager integration

Open File > Swift Packages > Add Package Dependency in Xcode project

Add

Enterprise edition:

  https://github.com/libpag/pag-enterprise-ios.git

Community version:

  https://github.com/libpag/pag-ios.git

Then select the desired version.

Carthage integration

Supported from version 4.2.100

Create a carfile in the project directory and add libpag dependency.

Enterprise edition:

  binary "https://libpag.github.io/pag-enterprise-ios/Carthage/libpag-enterprise.json" == 4.2.100

Community version:

  binary "https://libpag.github.io/pag-ios/Carthage/libpag.json" == 4.2.100

Call it in the project directory:

  Carthage update

After successful loading, you can find libpag.xcframework in the Carthage/Build directory.

Link dynamic library
Open the project and drag libpag.xcframework into General -> Frameworks, Libraries, and Embedded Content in project settings to use it.

Web integration

Features

  • Web platform capability adaptation, supporting full capabilities of libpag
  • Based on WebAssembly + WebGL

Quick Start

It is the PAG Web terminal, consisting of libpag.js + libpag.wasm.br files.

<canvas class="canvas" id="pag"></canvas>
<script src="https://cdn.jsdelivr.net/npm/libpag@latest/lib/libpag.min.js"></script>
<script>
  window.onload = async () => {
    // Instantiating the PAG
    const PAG = await window.libpag.PAGInit();
    // Get PAG material data
    const buffer = await fetch('https://pag.qq.com/file/like.pag').then((response) => response.arrayBuffer());
    // Load the PAG material as a PAGFile object
    const pagFile = await PAG.PAGFile.load(buffer);
    // Set the canvas size to the size of the PAGFile
    const canvas = document.getElementById('pag');
    canvas.width = pagFile.width();
    canvas.height = pagFile.height();
    // Instantiate the PAGView object
    const pagView = await PAG.PAGView.init(pagFile, canvas);
    // Play PAGView
    await pagView.play();
  };
</script>

PS: Only one PAG object needs to be instantiated globally.

Browser Compatibility

Chrome
Chrome		Safari
Safari		Chrome
Chrome for Android		Safari
Safari on iOS		QQ Browser Mobile
Chrome >= 69Safari >= 11.3Android >= 7.0iOS >= 11.3last 2 versions

Compatibility of more versions is in progress

The above compatibility list only represents the compatibility that can be run. For users who need mobile terminal access, you need to read this compatibility article

More

Web-lite：https://github.com/Tencent/libpag/tree/main/web/lite

Github：https://github.com/Tencent/libpag/blob/main/web/README.md

Web demo：https://github.com/libpag/pag-web

Official demo download

WeChat Mini Program integration

Libpag-miniprogram is the SDK of libpag on the WeChat Mini Program platform

Welcome to the alpha version! Please feel free to use it and share your feedback with us🎉

Features

  • Web platform capability adaptation, supporting libpag full capabilities
  • Based on WebAssembly + WebGL

Quick Start

It is the PAG Web terminal, consisting of libpag.js + libpag.wasm.br files.

  1. NPM dependencies
$ npm install libpag-miniprogram

  1. Click "WeChat Developer Tools" - "Tools" - "Build npm" to build the mini program npm dependencies

  2. Copy the node_modules/libpag-miniprogram/lib/libpag.wasm.br file to the utils directory

  3. Initialize the PAG

// index.js
import { PAGInit } from 'libpag-miniprogram';

Page({
  async onReady() {
    this.PAG = await PAGInit({locateFile: (file) => '/utils/' + file});
  }
})
  1. Play PAG animation
<!-- index.wxml -->
<canvas type="webgl" id="pag" style="width: 300px; height:300px;"></canvas>

// index.js
wx.createSelectorQuery()
  .select('#pag')
  .node()
  .exec(async (res) => {
    const canvas = res[0].node;
    const buffer = await loadFileByRequest('https://pag.qq.com/file/test.pag');
    const pagFile = await this.PAG.PAGFile.load(buffer);
    const pagView = await this.PAG.PAGView.init(pagFile, canvas);
    pagView.play();
  });

const loadFileByRequest = async (url) => {
  return new Promise((resolve) => {
    wx.request({
      url,
      method: 'GET',
      responseType: 'arraybuffer',
      success(res) {
        if (res.statusCode !== 200) {
          resolve(null);
        }
        resolve(res.data);
      },
      fail() {
        resolve(null);
      },
    });
  });
};

More

lite version:https://github.com/Tencent/libpag/tree/main/web/lite/wechat

Desktop integration

Access Method

The desktop terminal (Windows, Linux) does not currently provide a unified product library, and developers need to build it themselves according to the source code, but we will provide compilation guidelines. Desktop macOS platform supports compiled artifact libraries (minimum supported version is 4.3.2). API interfaces between different platforms are consistent.

The specific reasons are as follows:

  1. There is no unified UI framework on Windows;
  2. Due to differences in CPU models or system versions on Linux, a unified product library is difficult to be fully compatible.

Source Code Download

The main implementation of the PAG is located in the C++ layer code, and the platform provides a rendering environment for the drawing of the PAG, so all the code is located in the GitHub repository. https://github.com/tencent/libpag

After downloading the source code, it is necessary to pull third-party library dependencies

macOS and Linux Platforms:

  ./sync_deps.sh

Other Platforms:

   npm install -g depsync
   depsync

Under the root directory of the source code, there are platform side folders, such as Android, iOS, Web, Linux, Mac, Win, etc. The project files on each platform side are in these directories, and they all depend on the C++ main code in the repository.

API Interface Use

In the PAG source code project, basically all the methods provided by the C++ layer are covered by test cases. If you want to know the specific usage method, it is a good idea to view the relevant test cases.


macOS integration

Basic Requirements

  • macOS 10.14 or later

Artifact library integration.

cocoapods integration

Modify the Podfile file under the App directory and add the reference to libpag accordingly.

The following takes 4.3.2 as an example, and please select the corresponding version for business as needed. Community version:

pod 'libpag-macOS', '4.3.2'
Swift Package Manager integration

Open File > Swift Packages > Add Package Dependency in Xcode project

Add

  https://github.com/libpag/pag-mac.git

Then select the desired version

Carthage integration

Create a carfile in the project directory and add libpag dependency.

Enterprise edition:

  binary "https://libpag.github.io/pag-mac/Carthage/libpag.json" == 4.2.3

Source code compilation and building

The macOS project engineering is located in the mac folder of the source code root directory and is an Xcode project that developers can build on their own.

Official demo download


Windows integration

Compilation Tools

  • Visual Studio Minimum version requirement VS2015pl
  • Node.js The foundation of PAG dependency management
  • depsync For dependency management in PAG

Environment Preparation

  1. Obtain and install Node.js from Node.js official website
  2. Install it through npm 
    npm install depsync -g
Run the Demo
  1. Executelibpag\win\Win32Demo.slnto start the Demo project.
  2. Run the Demo. The first execution will synchronize dependencies and compile PAGs, which can be time-consuming.
  3. The pag.lib built with Demo is now released. If you need to build a debug version, you can refer to the guidelines below.
Use PAG【Angle backend】

  1. When running for the first time, execute in the libpag root directory

    depsync

  2. Execute cmake-build in the root directory to create PAG, which will generate 32-bit and 64-bit pag.lib at the same time

    node .\vendor_tools\cmake-build pag -p win -o .\win\paglib -v -i -DPAG_BUILD_SHARED=OFF
    • -p platform，Select win under Windows
    • -o output，Specify output directory
    • -i incremental，Incremental compilation switch, which will clean up the compilation directory when closed
    • -d debug，Debug switch
    • -v verbose，Detailed Print Log
    • DPAG_BUILD_SHARED Dynamic library compilation switch

  1. Header file location

    libpag\include

  2. When using it in your own project, you also need to add two system libraries in Project Properties -> Linker -> Input -> Additional Dependencies

    Bcrypt.lib
ws2_32.lib

  3. When using the Angle backend, the executable program needs to be linked to the Angle dynamic library

    libpag\vendor\angle\win\
Using PAG【QT backend】

  • Demo location:

    libpag\qt

  • Please install the VS2019 version in advance, at least two submodules [Desktop Development Using C++] and [Universal Windows Platform Development] must be installed at the same time.

  • Search ToolChain in the option menu of CLion, set the default compilation tool to Visual Studio, and select the amd64 architecture.

  • Use CLion to open the qt folder in the root directory. The first refresh will prompt that QT SDK cannot be found. Please open the automatically generated qt/QTCMAKE.cfg configuration file and modify the QT path to the local installation path. For example: C:/Qt/Qt5.13.0/5.13.0/msvc2017_64/lib/cmake.

  • Open the configuration panel of the PAGViewer target in CLion, and fill in the path of the local QT DLL library in the Environment Variables line. For example: PATH=C:\Qt\Qt5.13.0\5.13.0\msvc2017_64\bin.

  • Finally, compile and run the PAGViewer target.


Linux integration

Basic Requirements:

  • gcc version should not be lower than 7.0

Compile Build

  1. Developers refer to Linux_build.md in the root directory of the source code to complete the installation of dependent environments

  2. Complete the build of the pag library file through build_linux.sh in the root directory

  3. The compiled header files and library files are located in the linux/vendor directory

Test material acquisition.

PAG test material download

← Export PAG FilesUse Configuration Panel →