问题标签 [get-display-media]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
4 回答
3702 浏览

javascript - Bug 记者:getDisplayMedia 的替代品?

我正在尝试在我的网站上实现一个错误报告器。我的目标是用户能够在解决问题时用声音描述问题并记录浏览器选项卡。然后,错误报告将只是一个视频文件,可以通过电子邮件发送给我。

似乎提议的navigator.mediaDevices.getDisplayMedia正是我想要的,但似乎没有浏览器实现它,我也没有在路线图上找到任何实现计划。

用于

实际上确实有效,但只有在启动时将命令行标志传递给 Chrome 之后。我认为基本上零用户会经历这个麻烦来帮我提交错误报告。

有没有其他方法可以实现我的目标?

0 投票
1 回答
776 浏览

node.js - 将 blob 保存为单个 webm 文件

我正在通过 webrtc 录制用户屏幕,然后使用 MediaStreamRecorder 每 x 秒发布一次视频 blob。在服务器端,我在sails 中设置了一个操作,将blob 保存为webm 文件。

问题是我无法让它附加数据并创建一个大的 webm 文件。当它附加时,文件大小会按预期增加,因此数据正在附加,但是当我去播放文件时,它要么播放第一秒,要么根本不播放,要么播放但不显示视频。

可以将文件与 ffmpeg 合并,但如果可能的话,我宁愿避免这种情况。

这是客户端上的代码:

服务器上的代码:

任何帮助将不胜感激!

0 投票
2 回答
3423 浏览

angular - Firefox 中 Angular 6 中的屏幕共享

我正在制作一个 Angular 应用程序,我需要能够共享用户屏幕。我正在使用 adapter.js 版本 6.4.8 并在 Firefox Developer 64.0b11 和 Firefox 63.0.3 中对其进行测试,我知道浏览器之间的实现存在很多差异。如果我能支持更多更好的浏览器,我至少想让应用程序在 Firefox 中运行。

运行以下命令后

我像这样导入了适配器: import 'webrtc-adapter'

最近似乎在 webRTC 中捕获屏幕发生了很多变化,WebRTC 规范的最新草案说你必须像这样实现屏幕捕获:

在我的项目中实现

使用此方法在两个版本的 Firefox 中都会出现错误:

此外,在节点 CLI 中,如果给了我这个错误:

我还发现了这篇文章: https ://groups.google.com/forum/#!topic/mozilla.dev.platform/20EhEy_ahKg 哪个状态(我认为?)在 Firefox 64/ 之前不支持 navigator.mediaDevices.getDisplayMedia 65.

但这不就是adapter.js API 的用途吗?我认为adapter.js 充当了规范和不同浏览器实现之间的抽象层。

此时我不知道我做错了什么,我是否在我的 Angular 项目中导入了错误的 webrtc-adapter,解释了错误的规范?

我希望我为您提供了足够的信息来帮助我,我非常感谢您对这个问题的帮助,因为 webRTC 对我来说是新手,我不知道下一步该做什么。

我发现试图解决这个问题的方便链接:

使用 RTCMultiConnection 在 Firefox 中共享屏幕

https://blog.mozilla.org/webrtc/getdisplaymedia-now-available-in-adapter-js/

https://jsfiddle.net/jib1/q75yb8pf

这些是如何在javascript中解决这个问题的解决方案,但我似乎无法让它在打字稿中工作。

编辑:感谢 Philipp Hancke & jib 的回答,我得到了它的工作,我所做的是像这样导入 webrtc-adapter:

并像这样从我的代码中调用它:

0 投票
1 回答
6965 浏览

javascript - navigator.mediaDevices.getDisplayMedia 不支持

我正在尝试构建一个可以捕获用户桌面的网络应用程序。我发现这个 web api 应该可以完美地完成这项工作,但我似乎无法让它工作。现在,最新版本的 Edge 和 Chrome 70 都应该通过启用标志来支持它,但是如果我正在查看导航器对象,那么在这两个浏览器上,该getDisplayMedia()功能都不在那里。我也尝试调用该函数,但我收到一条错误消息,指出它不是函数(确认它实际上不在导航器中)。可能是什么问题呢?

提前致谢!

编辑:这是我的 javascript

0 投票
4 回答
3691 浏览

angular - navigator.getDisplayMedia 不是 Angular 6 中的函数

我正在尝试共享用户屏幕并需要使用getDisplayMedia但在项目编译时出错

“导航器”类型上不存在属性“getDisplayMedia”

这是代码

包版本为

  1. 节点 v10.14.2
  2. NPM v6.5.0
  3. @角/cli v6.1.5
0 投票
2 回答
1046 浏览

javascript - 如何从字节数组创建示例 webm 文件

我正在开发一个屏幕捕获应用程序,并且能够让ondataavailable事件工作并以块的形式获取数据,我将其进一步转换为 blob,但是当我通过 websocket 将相同的数据流发送到服务器并将流保存为 webm 文件时磁盘并稍后播放文件,该文件不播放任何内容。我认为该文件需要一些我不确定的元信息。

有什么建议么?

这是我的 JavaScript 代码:

socket.emit('message', new Blob([event.data], {type: 'video/webm'}));

服务器保存代码:

fs.writeFile("d://test.webm", data, "binary", function(err) { });

0 投票
1 回答
2276 浏览

javascript - 可以使用 webrtc 在 webapp 中流式传输桌面

是否可以在 web 应用程序中使用 webrtc 流式传输桌面信息。如果可能的话,这样的应用程序是否会成为安全问题,目前我们构建了一个可以使用带有 webrtc 的网络摄像头进行流式传输的应用程序。但是我不知道如何将计算机的实际桌面流式传输给某人,我只知道像 Skype 或 TeamViewer 这样的本机应用程序可以做这样的事情,但是一个 web 应用程序呢?

0 投票
1 回答
702 浏览

javascript - 录制时未捕获会议中所有用户的音频

所以我navigator.getDisplayMedia()用来让用户选择屏幕的来源开始录制。但这目前不支持音频,所以我navigator.mediaDevices.getUserMedia({ audio: true });用来获取音频流,然后最终将视频轨道添加到它,然后将此流传递给 mediarecorder。

我的是一个视频会议网络应用程序,我设法捕获所有类型的音频,但是当任何其他用户加入房间时,我没有在录音中获得他/她的音频。

有没有人遇到过类似的问题?

0 投票
1 回答
3310 浏览

javascript - Getting a single screenshot of browser using getDisplayMedia without prompting user

I am building an online app and on click of a button I want to be able to screenshot what the user sees in their browser(my app). I've looked at lots of js libraries such as html2canvas, CCapture as dom-to-image but my page will have a mixture of html, svg, canvas and webgl content and none of the solutions I have found seem to capture it perfectly.

I then came across the Screen Capture API and getDisplayMedia.

All examples I can find always ask which tab/application/screen you want to share then have a live stream of your chosen page.

Ideally I don't want the user to do anything other than click the capture button and it to capture a single image (data url) of the page that the user initiated the function on. I can then use that dataurl elsewhere.

Any advise would be greatly appreciated

0 投票
0 回答
652 浏览

javascript - 带音频的getDisplayMedia应用程序窗口?

目前,新的 getDisplayMedia() API 仅允许您在使用桌面捕获或 Chrome 窗口捕获时捕获音频。应用程序窗口捕获不捕获音频。

使用应用程序窗口捕获时有没有办法捕获完整的桌面音频?不仅仅是麦克风。也许通过解决然后将音频和视频轨道混合在一起?