更新记录
1.0.2(2022-04-11)
修复无法切换屏幕共享的问题
1.0.1(2022-04-07)
1、支持云课网校直播音视频 2、支持云课网校直播白板 3、支持云课网校直播消息
平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:5.0 - 11.0 | armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 | × |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios
注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
使用文档
插件结合云课网校系统使用更为方便 云课网校源码下载:链接 云课网校APP端 uniapp源码下载:云课网校系统后台-扩展-APP管理-源码下载
模块名 | 类型 | 说明 |
---|---|---|
yunke-pano-view | component | 云课网校直播白板组件 |
yunke-pano-video | component | 云课网校直播视频组件 |
yunke-pano-service | module | 云课网校直播消息模块 |
云课网校直播组件,仅支持nvue
yunke-pano-view
属性
属性 | 类型 | 说明 | |
---|---|---|---|
bgColor | hex | 背景色,比如 #FFFFFF | |
bgImage | string | 背景图 | |
fgColor | hex | 前景色,比如 #FFFFFF | |
fillColor | hex | 填充色,比如 #FFFFFF | |
fontSize | int | 字体大小 | |
fontStyle | int | 字体样式,取值:Normal(0),Bold(1),Italic(2),BoldItalic(3) | |
lineWidth | int | 字体大小 | 设置线条和边框的宽度 |
toolType | int | 设置工具类型,取值参考 | |
fillType | int | 设置封闭图形填充方式,取值:None(0),Color(1) | |
scalingMode | int | 设置背景图片缩放模式,取值:Fit(0),AutoFill(1),FillWidth(2),FillHeight(3),FitCenter(4) | |
scaleFactor | float | 设置缩放比例 | |
scaleMove | boolean | 手势控制缩放和移动 | |
cursorPosSync | boolean | 同步光标位置给其他用户 | |
showRemoteCursor | boolean | 显示其他用户的光标位置 | |
uIResponse | boolean | UI 交互 | |
showDraws | boolean | 隐藏画板内容 |
方法
- joinChannel - 加入频道
this.$refs['pano'].joinChannel(
{
appToken: '',
channelId: '',
userId: 111,
userName: '',
mode_1v1: true
},
(e) => {
if(e.code == 0) {
// 成功
} else {
// code 值 参考:https://developer.pano.video/apidoc/pano_apidoc/chinese/java/html/enumcom_1_1pano_1_1rtc_1_1api_1_1_constants_1_1_q_result.html
}
}
)
- open - 打开白板
this.$refs['pano'].open()
- undo - 撤销
this.$refs['pano'].undo()
- redo - 重做
this.$refs['pano'].redo()
- setBgImage - 指定页的背景图片
this.$refs['pano'].setBgImage({
url: '',
pageNo: 0
})
- addBackgroundImages - 导入背景图片列表
this.$refs['pano'].addBackgroundImages([
'',
''
])
- addImageFile - 上传图片
this.$refs['pano'].addImageFile('')
- resetVision - 重置当前页视角
this.$refs['pano'].resetVision()
- clearUserContents - 清除特定用户的画板内容
this.$refs['pano'].clearUserContents({
userId: 111,
curPage: true,
type: 1 // Draws(1),BackgroundImage(2),All(255)
})
- broadcastMessage - 广播消息(发给白板频道内所有用户)
this.$refs['pano'].sendMessage(JSON.stringify({type:'test',data:{a:1}}))
- sendMessage - 给指定用户发消息
this.$refs['pano'].sendMessage({
userId: 111,
msg: JSON.stringify({type:'test',data:{a:1}})
})
- close - 关闭白板
this.$refs['pano'].close()
- leave - 离开白板
this.$refs['pano'].leave()
事件
-
rtc - rtc引擎回调
-
whiteboard - 白板回调
yunke-pano-video
方法
- startPreview - 开始本地预览
- stopPreview - 停止本地预览
- startRemotePreview - 开始预览指定远程用户
this.refs['v111'].startRemotePreview({
userId: '111',
videoProfileType: 3 // Lowest(0),Low(1),Standard(2),HD720P(3),HD1080P(4)
})
- stopRemotePreview - 停止预览指定远程用户
this.refs['v111'].stopRemotePreview(111)
yunke-pano-service
方法
示例
<template>
<yunke-pano-view
ref="pano"
style="flex:1;"
appId="test"
@rtc="onRtc"
@whiteboard="onWhiteboard" />
</template>
<script>
export default {
methods: {
onRtc(event) {
console.log('onRtc', event);
const e = event.detail;
if(e.type == 'joinConfirm') {
// e.resultType
} else if(e.type == 'channelLeaveIndication') {
} else if(e.type == 'userJoinIndication') {
} else if(e.type == 'userLeaveIndication') {
} else if(e.type == 'channelFailover') {
}
},
onWhiteboard(event) {
const e = event.detail;
if(e.type == 'createDoc') {
} else if(e.type == 'contentUpdated') {
} else if(e.type == 'message') {
// e.msg
}
}
}
}
</script>