首页 前端杂项 WebRTC

# 相关资源

  • getUserMedia API 参考
  • getDisplayMedia API 参考

# 本篇内容

获取摄像头画面以及捕获桌面视频

# 说在前面

  • getUserMedia函数 是获取音视频流的方法，能指定设备获取音视频流以及限制只有视频或只有音频
  • getDisplayMedia函数 用于捕获用户桌面视频流，能指定整个显示器或者是限制某个窗口，单纯依靠浏览器是没办法获取到电脑正在播放的音频，而 Electron 上有捕获音视频的其他方案

# 约束

约束指上面提到的两个函数的参数，能够设置获取视频或音频的各种设置，常用的参数如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
	audio: { // 不需要就直接写false，默认麦克风只需要写true
		deviceId: '' // 由mediaDevices.enumerateDevices()获取
	},
	video: { // 只需要声音就写false，默认摄像头原生分辨率只需要写true
		width: {
			min: 1600,
			max: 2560,
			ideal: 1920 // 最优值, 设备满足则优先取这个值
		},
		height: {
			min: 900,
			max: 1440,
			ideal: 1080
		},
		deviceId: '',
		framerate: { // 视频帧数
			min: 15,
			max: 60,
			ideal: 60
		}
	}
}

以上参数均可不写，单纯使用 { audio:true, video:true } 也是可以的

# getUserMedia

此函数返回一个 Promise，resolve 内包含一个 stream，可直接放入 video 标签播放

1
2
3
4
5
6
7
8
9
const video = document.querySelector('#videoContainer')
navigator.mediaDevices.getUserMedia({ audio: true, video: true })
.then(mediaStream => {
  video.srcObject = mediaStream
  video.onloadedmetadata = () => {
    video.play()
  }
})
.catch(err => { console.log(err.name + ': ' + err.message) })

此函数运行时，浏览器会弹出授权窗口，只有用户点击允许之后才能获取到流，而点击阻止之后则会跳转到 catch 块内
file

# getDisplayMedia

1
2
3
4
5
6
7
8
9
const video = document.querySelector('#videoContainer')
navigator.mediaDevices.getDisplayMedia()
.then(mediaStream => {
  video.srcObject = mediaStream
  video.onloadedmetadata = () => {
    video.play()
  }
})
.catch(err => { console.log(err.name + ': ' + err.message) })

此函数运行时，浏览器会弹出授权窗口，只有用户点击允许共享的内容并点击共享之后才能获取到流，而点击取消之后则会跳转到 catch 块内
file
file
file

# 结果

通过以上函数获取到了音视频流，我们将这些流的轨道加入到上一节建立的对等连接中，便完成了音视频的传输，底层的编码过程对我们而言是黑箱，几乎没什么操作空间。

1
2
3
4
video.getTracks().forEach(track => {
	console.log(track);
	peerConnection.addTrack(track);
});