@panotest/panortc

PanoRtc

Installing

有两种方式引用PanoRtc:

• 直接下载PanoRtc js lib ，引入到您的网页中，PanoRtc 会自动挂载到window 对象上，可以通过 window.PanoRtc 访问
• 通过npm下载: npm install @panortc/panortc, 通过 import PanoRtc from '@panortc/panortc' 将panortc 引入到您的项目

RtcEngine 连接

连接步骤可以参考 sample

RtcEngine 接口文档

连接步骤：

1. 新建PanoRtc实例: const panoRtc = new PanoRtc.RtcEngine(appid)
2. 获取 PanoToken
3. 调用 panoRtc.joinChannel , 使用上一步获取的 panoToken 和会议 channelId 等参数加入会议，可以设置 joinChannelType 类型控制只加入音视频频道、白板频道或者二者都加入
4. 监听到 joinChannelConfirm 事件后即可开始通信

示例代码：

import PanoRtc from 'pano-rtc'

const rtcEngine = new PanoRtc.RtcEngine('your_app_id')
rtcEngine.on(PanoRtc.RtcEngine.Events.joinChannelConfirm, data => console.log(`join channel ${data.result}`))
rtcEngine.joinChannel({
  token: 'xxxx', // fill with you panoToken
  channelId: 'xxxx', // channel id
  channelType: PanoRtc.Constants.ChannelType.TYPE_MEETING, // meeting or 1_v_1
  userId: 'xxxx',
  userName: 'xxxx'
}, {
  joinChannelType: PanoRtc.Constants.JoinChannelType.mediaAndWhiteboard // 可选参数，默认加入音视频和白板channel
})

RtcWhiteboard

白板接口文档

在加入channel 后，可以通过 panoRtc.getWhiteboard 获取白板控制接口，可以打开和关闭白板。

示例代码：

const whiteboard = rtcEngine.getWhiteboard()
const whiteboardWrapper = document.getElementById('#eleId')
whiteboard.open(whiteboardWrapper) // 打开白板
// whiteboard.close() //关闭白板

白板 Toolbar

Pano 提供了 toolbar 示例，用户可以参考示例自己开发。