WeChat Mini Program SDK for Viewing

DEMO URL

Demo Download URL

Product Introduction

Overview

The POLYV WeChat Mini Program SDK provides components for live streaming, on-demand playback, document rendering, and more, allowing users to flexibly combine their own business logic.

Features

Target Audience

This document is a technical document intended for readers who:

• Have basic Mini Program development skills
• Are preparing to integrate or have already integrated with the Polyv Video Cloud
• Have a basic understanding of how to use the Polyv Video Cloud

Usage Steps

Development Preparation

Obtain Access Key

Log in to the Polyv Live Backend - Cloud Live - Development Settings - Identity Authentication

Configure WeChat Interface Whitelist

request合法域名
https://miniapp.agoraio.cn
https://uni-webcollector.agora.io
https://router.polyv.net
https://api.polyv.net
https://prtas.videocc.net
https://rtas.videocc.net
https://hls.videocc.net
https://player.polyv.net
使用连麦功能需加上以下域名：
https://miniapp-1.agoraio.cn
https://miniapp-2.agoraio.cn
https://miniapp-3.agoraio.cn
https://miniapp-4.agoraio.cn

socket合法域名
wss://chat.polyv.net
wss://miniapp.agoraio.cn

Configure WeChat Live Streaming Permissions

The SDK uses WeChat's live-player for live streaming. You must first pass the category review, then enable the component in the Mini Program Management Backend under "Development" - "Interface Settings".

SDK Usage

The SDK provides a custom component polyv with a complete set of business logic for out-of-the-box use. It also offers components like player, ppt document, and chatroom for flexible combination.

Before use, call the setApp method in app.js的onLaunch中.

Method 1 (Recommended): Pass the verifyUrl verification interface

import plv from '*/polyv-sdk/index';
onLaunch() {
    plv.setApp({
        apiId: '',
        verifyUrl: ''
    });
}

For details on the verifyUrl verification interface, refer to doc/polyv-mp-live-sdk.md in the demo

Method 2: Pass the access key of the Polyv Cloud Live

Since apiSecret is displayed in plaintext in Mini Program code, there is a risk of decompilation. Therefore, Method 1 is recommended.

import plv from '*/polyv-sdk/index';
onLaunch() {
    plv.setApp({
        apiId: '',
        apiSecret: ''
    });
}

Component Usage

1. Using the polyv component. Refer to watch in the demo

1. Copy the SDK code to your project and import the component in the JSON file of the page using the SDK.

   {
     "usingComponents": {
       "polyv": "*/polyv-sdk/components/polyv/polyv"
     }
   }
   

2. Use the polyv component in wxml.

   <view>
       <polyv />
   </view>
   

3. Call the init method in the page's onload and the destroy method in onUnload.

   The init method initializes viewing, retrieves channel details, initializes socket events, etc.

   import plv from '*/polyv-sdk/index';
   // onLoad
   onLoad() {
       const options = {
         channelId: '', // 频道ID
         openId: '', // 用户openId
         userName: '', // 用户名
         avatarUrl: '', // 用户头像
          userId: '' // 2.0.0及以上版本的demo需要使用 userId 设置学员唯一id
       };
       plv.init(options);
   }
   // onUnload
   onUnload() {
      plv.destroy();
    }
   

2. Flexible component combination. Refer to watch2 in the demo

1. Import the components in the JSON file of the page using the SDK.

   {
     "usingComponents": {
       "player": "*/polyv-sdk/components/player/player",
         "ppt": "*/polyv-sdk/components/ppt/ppt",
        ...
     }
   }
   

2. Use the components in wxml, passing necessary parameters.

   <view>
       <player
           videoOption="{{ videoOption }}"
           bind:onLiveStatusChange="playerLiveStatusChange"
       />
       <ppt />
   </view>
   

3. Call the init method in the page's onload.

   import plv from '*/polyv-sdk/index';
   Page({ 
       onLoad() {
           const options = { ... };
           plv.init(options)
               .then(data => {
                   const { detail, chat } = data;
                   // 处理业务逻辑
               })
               .catch(err => {
                   // 异常处理
               });
       },
       onUnload() {
           plv.destroy();
       }
   });
   

For detailed component documentation, refer to doc/polyv-mp-live-sdk.md in the demo

FAQ

• What should I pay attention to when using the Polyv component? (1) Do not execute wx.navigateTo or similar navigation to pages within custom components. This can cause abnormal attached/detached triggers in the player custom component under polyv, leading to incorrect viewing log data.

Change Log

2.5.0

Update Date: 20211125

• Fixed a bug where the instructor's video was not visible during live mic.

2.2.1

Update Date: 20211011

• Updated the player component demo, i.e., pages/player-demo.
• Fixed several bugs.

2.2.0

Update Date: 20210804

• Supports landscape and portrait TRTC 1v1 live mic.

2.1.5

Update Date: 20210719

• Fixed an issue where the document display required clicking the switch document button in a regular live room after entering.

2.1.4

Update Date: 20210630

• Fixed an issue where chat history was not fully displayed when switching tabs.

2.1.3

Update Date: 20210602

• Fixed an issue where the like count was not updating.

2.1.1

Update Date: 20201204

• Supports displaying survey results.
• Other bug fixes.

2.1.0

Update Date: 20201118

Features

• Improved documentation for integrating interactive feature components separately in the SDK; added demo (watch2).

2.0.7.1

Update Date: 20201009

Bugfix

• Fixed an issue where the PPT pen was not displayed under the video component.

2.0.7

Update Date: 20200929

Bugfix

• Fixed an issue where the PPT pen was not displayed.

2.0.6

Update Date: 2020.09.11

Features

• Added param4 and param5 to interaction data.

2.0.5

Update Date: 2020.08.11

Features

• Fixed abnormal display on the viewer side after a live stream ends in fullscreen mode.

2.0.4

Update Date: 2020.07

Features

• Added token authentication for chat room role login.
• Added component parameters for displaying player danmaku and player skin (details and examples refer to internal project documentation).
• Updated internal project documentation.
• Other bug fixes.

2.0.0

Update Date: 2020.06

Features

• Supports 1V4 live mic.
• Added player skin (pause, refresh, multi-line, fullscreen).
• Added danmaku functionality.
• Added playback speed control.
• Added survey functionality.

1.2.0

Features

• Compatible with laser pointer and arrow functions in the Cloud Classroom client.
• Modified page turn button and page display UI.
• Added a button to switch between PPT document and player positions.
• Added PPT fullscreen and landscape functionality.
• Mini Program supports multi-room chat.

1.1.0

Features

• Added live streaming option for the video component.

• Added quiz card, announcement, check-in, playback restriction, and light skin features.

• Added replay list & on-demand list.

• Added SDK initialization parameter option verifyUrl.

Performance Improvements

• Optimized PPT dynamic latency handling.

• Modified chat room mute and kick operations.

1.0.0

• Initial version.