问如何使用navigator.mediaDevices.getDisplayMedia仅允许显示捕获

最新推荐文章于 2025-03-11 22:04:13 发布
最新推荐文章于 2025-03-11 22:04:13 发布
阅读量615 收藏 1
点赞数 1
分类专栏： webrtc 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shelutai/article/details/132507174
版权
用户询问如何使用`navigator.mediaDevices.getDisplayMedia()`功能时，希望限制捕获内容仅为整个屏幕，不包括窗口或应用内的特定选项卡。建议检查`stream.getVideoTracks()[0].getSettings().displaySurface`以确定共享类型。

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

我希望允许用户捕获他们的屏幕，但是，我不希望他们拥有捕获窗口、应用程序或选项卡的选项，只捕获整个屏幕。如果可以，我该如何使用navigator.mediaDevices.getDisplayMedia()完成此操作？

或者我想知道用户决定分享什么，例如。用户是否共享选项卡、窗口或整个屏幕。

Stack Overflow用户
发布于 2021-04-28 07:01:40

使用stream.getVideoTracks()[0].getSettings().displaySurface获取共享的类型。

https://cloud.tencent.com/developer/ask/sof/519506

探索navigator.mediaDevices：解锁WebRTC的强大功能
u013558123的博客
04-28 3829
navigator.mediaDevices是WebRTC中一个强大而灵活的API，它为开发者提供了一种简单、高效的方式来实现实时通信功能。通过深入理解navigator.mediaDevices的原理、用法和最佳实践，你可以更好地利用这一API，为用户提供更加丰富和便捷的实时通信体验。随着WebRTC技术的不断发展和普及，navigator.mediaDevices无疑将在未来的Web应用中扮演越来越重要的角色。
vue使用navigator.mediaDevices.getUserMedia调用相机功能
2401_82373036的博客
01-04 2195
本文将介绍Vue中如何使用navigator.mediaDevices.getUserMedia调用相机功能，实现拍照使用实例，需要的朋友可以参考一下。注意：Vue 调用本地摄像头实现拍照功能，由于调用摄像头有使用权限，只能在本地运行，线上需用 https 域名才可以使用。API：Navigator.mediaDevices.getUserMedia()是一种用于访问流媒体设备（如摄像机或麦克风）的API，它是Navigator.mediaDevices API的一部分。
navigator.mediaDevices API 教程
最新发布
wscfan的博客
03-11 1900
navigator.mediaDevices 是现代浏览器提供的 JavaScript API，允许 Web 应用**安全访问用户的媒体设备**（摄像头、麦克风、屏幕等）。它是实现音视频通话、屏幕录制、拍照等功能的基石。
【js】navigator.mediaDevices.getDisplayMedia实现屏幕共享：
SunPeng的博客
09-22 2387
【js】navigator.mediaDevices.getDisplayMedia实现屏幕共享：
mediaDevices-getUserMedia-getDisplayMedia
web修理工
11-16 3752
转载:https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices enumerateDevices() 获取有关系统上可用的媒体输入和输出设备的一系列信息。 getSupportedConstraints() 返回符合MediaTrackSupportedConstraints指示MediaStreamTrack接口支持哪些可约束属性的对象。见能力和限制在媒体捕获和流API（流媒体），以了解更多关于限制和如何使用它们。 getDisplayMe
【Web API系列】使用getDisplayMedia来实现录屏功能
专注Rust编程与技术分享，涵盖C++、Python等开发实战，新手友好，专注实战，助力编程成长。
12-26 3756
在当今这个信息爆炸的时代，屏幕录制已成为一种较为常见的需求。无论是制作教学视频、演示产品功能、记录游戏精彩瞬间，还是进行远程协作，录屏功能都扮演着至关重要的角色。你是否曾想过，无需安装任何第三方软件，仅通过浏览器就能轻松实现屏幕录制？这听起来似乎有些不可思议，但 Web API 中的接口却让这一切成为可能。是一个强大的 API，它允许 Web 应用程序捕获屏幕或特定窗口的内容，并将其作为媒体流进行处理。这意味着你可以像操作摄像头或麦克风一样，对屏幕内容进行录制、编辑、甚至实时传输。
js 浏览器截屏的两种方式，html2canvas和MediaDevices.getDisplayMedia()
trenki的博客
05-11 4411
下边提供两种截屏方式，一种是使用常见的html2canvas插件，另一种方法是利用Web Api的MediaDevices.getDisplayMedia() 方法。 1.html2canvas // html <div id="canvas"> <!-- 使用了网络图片 --> <img style="width: 1000px;" src="http://pic2.zhimg.com/50/v2-958d33fd4a4de747058adcafdf75
Vue navigator.mediaDevices.getDisplayMedia
01-21
### 在 Vue 中使用 `navigator.mediaDevices.getDisplayMedia` 实现屏幕共享 为了在 Vue 项目中实现屏幕共享功能，可以通过调用 `navigator.mediaDevices.getDisplayMedia()` 方法来获取用户的屏幕或窗口媒体流，并...
window.navigator.mediaDevices
01-14
### Window.Navigator.MediaDevices API 使用方法 #### 请求媒体设备权限并处理流数据 为了访问用户的多媒体输入设备（如摄像头和麦克风），可以使用 `navigator.mediaDevices.getUserMedia()` 方法。此方法接收一...
js录制屏幕并输出视频
weixin_43974540的博客
10-09 833
借助navigator，需要注意的是navigator.mediaDevices.getDisplayMedia需要在https使用，若部署环境为http,则会导致navigator.mediaDevices.getDisplayMedia为undefined。time为录制的时长，若时长为一秒则time值为1000。
webRTC（四），Android学习笔记在互联网上火了
m0_66264910的博客
02-04 258
function gotMediaStream(stream){ … window.stream=stream; … return navigator.mediaDevices.enumerateDevices(); } //开始录制 function startRecord(){ buffer=[]; var options={ mimeType: ‘video/webm;codecs=vp8’ } if(!window.MediaRecorder.isTypeSupported(options.mime
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
01-19
navigator.mediaDevices.getUserMedia 应项目要求，需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档，链接如下： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 看上去很简单，最终却写的怀疑人生。 API环境 问题一：（为什么不管怎么配置都显示前置摄像头） 想正常使用API必须在https环境下进行，否则你会发现不管怎么写，都只能调用默认的摄像头（大部分都是前置，只有少部分是后置） 前端开发者可以将文件上传至码云仓库，获取
java 获取麦克_通过浏览器获取麦克风或相机等媒体的使用权限
weixin_42515045的博客
02-16 937
概览mediaDevices 是 Navigator 对象的只读属性，一个单列对象，可以连接访问相机和麦克风，屏幕共享等媒体输入设备方法enumerateDevices请求一个可用的媒体输入和输出设备列表，如麦克风、相机、耳机等。返回的 Promise完成状态中是一个带有 MediaDeviceInfo 的数组let mediaDevices = navigator.mediaDevicesif(...
electron +vue 通过navigator.mediaDevices.getDisplayMedia实现录屏报错解决
weixin_44641777的博客
07-31 733
vue项目也就是渲染进程中有这样一句navigator.mediaDevices.getDisplayMedia({ video: true, audio: true })是为了实现录屏，在https中是没有问题的，而在客户端中出现了这样的报错。查询之后发现需要在electron项目主进程main.js当中这样写。我的项目结构是electron项目跳转至vue2项目。vue项目代码无需改变。
navigator.mediaDevices.getUserMedia 抓取指定窗口
学吧
07-20 1860
window.dos.getSources({ types: ['window', 'screen'] }).then(async (sources: any) => { console.log(sources) for (let key in sources){ if(sources[key].name.indexOf("微信")){ let sourceId = ''; // 所选择的屏幕或窗口 s
webrtc入门：2.使用getDisplayMedia获取屏幕桌面流
haleycat的博客
04-21 9651
在会议系统中，我们有时不仅仅需要摄像头的数据，在一些场景下，需要演示桌面上的程序，同样的webrtc也提供了这个功能，而且都可以从浏览器上直接获取。 前面中，我们通过getUserMedia就可以获取摄像头和麦克风的数据，在webrtc中，获取桌面或者指定某个程序，通过getDisplayMedia可以得到。 main.js #获取显示摄像头数据的video const video = document.querySelector('video'); #getUserMedia 参数，这里只获取视频 c
利用getDisplayMedia()在WebRTC上实现屏幕捕获
weixin_41821317的博客
12-14 3130
1. 用法 var promise = navigator.mediaDevices.getDisplayMedia(constraints); 2. 浏览器兼容性 3. demo <!-- getDisplayMedia_demo --> <style> html, body { margin: 0!important; padding: 0!important; text-align: center;
在CEF中给 getDisplayMedia 增加区域捕获（Region Capture）功能
我的玻璃盒子
10-13 1299
Chromium（以及CEF）以及Chrome并没有提供区域捕获功能（注：有一种消息表明Chrome M97可能会添加），但因为公司产品需要，所以就阅读了一下Chromium、WebRTC的源码，上个月花了几天时间，在Windows上为CEF添加了区域捕获功能，版本基于CEF 4472（Chromium 91）。 用法也比较简单： const displayMediaOptions = { audio: true, video: true, regionShare: true }; const
获取 navigator.mediaDevices.getUserMedia 失败
timczm的博客
06-07 6410
在开发的时候调用下面这段代码是正常工作的，但是用其他设备（如ios，safari，android等任何非本机设备）打开我本地开发环境运行的dev环境就无法调用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值