webrtc入门：2.使用getDisplayMedia获取屏幕桌面流

go2coding

已于 2022-09-23 15:53:02 修改

阅读量9.6k

点赞数 4

分类专栏： webrtc入门文章标签： webrtc

于 2022-04-21 09:45:15 首次发布

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

版权

webrtc入门专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何通过WebRTC的getDisplayMedia方法在浏览器中获取桌面或特定程序的共享流，对比了getUserMedia获取摄像头数据的方法。通过几行简单的JavaScript代码，可以在网页上实现桌面或应用的实时演示，方便快捷。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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