开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Chrome getDisplayMedia流在共享非全屏应用程序窗口时被裁剪

Chrome的getDisplayMedia流是一种用于在浏览器中共享屏幕、窗口或标签的功能。当共享非全屏应用程序窗口时，getDisplayMedia流可能会被裁剪。

getDisplayMedia是WebRTC API的一部分，它允许开发者通过JavaScript代码访问用户的媒体设备，如摄像头和麦克风，并进行音视频通信。通过使用getDisplayMedia流，用户可以共享屏幕上的内容，以便其他用户可以观看或与其进行交互。

然而，当共享非全屏应用程序窗口时，getDisplayMedia流可能会被裁剪。这是因为Chrome的安全策略限制了对非全屏窗口的访问。为了保护用户的隐私和安全，Chrome只允许访问全屏窗口或浏览器标签。

在这种情况下，建议使用以下方法来解决getDisplayMedia流被裁剪的问题：

使用全屏模式：将应用程序窗口切换到全屏模式，这样就可以通过getDisplayMedia流共享整个屏幕内容。
使用Chrome扩展程序：开发一个Chrome扩展程序，通过扩展程序的权限来访问非全屏窗口，并将其内容共享给其他用户。
使用其他浏览器：如果Chrome的限制无法满足需求，可以尝试使用其他支持getDisplayMedia流的浏览器，如Firefox或Safari。

腾讯云提供了一系列与音视频通信相关的产品，如实时音视频（TRTC）、云直播（CSS）、云点播（VOD）等。这些产品可以帮助开发者实现音视频通信、直播和点播等功能。您可以访问腾讯云官网了解更多关于这些产品的详细信息和使用指南。

腾讯云实时音视频（TRTC）产品介绍链接：https://cloud.tencent.com/product/trtc 腾讯云云直播（CSS）产品介绍链接：https://cloud.tencent.com/product/css 腾讯云云点播（VOD）产品介绍链接：https://cloud.tencent.com/product/vod

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

用getDisplayMedia实现在Chrome中共享屏幕

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

4.5K3 0

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

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

3K0 0

媒体数据获取与播放

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

9232 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、录制中时，页面底部会有停止共享的按钮，点击即可结束录制，并下载录制视频到本地，同时可在该页面播放

39.9K5 0

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

屏幕共享 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。

2.9K6 1

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

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

8491 0

音视频技术开发周刊 56期

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

6582 0

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

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

3972 0

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

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

1.2K2 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()获取“非实时”相机设置，如照片分辨率，防红眼和闪光模式。

1.6K6 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).

3.4K1 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上，确保重要的视觉内容保持在两种显示尺寸上。避免将交互式控件明确放置在屏幕底部和角落。

2.5K5 0

Mac投屏AirServer 7永久激活版

使用AIrServer，您现在可以从Mac，iOS，PC，Chromebook或Android设备上运行的任何AIrPlay兼容应用程序接收音频，视频，照片或幻灯片。...这样，您可以轻松共享图像，视频，音轨等。为方便起见，AIrServer还可以录制和处理视频您可以随时快速创建自己的教育演示文稿。在应用程序中，您可以选择垂直或水平方向翻转图像，以调整亮度和对比度值等。...优化镜像分辨率并调整音频同步频率AIrServer窗口可以轻松调整大小（全屏幕支持），但您也可以通过首选项窗口指定首选镜像分辨率：1080p，720p，投影机（1600X1200或1024X768）和更多...适用于MacAIrServer的用户友好型AIrPlay接收器可让您利用AIrPlay iOS功能，利用台式机共享移动设备的屏幕。因此，您可以使用存储在手机或平板电脑上的数据进行演示，举行会议等等。...使用Google Chrome浏览器内置的屏幕投射发送器也支持其他平台，如Windows 7和Linux。

1.3K3 0

AirServer 7 for Mac(Mac专用投屏工具)v7.2.6永久激活版

使用AIrServer，您现在可以从Mac，iOS，PC，Chromebook或Android设备上运行的任何AIrPlay兼容应用程序接收音频，视频，照片或幻灯片。...这样，您可以轻松共享图像，视频，音轨等。为方便起见，AIrServer还可以录制和处理视频您可以随时快速创建自己的教育演示文稿。在应用程序中，您可以选择垂直或水平方向翻转图像，以调整亮度和对比度值等。...优化镜像分辨率并调整音频同步频率AIrServer窗口可以轻松调整大小（全屏幕支持），但您也可以通过首选项窗口指定首选镜像分辨率：1080p，720p，投影机（1600X1200或1024X768）和更多...适用于MacAIrServer的用户友好型AIrPlay接收器可让您利用AIrPlay iOS功能，利用台式机共享移动设备的屏幕。因此，您可以使用存储在手机或平板电脑上的数据进行演示，举行会议等等。...使用Google Chrome浏览器内置的屏幕投射发送器也支持其他平台，如Windows 7和Linux。

1.7K3 0

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

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

1.8K3 0

Selenium基于PIL实现拼接滚动截图

也可以通过 Selenium Webdriver的 execute_cdp_cmd()来调用一下Chrome DevTools Protocal提供的方法。但是，很遗憾，没有全屏截图的方法。...Selenium2时，还可以使用Firefox全屏截图。Selenium3之后，所有浏览器不再支持。一种方式是使用aShot，一个jar包，这显然是Java派的解决方案。...() driver.fullscreen_window() # 全屏窗口 driver.get('https://www.qq.com/') window_height = driver.get_window_size...Image.fromarray(base_mat).save('hao123.png') driver.quit() 需要安装PIL和numpy: pip install PIL numpy 上例中，全屏窗口以获得最大展示范围...注意：如果是流式加载的页面，页面高度是不断变长的，非固定为第一次获取到的page_height的值，需要另外处理以上就是本文的全部内容，希望对大家的学习有所帮助。

1.9K3 0

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

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

1.1K4 0

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

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

1.7K6 0

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

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

1.6K3 0

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

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

4.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭