JavaScript在chrome浏览器获取屏幕

最新推荐文章于 2024-07-01 09:11:36 发布
最新推荐文章于 2024-07-01 09:11:36 发布
阅读量2.3k 收藏 3
点赞数 2
CC 4.0 BY-SA版权
分类专栏： 获取屏幕 文章标签： 获取屏幕 javascript getDisplayMedia
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_41128253/article/details/97646424
本文介绍了如何在Chrome浏览器中使用JavaScript的getDisplayMedia方法获取屏幕流。该方法需在HTTPS环境下运行，传入参数包括video: true，成功后通过video.srcObject = stream显示流媒体数据。用户点击按钮，选择共享内容后，可以实现屏幕共享，若要分享到其他页面，可以结合WebRTC技术。

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

JavaScript在chrome浏览器获取屏幕

实例demo

navigator.mediaDevices.getDisplayMedia需要在“https:”下才有效。传入的参数是一个json对象，video:true允许获取屏幕流，其他相关的参数可查看MDN上的文档说明。then方法中的stream为获取到的流媒体数据，使用video.srcObject = stream;可以显示在此页面中。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>document<
最低0.47元/天 解锁文章

200万优质内容无限畅学
【002JavaScript Window Screen】JavaScript Window Screen：屏幕信息获取与利用指南
燃正科技
06-08 513
本教程将详细介绍 JavaScript 中的 Window Screen 对象，该对象提供了有关用户屏幕的信息和功能。通过 Window Screen 对象，您可以获取屏幕的尺寸、颜色深度、方向等信息，并执行一些与屏幕相关的操作。
chrome 截屏插件
10-12
chrome截屏插件，可用于对前段的js截屏学习。
获取显示器的个数
jszj的专栏
09-30 6492
这几天需要支持多个显示器的问题，上网上找了很多，也查看了msdn，基本上算是成功了，但是还有点问题。下面先把代码贴出来，非常简单，就一个函数：   #if(WINVER typedef BOOL (CALLBACK *pEnumDisplayDevices)( PVOID Unused, DWORD iDevNum, PDISPLAY_DEVICEA lpDisplayDevice,
js 获取屏幕和浏览器信息
汪成龙
02-12 951
window screenTop 网页正文部分上 screenLeft 网页正文部分左 screen height 屏幕分辨率的高 width 屏幕分辨率的宽 availHeight 屏幕可用工作区高度 availWidth 屏幕可用工作区宽度..
怎样使用js技术实现Chrome投屏功能？
ufrontend的博客
07-01 1727
在Web前端技术中，直接控制浏览器窗口或标签页从主屏投屏到副屏（如PPT的演讲者模式）并不简单，而且直接控制浏览器窗口从主屏投屏到副屏的功能超出了Web标准的范畴，并且涉及到用户系统级别的设置和权限，因此不可能仅通过纯Web前端技术（HTML、CSS、JavaScript）来实现一个完整的、可运行的解决方案。但是，可以提供一个简化的概念性示例，展示如何使用Electron（一个允许使用Web技术构建跨平台桌面应用的框架）来模拟这个功能。首先，你需要安装Electron和创建一个基本的Electron应用。
chrome屏幕共享插件的获取和配置
hugang的博客
08-17 1260
https://github.com/webrtc/samples/blob/gh-pages/release/desktopCaptureExtension.zip 不过我下载不了，找别人要了这个文件 解压选择 扩展程序—》管理扩展程序加载成功修改 manifest.json 文件刷新扩展程序点击详情查看我们的网址是否添加进去
chrome-usb-serialport:适用于Google Chrome浏览器的串行端口模块
05-14
Chrome USB Serialport是一个专为Google Chrome浏览器设计的串行端口模块，允许开发者通过JavaScript访问和操作硬件设备上的串行端口。这个模块是JavaScript编程的重要应用，它扩展了Web应用程序的功能，使得与物理...
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
10-22
- **Chrome浏览器**：如果`userAgent`中包含"chrome"，则认为是Chrome浏览器，并提取版本号。 - **Opera浏览器**：如果`userAgent`中包含"opera"，则认为是Opera浏览器，并提取版本号。 - **Safari浏览器**：如果`...
js获取浏览器和屏幕的各种宽度高度
10-20
本文将介绍如何使用JavaScript来获取浏览器窗口的宽度和高度以及屏幕的尺寸，并解释在不同浏览器环境下如何兼容地获取这些信息。 首先，我们来介绍获取浏览器窗口的可见区域宽高。可见区域指的是不包含浏览器工具栏...
在Chrome浏览器中获取设备信息
最新发布
12-17
在Google Chrome 浏览器中获取设备信息通常涉及到JavaScript，因为JavaScript可以在浏览器环境中直接访问用户的某些设备特性。你可以使用`navigator`对象来收集各种设备信息，例如： 1. **用户代理字符串** (User ...
浏览器获取电脑屏幕的像数打开新的页面
u013115923的博客
11-26 204
[code="java"] function xxxx(){ var windowHeight=window.screen.height-120; var windowWeight=window.screen.width-100; var windowLeft=(window.screen.width-windowWeight)/2; var openlocation="xxx/xx...
获取显示器的数量和分辨率
HelloKandy's Blog
07-12 5849
通过GetSystemMetrics 的几个重要参数，就可以获取显示器的数量、当前屏幕分辨率，以及总分辨率：#include "stdafx.h" #include &lt;Windows.h&gt; #include &lt;stdio.h&gt; int _tmain(int argc, _TCHAR* argv[]) { //当前屏幕的分辨率 int nScreenWidth, nSc...
快捷键实现浏览器截屏的Chrome 插件
Dean_wei13的博客
04-20 1093
在项目中实现快捷键触发调用chrome的截图，并获取到图片，进行后续的相关处理
使用JS技术进行web端 分屏异显实现技术思路与代码示例
ufrontend的博客
06-25 2046
使用JavaScript技术在web端实现分屏异显（即在不同屏幕或屏幕的不同部分显示不同的内容）通常涉及几个关键步骤和技术。
【js】navigator.mediaDevices.getDisplayMedia实现屏幕共享：
SunPeng的博客
09-22 2489
【js】navigator.mediaDevices.getDisplayMedia实现屏幕共享：
使用浏览器原生Api 获取屏幕内容及摄像头画面
又是再见?
10-06 1648
通过 MediaDevices.getDisplayMedia() 获取屏幕内容。通过 MediaDevices.getUserMedia() 获取用户多媒体。
前端一对一RTC实现入门
yydounai的博客
03-25 1011
RTC这个概念最近越炒越火，而webRTC只是RTC实现的其中一环。webRTC名称源自网页即时通信（英语：Web Real-Time Communication）的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的API。虽然webRTC标准在2011年就出现了，但是webRTC标准只定义了客户端的行为，服务端却并没有规范。这篇文章简单的聊一下webRTC的前端规范。 首先要即时通信，需要获取视频或者音频流，这个需要用到navigator.mediaDevices.getUserMedia这个方法，
如何在JavaScript中获取屏幕，窗口和网页大小
qq_43327962的博客
12-05 2363
浏览器的各种尺寸是javaScript中比较容易混淆的概念，下面我会在本文中解释这些概念并且通过具体示例告诉大家如何访问它们。 屏幕 屏幕尺寸 屏幕尺寸是屏幕的宽度和高度：显示器或移动屏幕。window.screen是保存屏幕尺寸信息的对象。 screen.width：屏幕的宽。 screen.height：屏幕的高。 可用屏幕尺寸 可用的屏幕大小由活动屏幕的宽度和高度组成，没有操作系统工具栏。 screen.availWidth：可利用的宽，等于屏幕的宽。 screen.availH
js录制屏幕并输出视频
weixin_43974540的博客
10-09 874
借助navigator，需要注意的是navigator.mediaDevices.getDisplayMedia需要在https使用，若部署环境为http,则会导致navigator.mediaDevices.getDisplayMedia为undefined。time为录制的时长，若时长为一秒则time值为1000。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值