# webRtc Web sdk2

472 阅读4分钟

webRtc Web sdk2

LocalStream

LocalStream 本地音视频流,通过 createStream() 创建。

Extends

  • stream
const localStream = TRTC.createStream({ userId, audio: true, screen: true });

设置视频 Profile

(async) setVideoProfile(profile) → {Promise}

Example

// 使用预定义Profile设置
localStream.setVideoProfile('480p');
localStream.initialize().then(() => {
  // local stream was initialized successfully.
});
// 使用自定义视频Profile设置
localStream.setVideoProfile({
  width: 360, // 视频宽度
  height: 360, // 视频高度
  frameRate: 10, // 帧率
  bitrate: 400 // 比特率 kbps
});
localStream.initialize().then(() => {
  // local stream was initialized successfully.
});
// 动态设置 profile
localStream.setVideoProfile('480p');
await localStream.initialize();
await client.publish(localStream);
try {
   await localStream.setVideoProfile('1080p');
} catch(error) {
  if (error.name === 'OverconstrainedError') {
     console.error('当前摄像头不支持该 profile');
     // 设置失败,当前摄像头已停止采集,需要恢复采集
     const stream = TRTC.createStream({ video: true, audio: false });
     await stream.initialize();
     localStream.replaceTrack(stream.getVideoTrack());
  } else {
     console.error('当前浏览器不支持动态调用该接口');
  }
}
// 推流后更新码率
client.publish(localStream).then(() => {
   localStream.setVideoProfile({ bitrate: 1500 });
})
// 获取实际采集的分辨率和帧率
const videoTrack = localStream.getVideoTrack();
if (videoTrack) {
   const settings = videoTrack.getSettings();
   console.log(`分辨率:${settings.width} * ${settings.height}, 帧率:${settings.frameRate}`)
}

切换媒体输入设备

调用该方法可更换本地流的媒体输入设备:

- 音频输入设备,如麦克风。
- 视频输入设备,如摄像头

Note:

  • 该方法仅适用于从摄像头和麦克风采集音视频的本地流。即:屏幕分享流不支持调用该接口。
  • 若该本地流已被发布,该方法会自动更新发往远端的音视频流,此时,远端会收到Client.on('Stream-updated')事件通知。

Example

// 发布本地流
client.publish(localstream)
// 返回摄像头列表
RTC.getCameras().then(devices=>{
    // 切换camera设备
    localStream.swtichDevice('video',devices[0].deviceId).then(()=>{
        //切换成功
    })
})

Paramters:

NameTypeDescription
typestring媒体类型‘audio’ 音频‘video’ 视频
deviceIdstring设备标识摄像头设备标识通过 getCameras() 获取。 在移动设备上,可以通过设置 deviceId 为 'user' 和 'environment' 来切换前置和后置摄像头。麦克风设备标识通过 getMicrophones() 获取。

添加音频或视频轨道

addTrack(track)

调用该方法将音频或视频轨道添加到本地流,若该本地流已经被发布,则会自动更新发往远端的音视频流,此时远端会收到Client.on('stream-updated')事件通知。

新的音视频轨道可以通过createStream()/getAudioTrack()/getVideoTrack()获取,或者通过getUserMidea(),captureStream()获取

Note

  • 在增加视频轨道时,要求分辨率跟setVideoProfile()设置保持一致,否则会抛出异常

Example

const videoStream = RTC.createStream({userId,audio:fasle,video:true})
client.publish(localstream);
// 开启视频通话
const videoStream = RTC.createStream({userId,audio:false,video:false})
const videoTrack = videoStream.getVideoTrack()
	// 将从摄像头采集的视频轨道插入当前以发布的本地流对象localStream
localStream.addTrack(videoTrack).then(()=>{
     // 视频通话开启成功,远端流将会收到‘stream-updated’通知
})

移除视频轨道

调用该方法会移除本地流中的视频轨道,若本地流已经被发布,则会自动更新发往远端的视频流,此时远端会收到 Client.on('stream-updated') 事件通知。

请注意,一个已经发布的Stream对象中至少要有一个媒体轨道,如果你想完全删除本地流中的音视频轨道,请直接通过 unpublish() 取消发布, 然后再通过 close() 关闭本地流。

Note

  • 目前尚不支持移除音频轨道,若想禁用音频,可通过调用 muteAudio() 实现。

Example

// 关闭视频通话示例,对应addTrack接口的开启视频通话示例
const videoTrack = localStream.getVideoTrack()
if(videoTrack){
    localStream.removeTrack(videoTrack).then(()=>{
        // 关闭视频通话成功,停止videoTrack并释放摄像头资源
        videoTrack.stop()
    })
}

播放该音视频流

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

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

Example

stream.play('remote').catch(error => {});

停止播放音视频流

stop()

该方法还会将由 play() 创建的音视频标签从 HTML 页面中删除。

关闭音视频流

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() 后可用该方法重新启用视频。

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

获取当前音量大小

getAudioLevel() → {number}

获取当前音量大小 只有当本地流或远端流中有音频数据才有效。

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为用户正在说话。

RemoteStream

远端音视频流,通过监听 Client.on('stream-added') 事件获得。

一个远端用户可发送至多两个远端流对象,其中一个远端流对象包含一路音频和一路主路视频,另一个远端流对象仅仅包含一路辅路视频。 这两种远端流对象的类型可通过 getType() 来识别。

远端流的生命周期在事件 Client.on('stream-added') 到事件 Client.on('stream-removed') 之间,在这两个事件之间,远端流可能会通过 Client.on('stream-updated') 进行更新,比如远端用户通过 addTrack()removeTrack() 增加或删除 track 后本地就会收到此通知。

Example

// 远端流生命周期内的操作示例// 通过监听‘stream-added’事件获得远端流对象
const client = RTC.createClient(userId, Appid);
client.on('stream-added', event => {
  const remoteStream = event.stream;
  const remoteUserId = remoteStream.getUserId();
  console.log('received a remoteStream ID: ' + remoteStream.getId() + ' from user: ' + remoteUserId);
  // 若需要观看该远端流,则需要订阅它
  client.subscribe(remoteStream);
​
  // 若不需要观看该远端流,请取消订阅它,否则SDK会接收远端流数据。
  // client.unsubscribe(remoteStream);
});
​
// 监听‘stream-removed’事件
client.on('stream-removed', event => {
  const remoteStream = event.stream;
  console.log('remoteStream ID: ' + remoteStream.getId() + ' has been removed');
  // 停止播放并删除相应<video>标签
});
​
// 监听‘stream-updated’事件
client.on('stream-updated', event => {
  const remoteStream = event.stream;
  console.log('remoteStream ID: ' + remoteStream.getId() + ' was updated hasAudio: '
              + remoteStream.hasAudio() + ' hasVideo: ' + remoteStream.hasVideo());
});
​
// 监听‘stream-subscribed’事件
client.on('stream-subscribed', event => {
  const remoteStream = event.stream;
  // 远端流订阅成功,在HTML页面中创建一个<video>标签,假设该标签ID为‘remote-video-view’
  // 播放该远端流
  remoteStream.play('remote-video-view');
});

播放该音视频

play(elementId, optionsopt) → {Promise}

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

stream.play('remote').catch(error => {});

停止播放音视频流

stop()

该方法还会将由 play() 创建的音视频标签从 HTML 页面中删除。

关闭音视频流

close()

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

禁用音频轨道

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

Returns:

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

禁用视频轨道

  • 对于本地流,调用该方法会停止发送视频,远端会触发 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() 后可用该方法重新启用视频。

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

监听Stream事件

on(eventName, handler)