【山大会议】WebRTC基础之用户媒体的获取

前言

WebRTC 是一种支持网页浏览器进行实时语音视频通话的技术，于2011年6月1日开源并在 Google、Mozilla、Opera 的支持下被纳入万维网联盟的 W3C 推荐标准。
这是我第一次接触该技术，因此在正式使用之前先对该技术进行基本的学习。

获取音视频流

要开发音视频通话功能，首先我们需要获取到音视频流。现代浏览器基本已经实现了 WebRTC 的 API，我们可以通过调用这些 API 实现最基本的功能。首先我们来认识一下如何通过 WebRTC 的 API 获取用户的默认麦克风的音频流，用到的代码很简单：

navigator.mediaDevices.getUserMedia({
    
	audio: true
}).then((stream) => {
    
	console.log(stream.getTracks());
})

我们通过调用 navigator.mediaDevices.getUserMedia() 方法，获取到了一个 Promise<MediaStream> 对象，通过 then 方法得到了一个媒体流，而这个媒体流中包含着一个 kind 为 “audio” 的媒体流轨道。当你将这个媒体流作为 srcObject 赋给某个 <audio /> DOM 对象时，你就能听到自己麦克风的声音了。
接下来我们也可以仿照上面的写法，同时获取麦克风的音频和摄像头的视频，代码也很简单，只要向入参中加一条 video: true 就可以了：

navigator.mediaDevices.getUserMedia({
    
	audio: true,
	video: true
}).then((stream) => {
    
	console.log(stream.getTracks());
})

这回我们就会看到，这次获取到的流中多了一条视频轨道，其内容即是我们的摄像头所拍摄到的数据。
学会了基本的媒体流获取操作后，我们还可以添加更多的约束来根据需要获取不同的流，比如下面这样：

navigator.mediaDevices.getUserMedia({
    
	audio: {
    
		noiseSuppression: true,
		echoCancellation: true,
	},
	video: {
    
		width: 1920,
		height: 1080,
		frameRate: {
    
			max: 30
		}
	}
}).then((stream) => {
    
	console.log(stream.getTracks());
})

在这个例子中，我们给 getUserMedia 方法传入了一些特殊的约束，下面我们来逐个介绍一下这些约束所代表的含义：

• noiseSuppression：表示噪音抑制，默认值为 true。
• echoCancellation：表示回声消除，默认值为 true。
• width、height：表示获取的视频流的宽高。
• frameRate：表示获取的视频流的帧数，max表示最大值，min表示最小值，exact表示确切值。

除了上述的几个约束外还有其他更多的约束，可以自行查阅手册进行学习，本文不做过多赘述。

捕获桌面流

类似腾讯会议，我们也想在我们的产品中加入屏幕共享的功能，类似的桌面捕获功能 WebRTC 也有为我们实现，我们可以通过下面这个 API 进行调用：

navigator.mediaDevices.getDisplayMedia({
    
	video: true,
	audio: true
}).then((stream) => {
    
	console.log(stream.getTracks());
})

通过这种方式，我们可以选择捕获不同的窗口并分享其中的画面和音频。

选择不同的设备

当然，为了满足不同用户的需要，有时我们还需要让用户自行选择需要使用的音视频设备。要做到这一点，我们首先得将用户当前设备上的所有音视频设备都列举出来。

navigator.mediaDevices.enumerateDevices().then((devices) => {
    
	for (const device of devices) {
    
		console.log(device);
	}
})

通过这个调用，我们能够获取到当前用户的机器上所连接的所有音视频设备。并可以通过设备的 kind 属性判断出这是什么类型的设备。

• audioinput 是音频输入设备，即麦克风一类；
• audiooutput 是音频输出设备，即扬声器一类；
• videoinput 是视频输入设备，即摄像头一类。

显然，我们需要的就是 audioinput 和 videoinput 两类输入设备，而且通过上面的方法调用，我们也可以获取到设备的 deviceId ，通过 deviceId 便可以指定使用的输入设备。
举个例子，假设我并不想使用电脑中的默认麦克风，而是选择另一个 deviceId 为 cc7f8d6ec7b6764d8ad8b8a737dde5b0a54943816b950bef56c00a289d1180d2 的设备，那么我就可以通过添加下面的约束来手动指定我需要的设备：

navigator.mediaDevices.getUserMedia({
    
	audio: {
    
		deviceId: {
    
			exact: 'cc7f8d6ec7b6764d8ad8b8a737dde5b0a54943816b950bef56c00a289d1180d2',
		},
		noiseSuppression: true,
		echoCancellation: true,
	}
}).then((stream) => {
    
	console.log(stream.getTracks());
})

这样我就可以拿到属于这台麦克风的音频流输入。