WeChat Mini Program SDK for Viewing

DEMO URL

Demo Download URL

Product Introduction

Overview

The POLYV WeChat Mini Program SDK for Viewing 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 Streaming Backend - Cloud Live Streaming - 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 playback. You must first pass the category review, then enable the component's permissions in the Mini Program Management Backend under "Development" - "Interface Settings".

SDK Usage Methods

The SDK provides a custom component polyv with a complete set of business logic for out-of-the-box use. It also provides components like player for playback, ppt for document display, and chatroom for chat, allowing users to flexibly combine their own business logic.

Before use, you need to 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 live streaming cloud.

Since the apiSecret is displayed in plaintext in the mini program code, there is a risk of reverse engineering. 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 into your project. 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 the WXML file.

   <view>
       <polyv />
   </view>
   

3. Call the init method in the page's onload function 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 the WXML file, passing the necessary parameters.

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

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

   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 other pages within a custom component. Doing so may cause abnormal attached/detached triggers for the player custom component under polyv, leading to abnormal viewing log data.

Change Log

2.5.0

Update Date: 2021-11-25

• Fixed a bug where the instructor's video was not visible during co-hosting.

2.2.1

Update Date: 2021-10-11

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

2.2.0

Update Date: 2021-08-04

• Added support for landscape/portrait TRTC 1v1 co-hosting.

2.1.5

Update Date: 2021-07-19

• Fixed an issue where the video was not displayed in a regular live room until the document toggle button was clicked.

2.1.4

Update Date: 2021-06-30

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

2.1.3

Update Date: 2021-06-02

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

2.1.1

Update Date: 2020-12-04

• Added support for displaying survey results.
• Other bug fixes.

2.1.0

Update Date: 2020-11-18

Features

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

2.0.7.1

Update Date: 2020-10-09

Bugfix

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

2.0.7

Update Date: 2020-09-29

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 an abnormal display on the viewer's end after a live stream ended while watching in fullscreen.

2.0.4

Update Date: 2020-07

Features

• Added token authentication for chat room role login.
• Added component parameters for controlling the display of player danmaku and player skin (see internal project documentation for details and examples).
• Updated internal project documentation.
• Other bug fixes.

2.0.0

Update Date: 2020-06

Features

• Added support for 1V4 co-hosting.
• Added player skin (pause, refresh, multi-line, fullscreen).
• Added danmaku functionality.
• Added playback speed control for replays.
• Added survey functionality.

1.2.0

Features

• Added compatibility with the laser pointer and arrow features of the POLYV Cloud Classroom client.
• Modified the UI for page turning buttons and page display.
• Added a toggle button for PPT document and player position.
• Added fullscreen and landscape functionality for PPT.
• Added support for multiple chat rooms in the mini program.

1.1.0

Features

• Added live streaming option to the video component.
• Added features for answer cards, announcements, check-in, playback restrictions, and a light theme.
• Added replay list and on-demand list.
• Added SDK initialization parameter option verifyUrl.

Performance Improvements

• Optimized dynamic latency handling for PPT.
• Modified mute and kick operations in the chat room.

1.0.0

• Initial release.