一款轻量的 WebRTC 封装库
npm install lite-rtchtml
`
#### npm 包引入
我们更加推荐您使用 npm 等 Node 包管理器对依赖进行安装。
`bash
npm i --save lite-rtc
`
$3
lite-rtc 旨在为开发者提供最基本的 API 封装使用,但我们后续也会开发一部分定制化场景下的一站式功能。但是现在我们还是先通过最基本的几个 API 来学习 lite-rtc 的用法吧。
首先我们来简单了解一下 WebRTC 的原生 API 如何使用,大部分 API 都可以在 window.navigator.mediaDevices 中获取。
#### 获取多媒体设备
首先我们可以通过 WebRTC 的几个基本 API 获取用户的音视频设备:
`js
navigator.mediaDevices.enumerateDevices().then((devices) => {
console.log('音频输入设备:');
console.log(devices.filter((device) => device.kind === 'audioinput'));
console.log('视频输入设备:');
console.log(devices.filter((device) => device.kind === 'videoinput'));
console.log('音频输出设备:');
console.log(devices.filter((device) => device.kind === 'audiooutput'));
});
`
通过上述 API 我们可以获得当前计算机连接的所有音视频设备的信息,其中包含了音频输入输出设备以及视频输入设备。
输入设备信息是一个 InputDeviceInfo 实例对象,输出设备信息是一个 MediaDeviceInfo 实例对象,每个对象都拥有自己的 deviceId,我们可以通过选定的 deviceId 抓取特定设备上的媒体流。
#### 获取音视频流
通过上面的 API ,我们得以获取用户计算机当前已连接的所有音视频设备的 deviceId。现在假设我们的计算机上存在一台 deviceId 为 '2c6006c9d0c2c33cded89e68382dd262ca57400c58d14b3a387e576b3b1e04bf' 的麦克风,和一台 deviceId 为 '99c6820a0f709b80aec525bd7d59397ea023ec9d1ec6fc0b4b9019975f348953' 的摄像头,下面我们通过另一个 API 来抓取这两个设备的音视频流。
`js
navigator.mediaDevices.getUserMedia({
audio: {
deviceId: {
exact: '2c6006c9d0c2c33cded89e68382dd262ca57400c58d14b3a387e576b3b1e04bf',
},
},
video: {
deviceId: {
exact: '99c6820a0f709b80aec525bd7d59397ea023ec9d1ec6fc0b4b9019975f348953',
},
},
}).then((stream) => {
console.log(stream); // 获取到的多媒体流,包含了视频轨道和音频轨道
});
`
> 其他的 WebRTC 原生 API 还有很多,各位可以前往 WebRTC Samples 学习一些简单用例,如果有意愿深入学习的,可以前往 MDN 查阅相关文档。
$3
在学习了上面的几个 API 后,我们就可以使用 lite-rtc 快速实现一个点对点的视频通话应用了。
在 CodePen 上尝试
`html
Lite RTC 点对点通信示例
``