Chrome getDisplayMedia流在共享非全屏应用程序窗口时被裁剪 - 腾讯云开发者社区

文章/答案/技术大牛

发布

用getDisplayMedia实现在Chrome中共享屏幕

Chrome网上商店已决定停止允许Chrome扩展程序的内联安装。这对WebRTC应用程序有相当大的影响，因为Chrome中的屏幕共享目前还需要扩展程序。...当在Chrome 33中引入屏幕共享时，需要通过扩展来实现，以解决安全问题。...要求扩展会增加共享过程的摩擦，但是由于内联安装，可以最大限度地减少这种摩擦：用户点击一个按钮开始屏幕共享 Web应用程序检测到Chrome并确定未安装所需的扩展 Web应用程序触发内联安装API，获取成功回调...Chrome桌面/窗口/标签共享选择器弹出，允许用户选择要共享的内容。...这里的用户体验做得非常好，在用户共享的显示器或窗口中添加了一个黄色边框，确保用户始终了解共享的内容。

5.5K3 0

媒体数据获取与播放

使用到摄像头、麦克风时浏览器就会对用户提示并希望得到用户授权。...MediaDevices.getDisplayMedia()：在得到用户授权后可以选择屏幕、窗口、Chrome 标签页进行媒体流的获取。...在获取 Mac 屏幕/窗口进行屏幕共享的时候需要在 Mac 的【偏好设置】=>【安全与隐私】=>【隐私】=>【屏幕录制】中勾选允许Chrome。...video 标签播放媒体流，这里不适用 src 属性，要使用 srcObject 属性，这个属性是HTMLMediaElement 类的其中一员，所以我们在 TypeScript 编写代码的时候在泛型约束时指定了它...height); }; // canvas元素定义复制代码通过浏览器共享屏幕：我们这里有少许的不同，我们需要使用 getDisplayMedia

1.3K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

Snagit for mac(屏幕截图和屏幕录制工具)

Snagit可以快速捕捉全屏、窗口、区域或滚动屏幕截图，并提供多种编辑工具，如裁剪、调整大小、添加文本、箭头、形状、高亮、马赛克和数字等标记。...Snagit for mac(屏幕截图和屏幕录制工具)图片Snagit for Mac主要功能特点：多种截图方式：Snagit支持多种截图方式，包括全屏、窗口、区域和滚动截图等。...功能更新添加了在 Screen Draw 处于活动状态时滚动的功能。当用户退出绘图模式时，屏幕绘图对象现在会自动淡出。改进了 Chrome 网络浏览器中自动滚动箭头的可见性。...提高了在 Chrome 网络浏览器中自动滚动捕获的准确性。提高了 Xcode 自动滚动捕获的准确性。在自动和全景（手动）滚动捕获的处理窗口中添加了一个进度条。自动滚动捕获箭头现在弹跳以提高可见性。...修复了全景（手动）滚动捕获后预览窗口有时会保留在屏幕上的问题。修复了录制全屏时 Screen Draw 控件未移动到不同显示器（如果可用）的问题。修复了捕获选择十字准线会将光标检测为选择区域的问题。

4.6K0 0

js实现页面窗口录制

一、在线demo 1、在线demo地址：http://www.lb0125.com/videoRecord.html 注：目前测试发现只有在chrome浏览器里可以使用二、直接上代码 <!...btn.addEventListener("click", async function () { let stream = await navigator.mediaDevices.getDisplayMedia...}) mediaRecorder.start() }) 三、效果操作步骤： 1、点击录制按钮后，在弹窗窗口中选择需要录制的窗口...，并点击分享后开始录制 2、录制中时，页面底部会有停止共享的按钮，点击即可结束录制，并下载录制视频到本地，同时可在该页面播放

42.1K7 4

摆脱客户端？网页发起直播势在必行！

屏幕共享 MediaDevices.getDisplayMedia Chrome 72+、Firefox 66+版本已经实现了WebRTC规范中的MediaDevices.getDisplayMedia...Chrome插件去获取screen(显示器屏幕)、application windows(应用窗口)和browser tabs(浏览器标签页)。...通过chrome.runtime.sendMessage发送消息到Chrome插件调起屏幕共享。获取到streamId后，通过mediaDevices.getUserMedia得到stream。...浏览器要求： Chrome 58+ Firefox 56+ Safari 11+（屏幕共享不可用） Opera 45+（屏幕共享不可用） QQ 10+（屏幕共享不可用） 360 安全浏览器 9.1+（屏幕共享不可用...屏幕共享 Web 端屏幕共享，通过创建一个屏幕共享的流来实现的。Chrome屏幕共享需要下载插件，在创建的流的时候还需要传入插件的extensionId。

3.4K6 1

音视频技术开发周刊 56期

用getDisplayMedia实现在Chrome中共享屏幕 Chrome网上商店已决定停止允许Chrome扩展程序的内联安装。...这对WebRTC应用程序有相当大的影响，因为Chrome中的屏幕共享目前还需要扩展程序。getDisplayMedia能来解决这个问题吗？...图片设置到 UIImageView 或者 CALayer.contents 中去，并且 CALayer 被提交到 GPU 前，CGImage 中的数据才会得到解码。...本文主要介绍了图片解码时产生的性能问题及优化。...(非深度学习)的识别算法上.

9822 0

# 学会这些 Web API 使你的开发效率翻倍

alert("自动复制失败，请手动复制"); }); }; const handleCopyValue = (text) => { //浏览器禁用了非安全域的...# Fullscreen API（进入/退出全屏） Fullscreen API 用于在 Web 应用程序中开启全屏模式，使用它就可以在全屏模式下查看页面/元素。...); // 断网时比如很常见的一个需求，断网时提示，网络恢复时刷新。...捕获的内容被呈现在一个画布上。...在 startCapture() 函数中，我们使用 navigator.mediaDevices.getDisplayMedia() 方法获取屏幕共享的媒体流，并将其渲染到canvas上。

1.8K2 0

Snagit for mac(屏幕截图和视频录制工具)

您可以选择录制整个屏幕、单个应用程序窗口或自定义区域，并可以在录制过程中添加音频轨道和麦克风音频。如果您需要一个灵活而功能强大的屏幕截图和视频录制工具，那么Snagit for Mac绝对值得一试。...Snagit for mac(屏幕截图和视频录制工具)图片以下是Snagit for Mac的一些主要特点：屏幕截图：您可以捕捉全屏、单个应用程序窗口、自定义区域或滚动屏幕，以及从相机或扫描仪中获取图像...视频录制：您可以录制整个屏幕、单个应用程序窗口或自定义区域，并可以添加麦克风音频和系统音频。图像编辑：您可以在截图上添加文本、箭头、形状、线条和高亮显示，以及进行裁剪、旋转和调整大小等操作。...图片视频编辑：您可以剪辑和裁剪视频，添加字幕和图形，并进行色彩校正和音频调整等操作。...快速共享：您可以直接将截图和视频上传到Google Drive、Microsoft OneDrive、Dropbox、Evernote、Twitter、Facebook和其他平台。

1.3K1 0

关于直播卖货系统平台在微信浏览器中音视频播放的问题

Chrome的webkit内核。...这是因为，Chrome只允许用户主动对网页进行主动触发后才可自动播放音频和视频。...，处于最上层，覆盖DOM元素，更可恶的是播放完毕时，会出现很多腾讯的广告视频。...对于直播类全屏视频，最好不要在最顶部放交互性元素 4.后台切出自动停止播放音乐在微信中打开一个自动播放音乐的直播卖货系统H5页面，有一个容易忽略的问题，就是在不退出页面的情况下，后台切出微信时，页面的音乐仍在播放...在实际中，这意味着页面是非最小化窗口的前景选项卡。 hidden : 页面内容对用户不可见。在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。

1.9K2 0

Chrome 61 Beta版已支持JavaScript模块，Web支付API，Web Share API和WebUSB

网站现在可以在Chrome for Android上使用新的navigator.shareAPI来触发原生的Android共享对话框，允许用户轻松地与任何已安装的本地app共享文本或链接。...在将来的版本中，此API也可以支持分享到已安装的Web应用程序。 ? navigator.share API允许用户通过本地Android共享对话框与各种本地app共享内容。...当从已安装的网络应用程序导航到初始Web应用程序范围之外的网站时，新的站点现在将自动加载到自定义Chrome选项卡中。...对于使用原生控件播放的视频，当用户按照与屏幕上播放的视频相匹配的方向旋转设备时，Chrome会自动将视频扩展为全屏。...现在可以使用ImageCapture.getPhotoSettings()获取“非实时”相机设置，如照片分辨率，防红眼和闪光模式。

2.1K6 0

详解如何将 Android 手机投屏在 Ubuntu 上

全屏您可以通过如下命令直接全屏启动scrcpy： scrcpy --fullscreen scrcpy -f # short version 全屏状态可以通过MOD+f实时改变。（6)....需要注意的是，只有在前台应用程序支持所要求的模式时，才会进行切换。（2). 复制黏贴每次Android的剪贴板变化的时候，它都会被自动同步到电脑的剪贴板上。...例如 Termux 在Ctrl+c被按下时发送 SIGINT，又如 K-9 Mail 会新建一封新邮件。...在应用程序不接受黏贴时（比如 Termux ），这项功能可以排上一定的用场。需要注意的是，这项功能可能会导致非ASCII编码的内容出现错误。...所有的 Ctrl+按键的热键都是被转发到设备进行处理的，所以实际上会由当前应用程序对其做出响应。（4).

5.3K1 0

技术解码 | 深入解析Web OBS的实现

目前主流浏览器已经放弃了对 Flash 的支持，Chrome 从 88 版本开始彻底禁用了 Flash。因此，使用 WebRTC 进行直播推流成为了 Web 上最好的选择。...，通过共享屏幕窗口（比如桌面窗口、应用窗口、浏览器标签页）获取音视频流。...另外需要注意的是 iOS 14.3 及以上版本才支持在 WKWebView 中使用 getUserMedia 接口以及移动端不支持 getDisplayMedia 接口。...目前为止，chrome 浏览器还没有彻底修复这个问题。唯一的解决办法是关掉浏览器设置中的硬件编码选项，但是对于用户来说不太友好。...每一个 element 只能被提取一次，第二次调用就会报错，我们需要保存第一次生成的结果。

2.4K3 0

iPhone X 适配指南 (官方翻译版)

大多数使用标准系统提供的UI元素（如导航栏，表格和集合）的应用程序会自动适应设备的新外形。背景材料延伸到显示器的边缘，并且UI元件被适当地插入和定位。...在iPhone X上预览您的应用程序。您可以使用Simulator（Xcode附带）来预览应用程序，并检查剪辑和其他布局问题。一些功能，如宽彩色图像，最好在实际设备上预览。提供全屏体验。...全屏4.7 寸设备图像在iPhone X上裁剪 iPhone X上的信箱全屏iPhone X图像在4.7 寸设备上裁剪在4.7 寸设备上进行Pillarboxing 在重复使用现有图稿时，请注意长宽比差异...iPhone X具有不同于4.7 寸iPhone的长宽比，因此，全屏4.7 寸iPhone图形在iPhone X上全屏显示时出现裁剪或letterboxed。...同样，全屏iPhone X图稿在显示时被裁剪或被柱状显示全屏显示在4.7 寸iPhone上，确保重要的视觉内容保持在两种显示尺寸上。避免将交互式控件明确放置在屏幕底部和角落。

3.6K5 0

奥利奥好吃吗？Android 8.0新特性适配测试报告来啦！

作者lane，腾讯适配测试负责人、WeTest专家兼容测试负责人商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。...这功能允许用户自定义窗口大小，可以让用户把视频窗口固定在屏幕角落，同时运行其他APP, 达到多屏显示效果。...目前只有Chrome浏览器、Google Play服务、YouTube支持画中画模式，其中YouTobe全屏播放视频时点击home键直接跳转到主屏界面，无法进入画中画模式，Chrome浏览器全屏播放视频也很多无法进入画中画模式...当出现通知圆点时，长按应用程序图标，就会以类似气泡的形式快速预览。而在通知中心中删除这些未读通知，应用图标上的标记点也会消失。...例如，如图目前版本QQ在有消息提示时仍未正确显示圆点提示 ? 测试结论测试的7款APP、游戏中出现未读通知时，APP图标上都没有通知圆点提示，也无法通过长按来直接读取提示信息。

1.6K4 0

人生想要开挂，快来学习“画中画”！

画中画图标支持webRTC的视频流 Chrome 71中的画中画支持播放MediaStream对象的视频（例如getUserMedia（），getDisplayMedia（），canvas.captureStream...这意味着可以显示包含用户网络摄像头视频流的画中画窗口，即可以显示webRTC的视频流。...，resize可以监听一个事件回调，在画中画窗口发生变化时触发。...需要注意的是这里不会返回画中画窗口下的对象信息（包括窗口width、height等）无论在safari/chrome，如果画中画内播放的是实时音视频流，浏览器会在退出画中画时暂停掉视频的播放，需要在退出画中画后手动触发视频流继续播放...： “ 某些页面的video元素想要自动进入/退出画中画，例如，当用户在Web应用程序与其他应用tab之间来回切换时，视频Web应用程序将受益于一些自动画中画行为。

2.3K3 0

实现Web端自定义截屏(原生JS版)

install方法，由于此处我们不需要依赖vue，我们就无需暴露install方法，我的预想效果是：用户在使用我插件时，直接实例化插件就能正常运行。...tempGraphPosition: positionInfoType = { startX: 0, startY: 0, width: 0, height: 0 }; // 裁剪框边框节点坐标事件...: Array = []; // 当前操作的边框节点 private borderOption: number | null = null; // 点击裁剪框时的鼠标坐标...output: { // 对外暴露default属性 libraryExport: "default" } } } 这一块的配置在Vue CLI文档中也有被提到...webrtc来替代html2canvas，于是我就看了下webrtc的相关文档，最终实现了截屏功能，它截取出来的东西更精确、性能更好，不存在卡顿问题也不存在css问题，而且它把选择权交给了用户，让用户决定来共享屏幕的那一部分内容

3.5K3 1

劫持Chrome浏览器的“新方法”

通过一张精心设计的图片文件，在配合谷歌Chrome浏览器的全屏模式，攻击者就可以开始对你进行攻击了。...当用户通过Chrome浏览器访问这个伪造的页面时，隐藏在页面中的JavaSrcipt代码会将用户的Chrome浏览器切换至全屏模式。...当浏览器加载了这个诈骗页面之后，浏览器便会自动进入全屏模式。这一切操作完成之后，该页面还会通过不断弹出警告窗口的形式来防止用户关闭该网页。...我们发现，这个伪造出来的地址栏无非只是一张JPEG格式的照片而已，这张图片被放置在了一个恰当的位置，所以当Chrome切换到全屏模式时，它才会看起来非常的逼真。...诈骗分子所期望的是，当Chrome浏览器检测到了网站页面中带有JavaSript弹窗警告功能时，向用户显示“是否需要禁用该页面的弹窗功能”的确认窗口，用户会根据自己的实际需要来进行选择。

2.1K6 0

Android 12的行为变更和版本兼容思路

应用仍然可以防止全屏游戏体验中的意外手势，因此用户在玩游戏时不会意外退出游戏；现在，所有其他全屏或身临其境的体验都允许用户轻扫一下即可导航手机。...id reported: 170188668; 安全不信任的触摸事件被阻止为了保持系统安全性和良好的用户体验，Android 12会阻止应用程序在覆盖层以不安全的方式遮盖应用程序的情况下使用触摸事件...您的应用会显示叠加层，并且叠加层仅在用户与您的应用进行交互时才会显示。受信任的窗口。...当组合的不透明度小于或等于系统对触摸的最大遮盖不透明度时，系统认为一组系统警报窗口是足够透明的。...被视为SameSite=Lax。

6.4K1 0

奥利奥好吃吗？Android 8.0 新特性适配测试报告来啦！

作者：lane，腾讯适配测试负责人、WeTest专家兼容测试负责人商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。...测试版本：Android 8.0 一、安装启动测试 Android O中权限设置新增安装限制功能，即每个APP的「安装未知应用」功能将默认被限制，避免关联应用自动安装的问题，特别是针对一些流氓应用比较有效...这功能允许用户自定义窗口大小，可以让用户把视频窗口固定在屏幕角落，同时运行其他APP, 达到多屏显示效果。...目前只有Chrome浏览器、Google Play服务、YouTube支持画中画模式，其中YouTobe全屏播放视频时点击home键直接跳转到主屏界面，无法进入画中画模式，Chrome浏览器全屏播放视频也很多无法进入画中画模式...当出现通知圆点时，长按应用程序图标，就会以类似气泡的形式快速预览。而在通知中心中删除这些未读通知，应用图标上的标记点也会消失。

3K0 0

PDF 文档编辑神器 Adobe Acrobat-最牛逼的PDF编辑器

同时 PDF 文档不像 Word 等其他文档那么容易被编辑修改（当然是可以被编辑的），也使得其更便于实现文档的流传。...“主页”视图当没有打开 PDF 时，这是入口或登录页面。通过“主页”视图，可以快速访问最近打开的文件、共享的文件、常用工具、待办任务和存储帐户。...当打开多个 PDF 时，每个 PDF 会在同一应用程序窗口的标签中打开。可以从顶部切换标签 - 标签名称显示该文件的名称。在工作区的顶端，可以看到菜单栏和工具栏。...单页视图窗口只显示一页启用滚动窗口的页面可连续滚动双页视图窗口并排显示两页双页滚动窗口并排显示两页,连续滚动可点击图片放大查看阅读模式与全屏模式在阅读模式下，可以隐藏所有工具栏和任务窗格，以最大化屏幕上的查看区域...在全屏模式下，将只显示文档；菜单栏、工具栏、任务窗格和窗口控件都将处于隐藏状态。

3.8K2 0

点击加载更多

用getDisplayMedia实现在Chrome中共享屏幕

媒体数据获取与播放

Snagit for mac(屏幕截图和屏幕录制工具)

js实现页面窗口录制

摆脱客户端？网页发起直播势在必行！

音视频技术开发周刊 56期

# 学会这些 Web API 使你的开发效率翻倍

Snagit for mac(屏幕截图和视频录制工具)

关于直播卖货系统平台在微信浏览器中音视频播放的问题

Chrome 61 Beta版已支持JavaScript模块，Web支付API，Web Share API和WebUSB

详解如何将 Android 手机投屏在 Ubuntu 上

技术解码 | 深入解析Web OBS的实现

iPhone X 适配指南 (官方翻译版)

奥利奥好吃吗？Android 8.0新特性适配测试报告来啦！

人生想要开挂，快来学习“画中画”！

实现Web端自定义截屏(原生JS版)

劫持Chrome浏览器的“新方法”

Android 12的行为变更和版本兼容思路

奥利奥好吃吗？Android 8.0 新特性适配测试报告来啦！

PDF 文档编辑神器 Adobe Acrobat-最牛逼的PDF编辑器

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐