微信观看小程序SDK(推荐)

产品介绍

概述

POLYV微信观看小程序SDK以组件的方式提供了直播播放、点播播放、文档绘制等功能,供用户灵活组合自己的业务逻辑。

功能特性

功能 表述
视频 支持直播视频和点播视频观看,暂不支持点播加密视频
文档 PPT、白板以及画笔展示,暂不支持动效PPT
连麦 支持1V1语音和视频连麦功能
聊天 支持在线文本表情聊天

阅读对象

本文档为技术文档,需要阅读者:
- 拥有基本的小程序开发能力
- 准备接入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

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

方法二:传入polyv云直播的access key

由于在小程序代码中apiSecret是明文显示,存在小程序被反编译风险。故建议使用方法一

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

组件的使用

一、使用polyv组件。可参考demo的watch
  1. 拷贝sdk代码到自己的项目中,在使用到sdk的page的json文件中引入组件

    {
     "usingComponents": {
       "polyv": "*/polyv-sdk/components/polyv/polyv"
     }
    }
    
  2. 在wxml中使用polyv组件
    <view>
    <polyv />
    </view>
    
  3. 在页面的onload中调用init方法,在onUnload中调用destory方法

    init方法初始化观看,获取频道详情、初始化socket事件等。

    import plv from '*/polyv-sdk/index';
    // onLoad
    onLoad() {
       const options = {
         channelId: '', // 频道ID
         openId: '', // 用户openId
         userName: '', // 用户名
         avatarUrl: '' // 用户头像
       };
       plv.init(options);
    }
    // onUnload
    onUnload() {
      plv.destory();
    }
    
二、灵活组合组件。可参考demo的watch2
  1. 在使用到sdk的page的json文件中引入组件

    {
     "usingComponents": {
       "player": "*/polyv-sdk/components/player/player",
        "ppt": "*/polyv-sdk/components/ppt/ppt",
        ...
     }
    }
    
  2. 在wxml中使用组件,传入必要的参数。
    <view>
    <player
        videoOption="{{ videoOption }}"
           bind:onLiveStatusChange="playerLiveStatusChange"
       />
    <ppt />
    </view>
    
  3. 在页面的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.destory();
       }
    });
    

组件详解请参考demo中doc文件

demo

demo下载地址

change log

1.1.0

Features

  • 增加video组件直播选项
  • 增加答题卡、公告、签到、限制播放、白天皮肤功能
  • 新增回放列表&点播列表
  • 新增SDK初始化参数选项 verifyUrl

Performance Improvements

  • 优化PPT动态时延处理
  • 修改聊天室禁言及踢人操作

1.0.0

  • 初始版本
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...