简介

RTC Web SDK是专信实时音视频通讯解决方案的Web端SDK,它是通过HTML网页加载JavaScript库，开发者可以使用RTC Web SDK提供的API建立连接，控制实时音视频通话或者直播服务。

目前RTC Web SDK 主要支持 Chrome M58+ 和 Safari浏览器

请务必使用HTPPS协议或者localhost来部署你的Web App,否则会出现找不到navigator.mediaDevices的错误!

C++音视频开发学习资料：点击领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

基本工作原理

RTC Web SDK 是基于WebRTC的实时视频通话解决方案，她通过WebSocket与专信云实时音视频后台服务器建立信令通道，信令通道主要用来用户视频，媒体交互能力，视频用户的状态变更通知等信令通信，音视频数据传输则是通过 WebRTC的RTP/RTCP进行。

API 概要

• RTC是整个SDK的主入口，提供创建客户端对象Client和创建本地对象Stream方法，以及浏览器兼容性的检测，日志等级及日志上传控制。
• Client客户端对象，提供实时音视频通话的核心能力，包括进房join()以及退房leave(),发布本地流publish()及停止发布本地流unpublish(),订阅远端流subscribe()及取消订阅远端流unsubscribe()。
• Stream音视频流对象，包括本地流LocalStream和远端流RemoteStream对象。Stream对象中的方法为本地流及远端流的通用方法。
• 本地流LocalStream通过CreateStream创建，
• 远端流RemoteStream通过监听Client.on()的'stream-added'事件获得。

RTC

RTC是RTC Web SDK 的主入口，通过ZCXRTC方法可以创建一个实时音视频通信的客户端对象(Client)和本地视频流对象(Stream)。RTC方法还可以检测浏览器兼容性，是否支持屏幕分享，以及设置日志级别及日志上传。

(static) checkSystemRequirements()->{Promise.<object>}

检测RTC Web SDK是否支持当前浏览器

若RTC Web SDK不支持当前浏览器，根据用户设备类型建议用户使用SDK可以支持的浏览器

RTC.checkSystemRequirements().then((result)=>{
    if(!result){
        console.log('Your browser is not compatible with RTC')
    }
})

检测浏览器是否支持屏幕分享

在创建屏幕分享流之前请调用该方法检查当前浏览器是否支持屏幕分享

isScreenShareSupported()->{boolean}

返回媒体输出列表

• 该接口不支持http协议下使用，请使用https协议部署您的网站。
• 出于安全的考虑，在用户未授权摄像头或麦克风访问权限前，label及deviceId 字 段可能都是空的。因此建议在用户授权访问后， 再调用该接口获取设备详情，比 如在 initialize() 后再调用此接口获取设备详情。

getDevices()->{Promise.<Array.<MediaDeviceInfo>}

C++音视频开发学习资料：点击领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

返回麦克风设备列表

• 该接口不支持http协议下使用，请使用https协议部署您的网站。
• 出于安全的考虑，在用户未授权摄像头或麦克风访问权限前，label及deviceId 字 段可能都是空的。因此建议在用户授权访问后， 再调用该接口获取设备详情，比 如在 initialize() 后再调用此接口获取设备详情。

getSpeakers() → {Promise.<Array.<MediaDeviceInfo>>}

客户端对象client

• 创建一个本地流Stream对象，本地流Stream对象通过publish()方法发布本地流音 视频
• 一个音视频流Stream中最多包含一个音频track和一个视频track

本地音视频可以

• 从摄像头和麦克风cai'ji获得，适用于一般的音视频通话、
• 从屏幕分享源采集获得，适用于进行屏幕分享
• 从开发者通过audioSourc/videoSource指定MediaStreamTrack获得，使用这种业 务层可先对音视频进行前处理，比如：对音频进行混音，或者对视频进行美颜处 理，亦或者通过这种方式向远端用户推送一个正在播放的音视频文件。

Example

// 从麦克风和摄像头采集本地音视频流
const localStream =
RTC.createStream({userId,audio:true,video:true})
// 从屏幕分享源采集
// 仅采集麦克风及屏幕分享视频流
const localStream =
RTC.createStream({userId,audio:false,screen:true})
// 采集系统音视频及屏幕分享视频流
const localStream
=RTC.createStream({userId,audio:true,screen:true})
// 采集系统音频及屏幕分享视频流
const localStream =
RTC.createStream({userId,screenAudio:true,screen:true})
// 从外部app指定
navigator.mediaDevices.getUserMedia({audio:true,video:true}).then(s
tream=>{
const audioTrack = stream.getAudioTracks()[0]
const videoTrack = stream.getVideoTracks()[0]
// 对audioTrack和videoTrack处理之后
const localStream =
RTC.createStream({userId,audioSource:audioTrack,videoSource:video
Track})
})

client

音视频通话客户端对象Client通过createClient()创建，代表一次音视频会话。

Client客户端对象提供RTC Web SDK的核心功能，包括：

• 进房 join()
• 进房leave()
• 发布本地流 publish()
• 取消发布本地流 unpublish()
• 订阅远端流 subscribe()
• 取消远端流 unsubscribe()

(async) join(options) -> {promise}

C++音视频开发学习资料：点击领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

加入一个音视频通话房间

进房代表开始一个音视频通话会话，这时候 SDK 会监听远端用户进房退房情况，若有远端 用户进房并且发布流， 本地收到‘stream-added'事件，进房后用户可以通过publish()发布本地流，本地流发布成功 后远端用户就会收到相应的’stream-added'事件通知从而完成一个双向的音视频通话连接。

Example

const client =
RTC.createClient({mode:'live',sdkAppId,userId,userSig});
client.join(toomNumber).then(()=>{
console.log('ok')
}).catch((error)=>{
console.error('进房失败'+error)
})

(async) leave() ->{Promise}

退出音视频通话

退出当前音视频通话房间，结束一次音视频通话。退房前请确保已经通过unpblish()取消发 布本地流，若未取消发布本地流，sdk内部会自动取消发布本地流，同时，退房会关闭所有 远端流。

client.leave().then(()=>{
// 退房成功，可再次调用client.join重新加入房间开入房间开始的直播
}).catch(error=>{
console.log('退房失败')
})

publish(stream)->{Promise

发布本地音视频流

该方法需要在join()进房后调用，一次音视频会话中只能发布一个本地流。若想发布另外一 个本地流，可先通过 unpublish() 取消发布当前本地流后再发布新的本地流。 在发布本地流后，可通过 removeTrack()、addTrack()、 replaceTrack() 来更新本地流中的 某个音频或视频流。

发布本地流后远端后会收到 'stream-added'事件通知

client.publish(localstream).then(()=>{
// 本地流发布成功
})

订阅远端流

(async)subscribe(stream,options)

默认情况下，当收到远端流增加事件'stream-added'后，SDK会立刻接收并解码远端流所包 含的音视频数据。 开发者可通过该订阅接口指明需要订阅音频，视频或者音视频流。若不想接收该远端流所包 含的任何音视频数据，请通过unsubscribe()取消订阅。

Example

// 监听远端流订阅成功事件
client.on('stream-subscribed',event=>{
const remoteStream = event.stream
// 远端流订阅成功，播放远端音视频流
remoteStream.paly('remote_stream')
})
// 监听远端流增加事件
client.on('stream-added',event=>{
const remoteStream = event.stream
// 订阅远端音频和视频流
client.subscribe(remoteStream,
{audio:true,video:true}).catch(e=>{
console.error('falied to subscribe remoteStream')
})
// 仅订阅音频数据
client.subscribe(remoteStream,
{audio:true,video:false}).catch(e=>{
console.error('failed to suscribe remoteStream')
})
})

取消订阅远端流

(async) unsubscribe(stream)

当收到远端流增加事件 'stream-added' 通知后，SDK 默认会立刻接收并解码该远端流所包 含的音视频数据，如果你想拒绝接收 该远端流的任何音视频数据，请在 'stream-added' 事 件处理回调中调用此接口。

Example

client.on('stream-added', event => {
const remoteStream = event.stream;
// 拒绝接收该远端流所包含的任何音视频数据
client.unsubscribe(remoteStream).catch(e => {
console.error('failed to unsubscribe remoteStream');
});
})

Stream

Stream 音视频流，一个 Stream 中最多只能同时包含一个音频 track 和一个视频 track。

Stream 类是本地流 LocalStream 和远端流 RemoteStream 的基类，它包含本地流和远端流通用的方法。

C++音视频开发学习资料：点击领取→音视频开发（资料文档+视频教程+面试题）（FFmpeg+WebRTC+RTMP+RTSP+HLS+RTP）

play()

(async) play(elementId, optionsopt) → {Promise}

播放该音视频流 该方法会自动创建 和 标签并在指定的标签上播放音频和视频，同时该标签会被添加到页面中名为 elementId 的 div 容器。 换句说，Stream 内部会自动创建相应的音频播放器和视频播放器来播放相应的音频和视频。

Example

stream.play('remote')

close()

关闭音视频流

对于本地流，该方法会关闭摄像头并释放摄像头和麦克风访问权限。

muteAudio() → {boolean}

禁用音频轨道

• 对于本地流，调用该方法会停止发送音频，远端会触发 Client.on('mute-audio') 事件。
• 对于远端流，调用该方法会停止播放音频，但是仍然接收音频数据。

Returns:

• true 禁用音频轨道成功。
• false 禁用音频轨道失败，因为没有音频轨道。

muteVideo() → {boolean}

禁用视频轨道

• 对于本地流，调用该方法会停止发送视频，远端会触发 Client.on('mute-video') 事件。如果视频是从摄像头采集，此时摄像头灯仍然是亮着的。若想完全禁用视频轨道(即关闭摄像头)， 可以使用 removeTrack() 删除视频轨道然后调用 MediaStreamTrack.stop() 关闭视频轨道（关闭摄像头）
• 对于远端流，调用该方法会停止播放视频，但是仍然接收视频数据.

Returns:

• true 禁用视频轨道成功
• false 禁用视频轨道失败，因为没有视频轨道

unmuteAudio() → {boolean}

启用音频轨道

对于本地流，调用该方法会触发远端 Client.on('unmute-audio') 事件。

音频轨道默认是开启的，若你调用 muteAudio() 后可用该方法重新启用音频。

Returns:

• true 启用音频轨道成功。
• false 没有音频轨道，启用失败。

unmuteVideo() → {boolean}

启用视频轨道

对于本地流，调用该方法会触发远端 Client.on('unmute-video') 事件。

视频轨道默认是开启的，若你调用 muteVideo() 后可用该方法重新启用视频。

Returns:

• true 启用视频轨道成功。
• false 没有视频轨道，启用失败。

获取当前音量大小

getAudioLevel()->{number}

获取当前音量大小

只有当本地流或远端流中有音频数据才有效

Example

setInterval(() => {
  const level = stream.getAudioLevel();
  if (level >= 0.1) {
    console.log(`user ${stream.getUserId()} is speaking`);
  }
}, 200);

Returns

audioLevel 音量大小

• 返回值在(0.0, 1.0)之间，通常认为值大于0.1为用户正在说话。

获取音频轨道

getAudioTrack() → (nullable) {MediaStreamTrack}

获取视频轨道

getVideoTrack() → (nullable) {MediaStreamTrack}