@小程序直播 SDK v1.0.1

概述

欢拓小程序SDK为微信小程序提供了直播播放、互动聊天、文档涂鸦等功能。且提供了一套组件，供用户灵活定制客户的业务逻辑。

功能列表 (v1.0)

功能	表述
视频	支持直播视频观看
文档	涂鸦展示，暂不支持ppt动画
在线聊天	支持在线文字聊天，暂不支持打赏

阅读对象

本文档为技术文档，需要阅读者拥有基本的小程序开发能力

🚗三步快速接入

1、获取 access_token

获取流程

2、微信添加白名单配置

设置白名单域名:
======================
https://open.talk-fun.com
https://s1.talk-fun.com
wss://chat.talk-fun.com

3、下载Demo接入到项目

[特别提醒] => 设置微信直播(live-player)权限

直播使用了微信 live-player，需要先通过类目审核(阅读规则) 暂只针对国内特定类目的小程序开放，需要先通过类目审核，再在小程序管理后台的「开发」-「接口设置」中自助开通该组件权限。

SDK使用说明

初始化SDK

// 引入SDK包
var SDK = require('path-to-sdk/sdkPack/wx_SDK-1.0')['default']

 /**
 * @ 初始化SDK 参数配置如下:
 * {
 *  @accessToken access_token => 密钥
 *  @videoContextId => 视频ID
 *  @whiteboardContextId => 画布ID
 * }
 */
var token = '${access_token}' // 通过接口请求返回 access_token
var options = {
  accessToken: token,
  videoContextId: 'tf-video-player',
  whiteboardContextId: 'canvas'
}
var HTSDK = new SDK(options, (initData) => {
  console.log('TalkFun SDK init success!')
  this.initCall(initData)
  callback && callback(this.HTSDK)
})

配置文件

// 配置文件 .json
{
  "usingComponents": {
    "talkfun-media-view": "root/TalkFunComponents/Media/media",
    "talkfun-whiteboard-view": "root/TalkFunComponents/Whiteboard/whiteboard"
  }
}

导入组件

// 组件引入 .wxml
<talkfun-whiteboard-view></talkfun-whiteboard-view>
<talkfun-media-view></talkfun-media-view>

⚠️注意: <talkfun-media-view> 组件使用了 <live-player> 需要在真机调试

核心组件详解

# Whiteboard 组件

<talkfun-whiteboard-view 
HTSDK="{{HTSDK}}"
whiteboardBackgroundColor="{{whiteboardBackgroundColor}}"
translateY="{{translateY}}"
canvasHeight="{{canvasHeight}}"
isWhiteboard="{{isWhiteboard}}"
pptPath="{{pptPath}}"
bind:whiteboardReay="canvasReady"
></talkfun-whiteboard-view>

组件必要变量说明

变量名	类型	说明
HTSDK	Object	SDK实例化对象
whiteboardBackgroundColor	String	画板背景颜色
translateY	Number	滚动偏移
isWhiteboard	Boolean	是否画板对象
canvasHeight	Number	画板高度
pptPath	String	课件图片

# Media 组件

<talkfun-media-view
showMeidaView="{{showMeidaView}}"
mediaUrl="{{mediaUrl}}">
</talkfun-media-view>

组件必要变量说明

变量名	类型	说明
showMeidaView	Boolean	摄像头媒体开关
mediaUrl	Objet	返回 flv, rtmp, hls(m3u8) 三种格式

SDK Api 说明

# 方法

on (eventName, callback)

说明：用于监听由SDK响应的事件 事件总览

参数名	类型	说明
eventName	String	监听事件名
callback	Function	回调 callback 函数

// 接收聊天
HTSDK.on('chat:send', (chat) => {
  this.parent.data.chatList.push(chat)
  this.parent.setData({
    chatList: this.parent.data.chatList
  })
})

emit (eventName, options, callback)

说明：发送事件,用于发送聊天、问答等功能...

参数名	类型	说明
eventName	String	发送事件名
options	Object/String	发送参数
callback	Function	回调 callback 函数

// 放送成功
HTSDK.emit('chat:send', {msg: '聊天信息'}, (chat) => {
  // 放送成功
  if (chat.code == 0) {
    this.data.chatList.push(chat.data)
    this.setData({
      chatList: this.data.chatList
    })
    this.setData({
      chatMsg: ''
    })
  } 
  // 发送失败
  else {
    wx.showToast({
      title: chat.msg,
      icon: 'none',
      duration: 1500,
      mask: false
    });
  }
})

destroy () void

销毁函数, 一般在退出组件时使用

...
onUnload () {     
    HTSDK.destroy() 
}

小程序Api (v1.0.1)