Web
本文以实现视频通话为例,结合 SDK API 和示例代码,介绍如何快速接入。
如需查看完整 SDK API 列表,请点击左侧导航 SDK API 部分。
导入SDK
- 通过命令行工具执行
npm install @pano.video/panortc
命令即可获取Web SDK包。 - 通过代码
import PanoRtc from '@pano.video/panortc'
导入SDK。
配置权限
除 localhost(127.0.0.1) 外的其他域名,必须部署 HTTPS 才能访问摄像头和麦克风。
初始化
通过 new PanoRtc.RtcEngine(appId)
初始化 RtcEngine
实例。
let rtcEngine = new PanoRtc.RtcEngine(appId); // 下文均使用 rtcEngine 作为 RtcEngine 实例名
请登录 Pano控制台,点击左侧导航 应用管理 ,查看应用ID(即
appId
)。
注册通知
通过 RtcEngine
实例的 on
方法注册回调通知。
rtcEngine.on(PanoRtc.RtcEngine.Events.joinChannelConfirm, data => { ... }; // 加入频道的通知
rtcEngine.on(PanoRtc.RtcEngine.Events.leaveChannelIndication, data => { ... }; // 离开频道的通知
rtcEngine.on(PanoRtc.RtcEngine.Events.userJoin, data => { ... }; // 其他用户加入频道的通知
rtcEngine.on(PanoRtc.RtcEngine.Events.userLeave, data => { ... }; // 其他用户离开频道的通知
......
完整的通知列表,请查看 RtcEngine.Events。
获取摄像头列表
通过 RtcEngine
实例的 getCams
方法获取摄像头列表。
rtcEngine.getCams(devices => {
// 请保存 devices.deviceId 信息以便稍后用于 本地预览 等
}, error => { ... });
本地预览
通过 RtcEngine
实例的 startPreview
方法开启本地摄像头预览。
// 第一个参数为 deviceId ,需要预先通过 getCams 获取后传入
rtcEngine.startPreview(deviceId, videoTag => {
// 将 videoTag 添加到 UI 布局中(可以通过 CSS 控制 videoTag),例如:
// videoTag.setAttribute('style', 'width:160px;height:90px');
// previewVideoContainer.appendChild(videoTag);
}, error => { ... });
加入频道
加入频道
通过 RtcEngine
实例的 joinChannel
方法加入频道。
// 此方法有两个参数:channelParam(必须)、optionalConfig(可选)
rtcEngine.joinChannel({
channelId: '',
channelMode: PanoRtc.Constants.ChannelMode.TYPE_MEETING
token: '',
userId: '',
userName: ''
}, {
joinChannelType: PanoRtc.Constants.JoinChannelType.mediaOnly
});
- 这些参数有一定的要求,例如:
channelId
、token
、userId
、userName
都为String
类型,更多内容请查看 joinChannel 接口文档详细了解。- 另请参考 名词解释 了解
channelId
、token
、userId
、userName
的作用。- 可以使用 临时token 来进行临时测试。
自己加入频道的通知
调用 joinChannel
方法后,将触发 joinChannelConfirm
通知。
rtcEngine.on(PanoRtc.RtcEngine.Events.joinChannelConfirm, data => {
// data中将返回result、code、message,result 为 'success' 表示加入频道成功,其他表示加入频道失败
};
其他用户加入频道的通知
其他用户加入频道后,将触发 userJoin
通知。
rtcEngine.on(PanoRtc.RtcEngine.Events.userJoin, data => {
// 返回 userId 和 user 信息,可将其加入到与会者列表中
};
倒计时通知
加入频道后,如果存在倒计时限制,将触发 channelCountDown
通知。
rtcEngine.on(PanoRtc.RtcEngine.Events.channelCountDown, data => {
// 请保存 data.remainsec 用于展示倒计时,此回调仅在加入频道后回调一次,单位为秒
};
- 已实名认证,并且使用正式token,Pano不限制频道时长
- 未实名认证,或者使用临时token,最大频道时长为 30 分钟
操作视频
发送本地视频
通过 RtcEngine
实例的 startVideo
方法发送本地视频。
rtcEngine.startVideo(); // 调用此方法后,其他用户才能看到你的画面;请在加入频道成功后再调用
停止发送本地视频
通过 RtcEngine
实例的 stopVideo
方法停止发送本地视频。
rtcEngine.stopVideo(); // 调用此方法后,其他用户将看不到你的画面;本地预览不会被停止
其他用户开启视频的通知
当其他用户发送视频时,将触发 userVideoStart
通知。
rtcEngine.on(PanoRtc.RtcEngine.Events.userVideoStart, data => {
// 请保存 data.userId 以便稍后订阅其视频
};
订阅其他用户的视频
通过 RtcEngine
实例的 subscribeVideo
方法订阅其他用户的视频。
// 请在收到其他用户的 userVideoStart 通知后,再调用订阅
rtcEngine.subscribeVideo({
quality: 1,
userId: ''
});
- Pano采用订阅模式来接收视频,参与者之间需要相互订阅,才可以看到彼此的视频画面。
- 默认 正式token 最多可以订阅 6 路视频,临时token 最多可以订阅 3 路视频。
收到其他用户视频的通知
当收到其他用户的视频时,将触发 userVideoReceived
通知。
rtcEngine.on(PanoRtc.RtcEngine.Events.userVideoReceived, data => {
// data.data 中将返回 videoTag、userId、userName,可以用于信息展示
// 将 videoTag 添加到 UI 布局中(可以通过 CSS 控制 videoTag)
});
取消订阅其他用户的视频
通过 RtcEngine
实例的 unsubscribeVideo
方法取消订阅其他用户的视频。
// 调用此方法后,你将看不到该用户的画面
rtcEngine.unsubscribeVideo({
userId: ''
});
操作声音
发送本地声音
通过 RtcEngine
实例的 startAudio
方法发送本地声音。
rtcEngine.startAudio(); // 调用此方法后,其他用户才能听到你的声音;请在加入频道成功后再调用
停止发送本地声音
通过 RtcEngine
实例的 stopAudio
方法停止发送本地声音。
// 调用此方法后,其他用户将听不到你的声音
// 不影响你接收其他用户的声音
// 可以调用 startAudio 重新发送
rtcEngine.stopAudio();
有两种方式将自己静音(不让其他用户听到你的声音):1 停止发送本地声音,2 静音本地麦克风。
两种方式的区别在于:
1 "停止发送本地声音"会断开音频通道连接(会取消其他用户订阅你的声音,如需重建连接需要消耗时间)
2 "静音本地麦克风"会发送静音包(不影响订阅关系,临时静音建议使用此方式,取消静音能够迅速恢复发送声音)
静音
通过 RtcEngine
实例的 muteMic
方法静音本地麦克风。
rtcEngine.muteMic(); // 调用此方法后,其他用户将听不到你的声音;可以调用 unmuteMic 取消静音
取消静音
通过 RtcEngine
实例的 unmuteMic
方法取消静音本地麦克风。
rtcEngine.unmuteMic(); // 静音后,需要取消静音,其他用户才能听到你的声音
接收其他用户的声音
Web SDK在加入频道时会自动订阅其他所有用户的声音,开发者无需手工操作。
离开频道
离开频道
通过 RtcEngine
实例的 leaveChannel
方法离开频道。
rtcEngine.leaveChannel();
其他用户离开频道的通知
其他用户离开频道后,将触发 userLeave
通知。
rtcEngine.on(PanoRtc.RtcEngine.Events.userLeave, data => {
// 返回 userId 信息,可将其从与会者列表中移除
};
至此,Web 快速接入已介绍完毕。
SDK API 指南
本文仅介绍接入Pano Web SDK实现视频通话的基本流程和接口。
实际场景需要结合使用更多接口,请 点此查看 API 列表。
示例代码
为方便开发者了解丰富的接口使用方式,我们还提供示例代码,请 体验参考。