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

产品介绍

概述

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

功能特性

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

阅读对象

本文档为技术文档,需要阅读者:
- 拥有基本的小程序开发能力
- 准备接入polyv视频云或已接入的客户
- 对polyv视频云使用方法有基础的了解

使用步骤

开发准备

获取Access Key

登录保利威直播后台 - 云直播 - 开发设置 - 身份认证

微信接口白名单配置

request合法域名

https://document.polyv.net


https://api.polyv.net


https://player.polyv.net


https://router.polyv.net


https://livestatic.videocc.net


https://prtas.videocc.net


https://rtas.videocc.net


https://apichat.polyv.net


https://chat.polyv.net


https://miniapp.agoraio.cn


https://uni-webcollector.agora.io


https://live.polyv.cn


https://apollo.polyv.net


https://doc.polyv.net


https://doc-2.polyv.net

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

https://doc.polyv.net


https://doc-2.polyv.net

配置微信直播权限

sdk播放直播使用了微信live-player,需要先通过类目审核,再在小程序管理后台,「开发」-「接口设置」中自助开通该组件权限。

使用方法

sdk提供了自定义组件polyv提供一套完整的业务逻辑,供用户开箱即用。也提供了player播放组件、ppt文档组件、chatroom聊天室组件等供用户灵活组合自己的业务逻辑。

在使用之前需要在app.js的onLaunch中调用setApp方法,传入polyv云直播的access key。

import plv from '*/polyv-sdk/index';
onLaunch() {
    plv.setApp({
        appId: '',
        appSecret: ''
    });
}
一、使用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

  • v 1.0.0

    初始版本

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

直播观看小程序开发

播放界面


开发前准备

1.小程序微信开发者后台设置-开发设置-服务器域名中配置 [request合法域名]


开始开发


1.获取频道直播播放地址

index.wxml

<view class="video-box">
    <live-player id="polyvLiveVideo" class="vp-v" src="{{video.src}}" autoplay></live-player>
</view>

index.js

//引用polyvlive.js
import polyvLive from '../../utils/polyvlive.js';

//设置频道信息
var liveUid = "e3wx706i3v";
var liveVid = "103915";
var liveVideoContext = wx.createLivePlayerContext('polyvLiveVideo');

polyvLive.getVideo({
    uid: liveUid,
    vid: liveVid,
    videoContext: liveVideoContext,
    success: (videoInfo) => {
      // set video src and poster
      this.setPlayerSrc(videoInfo);
    },
    error: (res) => {
      //console.log(res.error);
    },
    onStartLive: ()=>{
      // set latest video src
      this.setNewPlayerSrc();
    }
});

setNewPlayerSrc() {
    polyvLive.getNewVideo((videoInfo)=>{
        this.setPlayerSrc(videoInfo);
    });
}

setPlayerSrc(videoInfo) {
    this.setData({
        video: {
            src: videoInfo.flvSrc,
            poster: videoInfo.poster
        }
    });
}

选项说明

uid

类型:String
说明:直播账户id

vid

类型:String
说明:直播频道id

videoContext

类型:String
说明:视频组件控制,详情查看

params

类型:object
说明:播放日志参数,可设置值并且直播后台观看日志查询中显示对应字段名称如下

参数值可选 说明
param1 用户ID
param2 昵称

success(videoInfo)

类型:Function
说明:获取视频信息成功时触发

参数:videoInfo
参数类型:object
参数说明:

参数 参数说明
src 视频m3u8播放地址,获取成功后设置为video组件的src
flvSrc 视频flv播放地址,获取成功后设置为live-player组件的src
poster 视频封面
title 视频标题
waitImage 暖场图片/暖场视频,以返回链接后缀判断图片/视频类型
logoImage logo图片地址
logoHref logo的点击跳转链接
logoPosition logo位于播放器位置
logoOpacity logo透明度

error(res)

类型:Function
说明:获取视频信息失败时触发

参数:res
参数类型:object
参数说明:

参数 参数说明
code 错误状态码
error 错误详细说明

onApiStatus(status)

类型:Function
说明:获取视频直播/结束状态

参数:status
参数类型:String
参数说明:

参数 参数说明
live 直播正在进行
end 直播结束

onStartLive ()

类型:Function
说明:直播从结束状态切换至开始状态触发

2.绑定播放进度变化
//事件处理函数
timeUpdate: function(e) {
    //bind timeUpdate Event
    polyvLive.timeUpdate(e);
}

ps:注意播放进度绑定事件中e参数为必须项 (若使用live-player组件则不需绑定)

3.销毁播放器
//页面处理函数
onUnload() {
    polyvLive.destroy();
}

注意事项

使用live-player组件有类目限制,需要先通过类目审核
1536218165(1)
然后需要在小程序管理后台,“设置”-“接口设置”中自助开通该组件权限
1536218076(1)

sdk默认使用live-player组件,使用flv拉流地址

setPlayerSrc(videoInfo) {
    this.setData({
      video: {
        src: videoInfo.flvSrc, // videoInfo.flvSrc返回flv地址
        poster: videoInfo.poster
      }
    });
  }

如果所用小程序组件为video,则需要设置播放地址为m3u8

<view class="video-wrap">
    <view class="video-box">
        <video id="polyvLiveVideo" class="vp-v" src="{{video.src}}" controls autoplay></video>
    </view>
</view>
setPlayerSrc(videoInfo) {
    this.setData({
      video: {
        src: videoInfo.src, // videoInfo.src返回m3u8地址
        poster: videoInfo.poster
      }
    });
  }

小程序直播sdk下载

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

聊天室小程序SDK

一、登录微信公众平台,配置合法域名

1、填写: request 合法域名:https://apichat.polyv.net
2、填写: socket 合法域名:wss://chat.polyv.net
3、操作截图:

webapp

二、POLYV小程序聊天室SDK调用

1、POLYV小程序聊天室SDK下载

2、压缩包解压缩后,在项目目录中.js文件中引入polyvSocket.js


小程序项目生成不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件
(1)socket聊天室插件引用示例
//引入socket插件
const polyvSocket = require('polyvSocket.js');

//获取微信昵称、头像图片,openID等用户信息后嵌入聊天室

/*示例用户信息*/
var user = ["nickName","http://livestatic.videocc.net/v_84/assets/wimages/missing_face.png",13478930214];
var vid = "126076";//频道号

/*设置socket连接信息回调*/
polyvSocket.onMessage(function (type, data) {
       /*参数说明*/
       //type  信息类型,如getHistory 获取回看信息
       //data  数据体
}

/*登录聊天室*/
polyvSocket.loginRoom(vid, user, function (type, data) {
    //登录成功回调
});
(2)插件接口详解
接口名 参数 说明 备注
loginRoom roomId, user, callback 登录聊天室
sendMsg msg 聊天信息发送
onMessage Callback(type,data) 聊天信息接收
getHistoryContent / 获取历史聊天信息
prettyTime time 时间格式化
leavePage / 聊天室离开
(3)socket聊天室事件调用
登录聊天室 loginRoom
var vid = "126076";

var user= ["nickName","http://livestatic.videocc.net/v_84/assets/wimages/missing_face.png",13478930214];//学员信息昵称,头像,openID

polyvSocket.loginRoom(vid, user, function (type, data) {
//登录成功回调
});
聊天信息发送 sendMsg
polyvSocket.sendMsg("这是第一条发送的聊天信息");
聊天信息接收 onMessage
polyvSocket.onMessage(function (type, data) {
//聊天信息接收
});
消息类型
类型 type 数据 data 说明
LOGIN / 登录成功
GETHISTORY [{class:"clearfix right",content:"明年",showTime:"9小时前",time:1510160275411},user:{clientIp:"",nick:"tom",pic:""..}] 历史聊天信息
SPEAK {EVENT:"SPEAK",content:"ad",id:"8d6b9160-c4f8-11e7-b7d0-0b202d613fb3",showTime:undefined,time:1510195746166,user:{clientIp:"",nick:"tom",pic:""..}} 发言
获取历史聊天信息 getHistoryContent
//执行该接口,如上回调GETHISTORY聊天信息
polyvSocket.getHistoryContent();
时间格式化 prettyTime
//换算为36秒前等显示格式
polyvSocket.prettyTime(1510195746166);
聊天室离开 leavePage
//关闭页面时断开socket连接
polyvSocket.leavePage();
以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...