采集和 Track 管理
采集本地音视频轨这个操作涉及到 2 个模块 —— deviceManager
和 Track
。前者是 SDK 的媒体设备管理模块,用于监听媒体设备变化以及发起采集操作,后者是采集方法的返回。所有可以用来在页面上播放的媒体元素,我们都称之为 Track
对象。关于这两个对象的细节,可以参阅 API,
发起一次本地采集
发起采集非常简单,直接调用相应的方法即可:
import * as QNRTC from "pili-rtc-web";
const tracks = await QNRTC.deviceManager.getLocalTracks({
audio: { enabled: true, tag: "tag1" },
video: { enabled: true, width: 1280, height: 720, tag: "tag1" },
});
console.log("get tracks!", tracks);
需要注意的是 getLocalTracks
的配置选项,这是整个采集操作的核心。完整的采集配置选项参见 getLocalTracks
需要强调的是 tag
这个选项,因为同一个用户可能有多个视频轨或者音频轨,单纯靠 Track
的 kind
是无法区分哪个 Track
对应哪个输入源的。通过在采集的时候指定 tag
,然后访问 Track
对象的 info.track
就能将 Track
和您的输入源对应。当这个 Track
发布到房间时,它的 tag
也会记录在房间的 TrackInfo
中,供订阅方来区分。
// 输出一个 Track 的 tag
console.log("my tag is", track.info.tag);
getLocalTracks 可以重复调用,就算指定的配置选项完全相同,每次调用返回的
Track
也都是各自独立的。
播放音视频轨
这里的播放不仅仅指采集拿到的 Track
对象,通过订阅操作拿到的远端 Track
对象也同样适用。调用如下代码在指定的 DOM 元素下播放音视频
const domElement = document.getElementById("xxxx");
track.play(domElement);
如果您在还没有与用户任何交互的情况下调用了play方法会导致音频无法播放,详情参考我们的博文:浏览器的自动播放策略的注意事项
调用这段代码后,SDK 会自动在 domElement
下创建 <audio>
或者 <video>
元素来播放媒体(使用 audio 还是 video 取决于 Track 本身的 kind)。这些自动创建的媒体元素都会有一个公共的类名 qnrtc-video-player
或者 qnrtc-audio-player
。两种媒体元素的默认 css 如下
/* audio 元素 */
audio {
visibility: hidden;
}
/* video 元素 */
video {
width: 100%;
height: 100%;
object-fit: contain;
}
释放采集的音视频轨
在 SDK 的设计中,采集音视频轨的操作和是否加入房间并不耦合,是一个独立的操作。所以,即使退出清空了房间,或者取消发布了某些音视频轨,这些音视频轨也不会被释放。调用如下代码释放 Track
对象。
如果音视频轨没有及时释放,它们会一直占用摄像头/麦克风等媒体设备。
// 采集的 Track
const tracks = await QNRTC.deviceManager.getLocalTracks({
audio: { enabled: true, tag: "tag1" },
video: { enabled: true, width: 1280, height: 720, tag: "tag1" },
});
// 遍历 tracks,逐个销毁释放
for (const track of tracks) {
track.release();
}