在会议系统中,我们有时不仅仅需要摄像头的数据,在一些场景下,需要演示桌面上的程序,同样的webrtc
也提供了这个功能,而且都可以从浏览器上直接获取。
前面中,我们通过getUserMedia
就可以获取摄像头和麦克风的数据,在webrtc
中,获取桌面或者指定某个程序,通过getDisplayMedia
可以得到。
main.js
#获取显示桌面数据的video
const video = document.querySelector('video');
#getUserMedia 参数,这里只获取视频
const constraints = {
audio: false,
video: true
};
把桌面的数据展示在video上
function handleSuccess(stream) {
window.stream = stream;
video.srcObject = stream;
}
#错误处理
function handleError(error) {
console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);
}
#获取桌面程序数据并回调
navigator.mediaDevices.getDisplayMedia(constraints).then(handleSuccess).catch(handleError);
选择整个屏幕,或者某个窗口。
我这里选择的是单个窗口,Android Studio
开始进行播放。
这里对比一下,在获取摄像头的数据是navigator.mediaDevices.getUserMedia(constraints)
获取桌面的数据是navigator.mediaDevices.getDisplayMedia(constraints)
,都是从navigator.mediaDevices
出发,也就是navigator.mediaDevices
管理着从哪里获取媒体数据。
从这两章的内容,我们可以看出来,使用浏览器来调用摄像头或者是桌面的数据是非常简单的,只要短短的几句话就可以把摄像头和桌面的数据显示出来,非常的方便。
这节的demo在这里。