在Chrome中进行屏幕捕捉2

作者:Phil Nash(原文链接

翻译:刘通

原标题:Screen capture in Google Chrome

前文连接:在Chrome中进行屏幕捕捉1

搭建屏幕捕捉功能

在这篇博文的剩余篇幅中,我们要来看看如何用我们新写的扩展程序进行屏幕捕捉。

我们在项目文件夹中创建一个新的路径叫做chrome,在chrome里面建一个新的HTML页,叫做index.html。添加以下标记:

screen21

这是一个基本的HTML页面,其中包含一个<video>元素来展示我们的结果,两个按钮来控制屏幕捕捉的开启和关闭,以及一个<script>块我们稍后用来写其余的代码。

我们以收集将要使用的DOM元素着手来进行代码的编写。我们还为稍后要进行扩展的请求设置了一个对象。记住我们可以提供我们想要选择的来源。在这个应用中,我们将要可以选择分享整个屏幕,分享app窗口,还是分享chrome浏览器的一个标签页。你还需要之前在chrome中加载你的扩展程序时的ID。把这些加到<script>块中:

screen22

现在,开始捕捉桌面。当我们想要通过点击按钮获取屏幕内容的时候,我们会给扩展程序发送一个请求,并且在回调中得到应答。

screen23

一旦我们获得应答之后就要检查是否成功。如果成功了的话,我们可以提取出扩展程序返回给我们的流ID,并把它传给mediaDevices API。如果不成功,那么我们就要记录这个请求被拒绝了。

screen24

在这段代码中,我们将选项传递给mediaDevices.getUserMedia的视频选项。chromeMediaSource应该被设成’desktop’,并且chromeMediaSourceID应该是我们从扩展程序处得来的流ID。

我们还需要写的代码与常规的getUserMedia代码就一样了。该函数返回使用流解析的一个Promise,所以我们需要将这个流设置为页面中<video>元素的源。我们还将隐藏获取屏幕按钮,只显示停止屏幕按钮并捕获可能发生的任何错误。

screen25

最终,我们可以写停止屏幕获取的代码了。这会监听按钮是否按下,如果点击了按钮就获取流的轨道,并且停止它们。它还将src从<video>处移出,然后将显示出来的按钮换成获取按钮。

screen26

这就是全部代码了。现在让我们来运行试试。

屏幕捕捉

我们需要做的最后一件事情就是在本地主机上提供这个HTML文件。我通常用的是一个叫做servedir的npm模型。如果你已经安装了Node.js和npm,你可以通过下面指令安装servedir

npm install servedir –g

然后你可以用指令行浏览你保存文件的路径,并且通过下面指令在本地主机上进行服务:

serve .

现在打开这个页面,点击“Get the screen”按钮,并且选择你想要分享屏幕,窗口还是标签页。然后你就可以捕捉你的屏幕信息了!

screen27

你可以在这个GitHub repo上查看文件。

填写常用邮箱,接收社区更新

WebRTC 中文社区由

运营