Web · Pano开发者中心

本文以实现视频通话为例，结合 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 列表。

示例代码

为方便开发者了解丰富的接口使用方式，我们还提供示例代码，请体验参考。