使用javascript录制浏览器窗口的屏幕

Question

我正在开发一个应用程序，它基本上是一个可以嵌入交互式模拟的绘图应用程序。

我正在尝试在网站本身中添加录制屏幕和音频的选项，以便教师可以在线创建课程。实现这一目标的最佳方法是什么？我在互联网上搜索了很多，发现Muaz Khan的recordRTC是一个非常好的选择。但我是一个菜鸟，我觉得里面有太多的选择，我不确定哪个是最适合我的选择。

我也读过关于webRTC的文章。是否可以使用它进行屏幕录制？我不介意使用 chrome 扩展程序，前提是我应该可以选择使用它记录页面的特定部分。请帮忙....

Answer 1

截至 2018 年 5 月，您可以使用以下方法在Firefox中获取屏幕视频流：

let constraints = {
video: {
mediaSource: "screen"
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(mediaStream => {
// do something with mediaStream now
});

但是，这实际上不会记录屏幕。你需要自己建立一种方法来做到这一点。一种方法是使用WebRTC将您获得的视频发送到后端并在那里录制。

就其他浏览器而言：

• Chrome不支持原生获取屏幕媒体。您必须构建一个扩展并要求用户安装它。这并不难做到。
• Edge和safari据说支持它，但我还没有尝试过。

Answer 2

你可以检查这个库 videojs-record。使用 RecordRtc 构建。 你也可以在流行的js框架(如React和Angular(中使用它。