更新记录

1.0.2(2021-11-25)

  • 支持拍乐云音视频
  • 支持拍乐云白板
  • 支持拍乐云消息

平台兼容性

Android iOS
适用版本区间:5.0 - 11.0 ×

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
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原生插件配置”->”云端插件“列表中删除该插件重新选择


使用文档 (更多插件及问题,请加微信:zhuzheVIP1)

超级福利

使用

本插件提供 拍乐云 的集成。
模块名 类型 说明
sn-pano-view component 拍乐云白板组件
sn-pano-video component 拍乐云视频组件
sn-pano-service module 拍乐云消息模块
拍乐云组件,仅支持nvue

android对应参数及方法:链接


sn-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 - 白板回调


sn-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)

sn-pano-service

方法

示例

<template>
    <sn-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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件使用的 拍乐云 SDK会采集数据,详情可参考:https://developer.pano.video/

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问