在会议系统中，我们有时不仅仅需要摄像头的数据，在一些场景下，需要演示桌面上的程序，同样的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);

这里对比一下，在获取摄像头的数据是navigator.mediaDevices.getUserMedia(constraints) 获取桌面的数据是navigator.mediaDevices.getDisplayMedia(constraints)，都是从navigator.mediaDevices 出发，也就是navigator.mediaDevices 管理着从哪里获取媒体数据。

从这两章的内容，我们可以看出来，使用浏览器来调用摄像头或者是桌面的数据是非常简单的，只要短短的几句话就可以把摄像头和桌面的数据显示出来，非常的方便。

————————————————

版权声明：本文为CSDN博主「go2coding」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。

原文链接：https://blog.csdn.net/weixin_40425640/article/details/124313321