Pano开发者中心
  • 文档中心
  • 下载中心

›Web SDK

新手入门

  • 简介
  • 名词解释
  • 创建第一个应用

规则说明

  • Channel ID命名规则
  • 权限控制
  • 计费说明
  • 频道最大时长说明
  • 每月一万分钟免费说明
  • 布局参数说明
  • 水印

场景方案

    教育行业

    • 1vN互动小班课
    • 互动直播大班课

快速接入

  • 简介
  • 音视频

    • Windows (C++)
    • iOS (Objective-C)
    • Android (Java)
    • Web
    • Electron
    • Flutter
    • React Native

    白板

    • Windows (C++)
    • iOS (Objective-C)
    • Android (Java)
    • Web
    • Electron
    • Flutter

高级功能(RTC)

  • 简介
  • 屏幕共享
  • 状态回调
  • 设备诊断
  • 音量指示
  • 控制音量
  • 声卡操作
  • 混音/伴音
  • 混响
  • 耳返
  • 变声
  • 美颜
  • 音视频数据回调
  • 音视频外部采集
  • 收发多路视频
  • 性能检测
  • 截图
  • 反馈

高级功能(RTS)

  • 简介
  • 白板

    • Windows (C++)
    • iOS (Objective-C)
    • Android (Java)
    • Web

    消息

    • 消息服务

    标注

    • 视频标注
    • 共享标注

    远程控制

    • 远程控制

操作实践

  • 切换大小屏

RESTful API

  • 基本格式
  • 生成Token
  • 频道管理
  • 云端录制
  • CDN推流
  • 文档转码
  • 消息服务
  • 服务端消息通知

SDK API

  • SDK接口说明
  • Windows (C++)
  • macOS/iOS (Objective-C)
  • Android (Java)
  • Web SDK (IE专用版)
  • Web SDK

    • 浏览器兼容性
    • PanoRtc 参考
    • RtcEngine
    • RtcWhiteboard
    • RtcMessage
    • RtsService
    • Annotation
    • Constants

更新记录

  • 简介
  • Windows
  • macOS
  • iOS
  • Android
  • Electron
  • Flutter
  • React Native
  • Web(全功能SDK)
  • Web(RTS SDK)
  • Web(IE专用音视频SDK)

帮助

  • FAQ
  • 更多帮助

PanoRtc 参考

Installing

有两种方式引用PanoRtc:

  • npm install @pano.video/panortc

  • 到Pano下载中心下载SDK打包文件,解压后把js文件引入到网页中,PanoRtc 会自动挂载到window 对象上,可以通过 window.PanoRtc 访问

注意:通过html文件直接引用SDK文件时,需要把引用的<script>标签添加到<body>中,不可以添加到<head>中

RtcEngine 连接步骤

连接步骤可以参考 音频基础版sample,或 视频基础版sample

RtcEngine 接口文档

连接步骤:

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

示例代码:

import PanoRtc from '@pano.video/panortc'

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
  channelMode: PanoRtc.Constants.ChannelMode.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 提供了 vue 和 react 版本 toolbar 示例,用户可以参考示例自己开发。

Last updated on 10/15/2021
← 浏览器兼容性RtcEngine →
  • Installing
  • RtcEngine 连接步骤
  • RtcWhiteboard
  • 白板 Toolbar
浙ICP备20002645号 ©2019-2021 Pano拍乐云