微信觀看小程式SDK
DEMO位址
產品介紹
概述
POLYV微信觀看小程式SDK以元件的方式提供了直播播放、點播播放、文件繪製等功能，供使用者靈活組合自己的業務邏輯。
功能特性
| 功能 | 表述 |
|---|---|
| 影片 | 支援直播影片和點播影片觀看，暫不支援點播加密影片 |
| 文件 | PPT、白板以及畫筆展示，暫不支援動效PPT |
| 連麥 | 支援1V4語音和影片連麥功能（連麥需要開通live-player和live-pusher元件） |
| 聊天 | 支援線上文字表情聊天 |
閱讀對象
本文檔為技術文件，需要閱讀者：
- 擁有基本的小程式開發能力
- 準備接入polyv影片雲或已接入的客戶
- 對polyv影片雲使用方法有基礎的了解
使用步驟
開發準備
取得Access Key
登入保利威直播後台 - 雲直播 - 開發設定 - 身分認證
微信介面白名單配置
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
配置微信直播權限
sdk播放直播使用了微信live-player，需要先通過類目審核，再在小程式管理後台，「開發」-「介面設定」中自助開通該元件權限。
SDK使用方法
sdk提供了自訂元件polyv提供一套完整的業務邏輯，供使用者開箱即用。也提供了player播放元件、ppt文件元件、chatroom聊天室元件等供使用者靈活組合自己的業務邏輯。
在使用之前需要在app.js的onLaunch中呼叫setApp方法
方法一（推薦）：傳入verifyUrl驗證介面
import plv from '*/polyv-sdk/index';
onLaunch() {
plv.setApp({
apiId: '',
verifyUrl: ''
});
}
verifyUrl校驗介面詳情參考 demo 中的 doc/polyv-mp-live-sdk.md
方法二：傳入polyv雲直播的access key
由於在小程式程式碼中apiSecret是明文顯示，存在小程式被反編譯風險。故建議使用方法一
import plv from '*/polyv-sdk/index';
onLaunch() {
plv.setApp({
apiId: '',
apiSecret: ''
});
}
元件的使用
一、使用polyv元件。可參考demo的watch
拷貝sdk程式碼到自己的專案中，在使用到sdk的page的json檔案中引入元件
{ "usingComponents": { "polyv": "*/polyv-sdk/components/polyv/polyv" } }在wxml中使用polyv元件
<view> <polyv /> </view>在頁面的onload中呼叫init方法，在onUnload中呼叫destroy方法
init方法初始化觀看，取得頻道詳情、初始化socket事件等。
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(); }
二、靈活組合元件。可參考demo的watch2
在使用到sdk的page的json檔案中引入元件
{ "usingComponents": { "player": "*/polyv-sdk/components/player/player", "ppt": "*/polyv-sdk/components/ppt/ppt", ... } }在wxml中使用元件，傳入必要的參數。
<view> <player videoOption="{{ videoOption }}" bind:onLiveStatusChange="playerLiveStatusChange" /> <ppt /> </view>在頁面的onload方法中呼叫init方法。
import plv from '*/polyv-sdk/index'; Page({ onLoad() { const options = { ... }; plv.init(options) .then(data => { const { detail, chat } = data; // 处理业务逻辑 }) .catch(err => { // 异常处理 }); }, onUnload() { plv.destroy(); } });
元件詳解請參考 demo 中的 doc/polyv-mp-live-sdk.md
FAQ
- 使用Polyv元件需要注意什麼？ （1）不要在自訂元件中執行wx.navigateTo等跳轉到pages頁面。因為該情況下polyv下的player自訂元件attached/detached觸發異常，導致觀看日誌資料異常。
change log
2.5.0
更新時間： 20211125
- 修復連麥時看不到講師畫面的bug。
2.2.1
更新時間： 20211011
- 更新player元件demo，即pages/player-demo。
- 修復若干bug。
2.2.0
更新時間： 20210804
- 支援橫豎屏TRTC 1v1連麥。
2.1.5
更新時間： 20210719
- 修復進入開播普通直播間，需要點擊切換文件按鈕才顯示畫面的問題。
2.1.4
更新時間： 20210630
- 修復切換 tab，聊天記錄顯示不全的問題。
2.1.3
更新時間： 20210602
- 修復點讚次數不更新的問題。
2.1.1
更新時間： 20201204
- 支援顯示問卷結果。
- 其他問題修復。
2.1.0
更新時間： 20201118
Features
- 完善sdk單獨整合互動功能元件文件、增加demo（watch2）。
2.0.7.1
更新時間： 20201009
bugfix
- 修復video元件下ppt畫筆不顯示問題。
2.0.7
更新時間： 20200929
bugfix
- 修復ppt畫筆不顯示問題。
2.0.6
更新時間： 2020.09.11
Features
- 互動資料增加param4和param5。
2.0.5
更新時間：2020.08.11
Features
- 修復全屏觀看直播，直播結束後觀看端顯示異常。
2.0.4
更新時間：2020.07
Features
- 聊天室角色登入增加token鑑權。
- 增加是否顯示播放器彈幕和播放器皮膚元件參數（詳情和範例請參考專案內部文件）。
- 專案內部文件更新。
- 其他問題修復。
2.0.0
更新時間： 2020.06
Features
- 支援1V4連麥。
- 增加播放器皮膚（暫停、重新整理、多線路、全屏）。
- 增加彈幕功能。
- 增加回放倍速播放。
- 增加問卷功能。
1.2.0
Features
- 相容雲課堂客戶端雷射筆、箭頭功能。
- 修改翻頁按鈕和頁面顯示ui。
- 增加ppt文件和播放器位置切換按鈕。
- 增加ppt全屏和橫屏功能。
- 小程式支援聊天室多房間。
1.1.0
Features
增加video元件直播選項。
增加答題卡、公告、簽到、限制播放、白天皮膚功能。
新增回放列表&點播列表。
新增SDK初始化參數選項 verifyUrl。
Performance Improvements
優化PPT動態時延處理。
修改聊天室禁言及踢人操作。
1.0.0
- 初始版本。
