5分钟快速集成UCloud实时音视频服务URTC-Web端

发布于 2020-10-16 11:53:08

通过集成URTC SDK,可以从零开始,快速搭建出实时音视频通信平台,可以应用于语音和视频社交、在线教育和培训、远程医疗、在线会议、直播等多种业务场景。

集成URTC SDK之前,需要在UCLOUD官网控制台创建URTC应用。

1. 登录UCLOUD控制台

在UCLOUD官网,【登录控制台】

使用URTC服务之前,首先需要注册账号 并且完成 实名认证

2.创建URTC应用

每个账号最大支持创建5个URTC应用,需要创建更多URTC应用,请联系客户经理增加配额。

可以通过2种方法:控制台、API创建URTC应用。

2.1 控制台创建URTC应用

  • 在控制台,【全部产品】-【视频服务】-【实时音视频】,找到【我的应用】

  • 点击创建应用,输入应用名称,确定后保存。

  • 确定后,自动生成AppID、AppKey。

  • 绑定AppID及AppKey到您的应用中即可开始使用。

2.2 API创建URTC应用

通过 创建URTC 应用的API,也可以创建URTC应用。具体调用API的方法,请查看API文档

3. Web SDK兼容性

使用一款Web SDK 兼容的浏览器,具体如下表所示:

平台浏览器
Windows 7+Chrome 60+
Firefox 56+
Opera 50+
Edge 浏览器 79+
QQ 浏览器 10+
360 安全浏览器 10+
360 极速浏览器 12+
macOS 10+Chrome 60+
Firefox 56+
Opera 50+
Edge 浏览器 79+
360 极速浏览器 1+
苹果Safari 11+
Android 5.0+Chrome 60+
华为手机浏览器 10+
微信浏览器 7+
iOS 11+苹果Safari 11+
微信浏览器 7+(仅支持接收)
  • iOS系统的限制:不允许除了safari之外的浏览器使用麦克风、摄像头设备。因此iOS微信浏览器中无法发布视频流,仅支持接收。

4. Web端Demo源码

由于浏览器的安全策略对除 127.0.0.1 以外的 HTTP 地址作了限制,Web SDK 仅支持 HTTPS 协议 或者 http://localhost(http://127.0.0.1),请勿使用 HTTP 协议 部署你的项目。

5. 引入SDK

选择如下任意一种方法引入URTC Web SDK:

5.1 使用npm引入SDK

将 sdk 使用 ES6 语法作为模块引入。使用该方法需要先安装 npm,详见 npm快速入门

1)使用npmYarn 集成 WEB SDK:

npm install --save urtc-sdk
或    
yarn add urtc-sdk

2)项目中引入SDK并创建 client

import sdk,{ Client } from 'urtc-sdk';

5.2 直接引入SDK

下载URTC Web SDK,将 sdk 中 lib 目录下的 index.js 使用 script 标签引入。

<script type="text/javascript" src="index.js"><script>

6. 实现音视频通话

下图展示了基础的一对一音视频通话的 API 调用:

6.1 初始化SDK

检测当前浏览器对 WebRTC 的适配情况

const result = sdk.isSupportWebRTC();

获取token方式。测试时使用此接口,正式使用建议调用服务端接口

const token = sdk.generateToken(AppId, AppKey, RoomId, UserId);

加入房间之前,需要初始化,创建client。

const client = new Client(AppId, Token, {
  type?: "rtc"|"live"
  // 选填,设置房间类型,有两种 实时会议"rtc" 和互动直播"live" 类型可选 ,默认为实时会议 rtc
  role?: "pull" | "push" | "push-and-pull"
  // 选填,设置用户权限,可设 "pull" | "push" | "push-and-pull" 三种角色,分别对应拉流、推流、推+拉流,默认为 "push-and-pull",特别地,当房间类型为实时会议(rtc)时,此参数将被忽视,会强制为 "push-and-pull",即推+拉流
  codec?: "vp8"|"h264"
  // 选填,设置视频编码格式,可设 "vp8" 或 "h264",默认为 "vp8"
});

初始化时,需注意 typerolecodec参数的设置:

  • type用于设置房间类型。一对一或多人通话中,建议设为 "rtc" ,使用通信场景;互动直播中,建议设为 "live",使用直播场景。
  • role用于设置用户权限。在互动直播中,需要设置主播和连麦方的权限为 push-and-pull ,不需要连麦时设置主播为 push ;观众设置为 pull
注:创建 client 时传的 token 需要使用 AppIdAppKey 等数据生成,测试阶段,可临时使用 sdk 提供的 generateToken 方法生成,但为保证 AppKey不暴露于公网,在生产环境中强烈建议自建服务,由 服务器按规则 生成 token 供 sdk 使用。

6.2 加入一个房间并发布本地流

client.joinRoom(roomId, userId, () => {
   client.publish({
          audio: true/false
          // 必填,指定是否使用麦克风设备
          video: true/false
          // 必填,指定是否使用摄像头设备
          screen: true/false
          // 必填,指定是否为屏幕共享,audio, video, screen 不可同时为 true,更不可同时为 false
          microphoneId?: ''
          // 选填,指定使用的麦克风设备的ID,可通过 getMicrophones 方法查询获得该ID,不填时,将使用默认麦克风设备
          cameraId?: ''
          // 选填,指定使用的摄像头设备的ID,可以通过 getCameras 方法查询获得该ID,不填时,将使用默认的摄像头设备
          extensionId?: ''
          // 选填,指定使用的 Chrome 插件的 extensionId,可使 72 以下版本的 Chrome 浏览器进行屏幕共享。
        }, onFailure)
}); // 在 joinRoom 的 onSuccess 回调函数中执行 publish 发布本地流

6.3 订阅远端流

client.joinRoom(roomId, userId, () => {
    client.subscribe(StreamId, onFailure)
}); // 在 joinRoom 的 onSuccess 回调函数中执行 subscribe 发布本地流

6.4 取消发布本地流或取消订阅远端流

client.unpublish(StreamId, onSuccess, onFailure)
// 取消发布本地流
client.unsubscribe(StreamId, onSuccess, onFailure)
//取消订阅远端流

6.5 监听流事件

1、监听 "stream-published" 事件,发布成功后播放本地流。

client.on('stream-published', (stream) => {
    client.play({
        streamId: stream.sid,
        container: divElement
    });
    // 此处 divElement 代表播放发布流的外层容器元素,也可以是这个外层容器元素的 ID,而外层容器一般是一个设置了宽高的 div 元素,请根据实际情况进行传值
}); // 监听本地流发布成功事件,在当前用户执行 publish 后,与服务器经多次协商,成功后会触发此事件

2、 监听 "stream-added" 事件,当有远端流加入时订阅该流。

client.on('stream-added', (stream) => {
    client.subscribe(stream.sid);
}); // 监听新增远端流事件,在远端用户新发布流后,服务器会推送此事件的消息。注:当刚进入房间时,若房间已有流,也会收到此事件的通知

3、监听 "stream-subscribed" 事件,订阅成功后播放远端流。

client.on('stream-subscribed', (stream) => {
    client.play({
        streamId: stream.sid,
        container: divElement
    });
    // divElement 如上面所说
}); // 监听远端流订阅成功事件,在当前用户执行 subscribe 后,与服务器经多次协商,成功后会触发此事件

4、监听 "stream-removed" 事件,当远端流被移除时(停止发布、关闭网页等), 停止播放该流并移除它的画面。

client.on('stream-removed', (stream) => {
    // 在页面中删除播放该流的外层容器元素
}); // 监听移除的远端流事件,在远端用户取消推流或流已关闭时,服务器会推送此事件的消息。

5、监听 "stream-reconnected" 事件,当网络切换、网络故障等导致远端流重新连接时,直接删除原来的流,并播放新的流。

client.on('stream-reconnected', (streams) => {
    const { previous, current } = streams;
    // 从本地缓存的流的数据里找到对应的流并用重连后该流的数据更新原流的数据,或直接删除原来的流,并使用新的流
    let idx = allStreams.findIndex(item => item.sid === previous.sid);
    if (idx >= 0) {
        allStreams.splice(idx, 1, current);
    }
    client.play({
        streamId: current.sid,
        container: divElement
    });
}); // 当网络断开又恢复时,发布/订阅流可能会被重连,重连成功后,会通过此事件通知业务侧

6.6 退出房间

client.leaveRoom();

6.7 开始体验吧!

0 条评论

发布
问题