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