1

WebRTC教程—屏幕共享

已有 264 阅读此文人 - - Uncategorized -

作者:deepstreamHub(原文链接

翻译:刘通

原标题:WebRTC 05: Screen Sharing

前一篇:WebRTC教程—音频与视频

 

在本篇讲解屏幕共享教程中我们并不会直接谈论到WebRTC。为什么?因为从你电脑屏幕发出的视频跟我们在上一篇“音频与视频”教程中所讲到的一样,也是媒体流,可以用完全一样的方法将其附在PeerConnection上。区别在于:这个媒体流相对于“音频与视频”教程中的媒体流要难获取的多。

screen1

(点击图片跳转到原文查看例子)

从你的屏幕内容中获取MediaStream

概括地说,从你的浏览器窗口或者桌面中提取媒体流需要三个步骤:

唤起屏幕捕捉对话框:

screen2

弹出的窗口如下图所示:

screen3

一旦用户确认了之后,通过sourceID唤起的onResponse需要被传给navigator.getUserMedia()作为视频约束定义的一部分

screen4

我们需要做的就是将我们的数据流要么附在WebRTC PeerConnection上,要么在一个视频单元中播放。

困难的部分

但是:这项功能目前只在Chrome和Firefox浏览器中可用。Firefox允许直接使用,但是Chrome让chooseDesktopMedia API只能在插件中使用。

一般工作流程如下:

#1 主界面产生一个postMessage调用来请求sourceID

#2 postMessage被Chrome扩展内容脚本所接收,将postMessage传给一个事件或者一个后台页

#3 这个后台也拥有调用chrome.* API的权限,启用屏幕共享对话框,接收sourceID,以及通过postMessage将其发回

#4 内容脚本再一次把响应传给主页面

#5 主页面使用sourceID作为视频约束的一部分发出一个getUserMedia询问

现在让我们看一看在代码中是如何工作的。

1 从主页面发出一个postMessage调用

并且设置一个监听器来接收响应:

screen5

需要注意的是,如果你的应用使用postMessage来做其他的事情,那么可能需要筛选特定种类的响应消息。

2 传送消息通过扩展内容脚本

screen6

3 从后台脚本请求屏幕权限

screen7

作为扩展内容包装起来

为了将内容和后台脚本都转换成Chrome的扩展内容,我们需要加入一个manifest.json文件。你可以在这查看它的全部内容,主要的内容是使用desktopCapture API的许可。

screen8

以及指向内容脚本的指针:

screen9

以及后台脚本

screen10

想要自己尝试这个示例,你首先需要安装一个chrome扩展插件
— 下载或者克隆一个Github Repo

  • 打开chrome://extensions/
  • 检查顶端的Developer Mode
  • 点击Load unpacked extensions…
  • 选择05-screen-sharing/chrome-addon

然后点击“request desktop video”。

点击下方图片跳转到原文尝试示例。

screen11

期待你一针见血的评论,Come on!

不用想啦,马上 "登录"  发表自已的想法.