JavaScript在chrome浏览器获取屏幕

最新推荐文章于 2024-07-01 09:11:36 发布
原创 最新推荐文章于 2024-07-01 09:11:36 发布 · 2.3k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#获取屏幕 #javascript #getDisplayMedia

本文介绍了如何在Chrome浏览器中使用JavaScript的getDisplayMedia方法获取屏幕流。该方法需在HTTPS环境下运行，传入参数包括video: true，成功后通过video.srcObject = stream显示流媒体数据。用户点击按钮，选择共享内容后，可以实现屏幕共享，若要分享到其他页面，可以结合WebRTC技术。

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元/天 解锁文章
【002JavaScript Window Screen】JavaScript Window Screen：屏幕信息获取与利用指南
燃正科技
06-08 642
本教程将详细介绍 JavaScript 中的 Window Screen 对象，该对象提供了有关用户屏幕的信息和功能。通过 Window Screen 对象，您可以获取屏幕的尺寸、颜色深度、方向等信息，并执行一些与屏幕相关的操作。
使用浏览器原生Api 获取屏幕内容及摄像头画面
又是再见?
10-06 1723
通过 MediaDevices.getDisplayMedia() 获取屏幕内容。通过 MediaDevices.getUserMedia() 获取用户多媒体。
JavaScript实现一个录屏功能
wgchen
02-23 5067
阅读目录1、创建一个HTML2、使用mediaRecorder录制并存入变量中3、停止屏幕共享播放录制视频4、自动下载录制的视频5、完整代码 1、创建一个HTML OBS studio很酷，但 JavaScript 更酷，现在，我们用 JavaScript 创建自己的录屏功能。 首先，创建一个HTML文件，包含记录按钮和一个播放标签，内容如下： <!DOCTYPE html> <html> <head> <title>Parcel Sandbox&
【WebRTC 02】从摄像头获取视频以及切换分辨率和视频源
T型人小付的博客
06-22 6596
上一节中我们已经搭建出了用于操作的环境，这一节我们要实现的一个小目标，就是将电脑摄像头拍到的内容实时显示到网页上。同时我们一起学习下原理，并做一些小拓展。 文章目录操作环境实现效果几个概念HTML5中的Audio和Video APIsrc和srcObject属性MediaStream对象实现原理扩展视频分辨率切换视频源切换总结参考 操作环境 效果展示: Chrome 83 IDE: Hbuilder X 实现效果 这一节的完整代码可以在上一节下载的step-01目录中找到。 修改index.html内容
获取显示器的个数
jszj的专栏
09-30 6531
这几天需要支持多个显示器的问题，上网上找了很多，也查看了msdn，基本上算是成功了，但是还有点问题。下面先把代码贴出来，非常简单，就一个函数：   #if(WINVER typedef BOOL (CALLBACK *pEnumDisplayDevices)( PVOID Unused, DWORD iDevNum, PDISPLAY_DEVICEA lpDisplayDevice,
js 获取屏幕和浏览器信息
汪成龙
02-12 986
window screenTop 网页正文部分上 screenLeft 网页正文部分左 screen height 屏幕分辨率的高 width 屏幕分辨率的宽 availHeight 屏幕可用工作区高度 availWidth 屏幕可用工作区宽度..
精选资源
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来获取浏览器窗口的宽度和高度以及屏幕的尺寸，并解释在不同浏览器环境下如何兼容地获取这些信息。 首先，我们来介绍获取浏览器窗口的可见区域宽高。可见区域指的是不包含浏览器工具栏...
基于WebRTC的Chrome浏览器屏幕共享实现方案
描述部分进一步解释了当前WebRTC在屏幕共享方面的限制——即虽然标准支持获取屏幕流（getDisplayMedia API），但出于安全考虑，现代浏览器不会允许网页直接无权限地截取整个屏幕内容。因此，在某些旧版本浏览器或...
chrome 截屏插件
10-12
chrome截屏插件，可用于对前段的js截屏学习。
怎样使用js技术实现Chrome投屏功能？
ufrontend的博客
07-01 1916
在Web前端技术中，直接控制浏览器窗口或标签页从主屏投屏到副屏（如PPT的演讲者模式）并不简单，而且直接控制浏览器窗口从主屏投屏到副屏的功能超出了Web标准的范畴，并且涉及到用户系统级别的设置和权限，因此不可能仅通过纯Web前端技术（HTML、CSS、JavaScript）来实现一个完整的、可运行的解决方案。但是，可以提供一个简化的概念性示例，展示如何使用Electron（一个允许使用Web技术构建跨平台桌面应用的框架）来模拟这个功能。首先，你需要安装Electron和创建一个基本的Electron应用。
chrome屏幕共享插件的获取和配置
hugang的博客
08-17 1417
https://github.com/webrtc/samples/blob/gh-pages/release/desktopCaptureExtension.zip 不过我下载不了，找别人要了这个文件 解压选择 扩展程序—》管理扩展程序加载成功修改 manifest.json 文件刷新扩展程序点击详情查看我们的网址是否添加进去
浏览器获取电脑屏幕的像数打开新的页面
u013115923的博客
11-26 215
[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 5996
通过GetSystemMetrics 的几个重要参数，就可以获取显示器的数量、当前屏幕分辨率，以及总分辨率：#include "stdafx.h" #include &lt;Windows.h&gt; #include &lt;stdio.h&gt; int _tmain(int argc, _TCHAR* argv[]) { //当前屏幕的分辨率 int nScreenWidth, nSc...
chrome浏览器使用原生工具截图
短歌行
07-04 234
大象装冰箱需要三步 F12打开开发者工具 ctrl + shift + p 调出命令列表 capture full size（node、screenshot） screenshot 截整个(节点、可见)网页
快捷键实现浏览器截屏的Chrome 插件
Dean_wei13的博客
04-20 1283
在项目中实现快捷键触发调用chrome的截图，并获取到图片，进行后续的相关处理
使用JS技术进行web端 分屏异显实现技术思路与代码示例
ufrontend的博客
06-25 2258
使用JavaScript技术在web端实现分屏异显（即在不同屏幕或屏幕的不同部分显示不同的内容）通常涉及几个关键步骤和技术。
【js】navigator.mediaDevices.getDisplayMedia实现屏幕共享：
SunPeng的博客
09-22 2706
【js】navigator.mediaDevices.getDisplayMedia实现屏幕共享：
在Chrome浏览器中获取设备信息
最新发布
12-17
在Google Chrome 浏览器中获取设备信息通常涉及到JavaScript，因为JavaScript可以在浏览器环境中直接访问用户的某些设备特性。你可以使用`navigator`对象来收集各种设备信息，例如： 1. **用户代理字符串** (User Agent String): 可以通过`navigator.userAgent`获取，它包含了关于浏览器、操作系统、CPU等的信息。 ```javascript let userAgent = navigator.userAgent; ``` 2. **屏幕尺寸**: `window.innerWidth` 和 `window.innerHeight` 可以分别获取浏览器窗口的宽度和高度。 ```javascript let screenWidth = window.innerWidth; let screenHeight = window.innerHeight; ``` 3. **设备名称** 或 **平台**: `navigator.platform` 提供了用户正在运行的操作系统名。 ```javascript let deviceName = navigator.platform; ``` 4. **是否触摸屏**: `navigator.maxTouchPoints` 可以判断设备是否支持触控操作。 ```javascript let isTouchDevice = navigator.maxTouchPoints > 0; ``` 5. **设备像素比** (Pixel Ratio): `window.devicePixelRatio` 返回显示器物理像素密度相对于CSS像素的比例。 ```javascript let pixelRatio = window.devicePixelRatio; ``` 请注意，由于隐私原因，一些信息可能会受到限制，尤其是对于移动设备。在处理用户数据时应遵守相应的隐私策略。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值