跨屏展示

sage2就是一个用来在不同浏览器窗口之间做跨屏展示的网页查看工具，支持图片视频pdf文档。不是开源的，仅限非商业用途。

sage2的前端界面由纯js，html开发，代码量多，没有用前端框架。

功能列表，electron打开任意网页，server端配置文件，客户端网格划分，操控UI界面。

跨屏的意思就是把一张完整的图片显示在不同屏幕上，每个屏幕只显示一部分内容。

http://sage2.sagecommons.org/sources/

例如3x7的矩阵，最左上角的clientID为0，最右下角的clientID为20，每个client端网页都完整的渲染了所有需要展示的内容，但每个client网页没有展示整个完整的内容，只是根据自己在矩阵的位置，通过对dom定位和偏移的方法，只展示自己这一块的内容，21个client网页拼凑起来就是一个完整的网页。

sage2有用到electron。

数据库采用nedb。服务端使用node搭建的http和socket服务器。

体感手势，leap motion。

一、前言

半年前开始接触情报中心内部大屏展示项目，中心由42块屏幕组成，每面墙由3x7共21块屏幕组成。每块大屏分别由不同人开发，最后合并作展示，其中有的大屏占据4块屏幕的大小，虽然可以用硬件方式将内容投射到4块屏幕上，但不够灵活。需要寻找一个软件实现方案，灵活多变，易于扩展。

最后找到了sage2，功能非常强大，支持各种类型内容的跨屏展示，如共享屏幕、图片、视频、pdf文档等。

仅内部使用sage2确实非常好，如果商业用途的话，由与版权问题，需要寻找其它解决方案。

下面首先分析介绍一下sage2，以及在实际项目中遇到的问题及解决方案，最后介绍参考sage2的设计思路，实现的一套跨屏方案框架CMIN

二、sage2是什么

现在的网络协同系统： Google的Hangouts，思科的WebEx，还有Skype，可以让用户和远程的协作者通过视频会议或桌面共享的方式来协同工作。

第一个版本的sage是2004开发的，它可以让一个团队在一些并排的屏幕前协同工作，在超大分辨率屏幕下查看有大量信息的内容

2014年，为了提高数据密集的同地协作能力并增强远程协作功能，sage2在web技术基础上对sage进行了重新设计，sage2就是一个用来在不同浏览器窗口之间做跨屏展示的网页查看工具

sage2官方网站：https://bitbucket.org/sage2/sage2/wiki/Home

例如，有一张很大的图片要在大屏上做展示，而该大屏是由21台显示器拼凑起来的，该怎么实现？

在以往的条件下，要么在一台pc上打开该图片，然后用硬件的方式，把这张图片的信号投射到21块显示器拼凑起来，要么把该图片手工裁剪成21块，在21台pc上分别打开其中一张图片投到各自的显示器上拼凑起来。那么如果是一个视频呢，用前面的硬件方式也还行，但如果后一种方式裁剪就很麻烦。怎样才能很方便的实现跨屏展示的功能，sage2就是很好的一个方案。

在上面的例子中，我们在sage2的config文件中配置3x7的矩阵显示，并启动sage2服务，这样sage2就分配了21个client网页，每个网页上展示部分内容，在sage2中打开这张要显示的图片，21台pc上分别用浏览器打开各自的由sage2分配的client端网页，拼凑起来就是一张完整的图片。其他如视频、pdf文档、网页、屏幕共享的内容也都可以在sage2展示，可以很方便的实现跨屏

三、sage2的原理是什么，怎么实现的跨屏展示？

sage2基于node搭建的server，引入了处理图片、视频等多媒体的库如ffmpeg、image magic、exiftool等，所有需要展示的内容如图片、视频、网页、pdf文档等都渲染到一个网页中。

启动sage2 server时，读取配置文件信息，主要的是读取要分成多少个方格矩阵，每个方格对应一个sage2的网页地址，每个网页打开时，会连接到sage2服务器，sage2根据完整的要显示的网页，根据该client在大屏的位置发送命令控制该client内容的展示。

四、怎么安装sage2？

1. Mac:

install chrome
install nodejs
install home-brew
install ffmpeg:

brew install ffmpeg --with-libvpx --with-libvorbis —with-ffplay

install image magic:

brew install imagemagick --with-ghostscript --with-webp —with-fontconfig

install exiftool:

brew install exiftool

generate https keys:

cd ~/gitlab/sage2server/keys && ./GO-mac

install node modules:

cd ~/gitlab/sage2server && cnpm i

Details： https://bitbucket.org/sage2/sage2/wiki/Install%20(Mac%20OS%20X)

2. Windows:

install chrome
install nodejs
install 7-Zip
install git for windows:
install image magic:
http://www.imagemagick.org/script/binary-releases.php#windows
install ghostscript:
http://www.ghostscript.com/download/gsdnld.html
install ffmpeg(shared and dev):
http://ffmpeg.zeranoe.com/builds/
install exiftool:
http://www.sno.phy.queensu.ca/~phil/exiftool/
set environment

Details： https://bitbucket.org/sage2/sage2/wiki/Install%20(Windows)

四、怎么使用sage2？

1. 配置:

a) 在/config目录下创建配置文件
b) 配置文件详情可查看
(https://bitbucket.org/sage2/sage2/wiki/Configuration)

2. 运行sage2

a) 打开 Terminal / Cmd
cd
node server.js -f

b) 打开浏览器
Google Chrome: install Sage2 chrome extension
(https://chrome.google.com/webstore/detail/sage2-screen-capture/mbkfcmpjbkmmdcfocaclghbobhnjfpkk )

Sage2 pages:
Display Client: https://:/display.html?clientID=
Audio Client: https://:/audioManager.html
SAGE UI: https://:
SAGE Pointer: https://:/sagePointer.html

五、sage2可以用来展示哪些内容？

screen sharing: share any opened window and the entire screen
images
video
PDF
user developed application
web view (结合electron)

附： electron介绍：
electron可以把前端页面进行封装做成跨平台的桌面应用，基于nodejs

六、sage2使用遇到的问题及解决方案

问题一：跨屏展示时，受不同pc软硬件配置等影响，不能保证展示的动态内容能够同步，怎样实现跨屏展示的数据同步问题？

设计方案一：

封装sage2的开发接口并暴露给app，统一规范，简化app开发流程，所有app实现这些固定的接口，使每个app不仅可在sage中运行，也可独立于sage运行

封装sage2sdk，供控制端等其他客户端与sage server进行通信，可将sage2原本的client中代码提取出来

目前sage是在应用层面有master的概念，需要在其基础上，在app的层面指定某个client为master，使其作为核心，需要同步的数据由其进行统一的计算，然后通过服务器同步给其他client

app里设计tick、darwBySyncData等概念，master在tick里进行同步数据的计算，所有clients在drawBySyncData根据同步的数据进行绘制

设计方案二

现有的app已经采用redux，将所有组件的状态提取出来，并同步到服务器，服务器broadcast给所有客户端进行同步

利用sage2的electron窗口管理，其可以打开任意的网页，每个app均以electron中browserWindow的方式打开

现有sage2的electron窗口管理需要优化：webview窗口样式修改、app预加载优化打开速度，如果有些app需要登录帐号或安全验证时，还需要在webview加入保存cookie及session等功能

上述两种方案的对比

工作量：方案一需要封装sage2接口，同时现在开发的所有页面都需要用新的接口重构，工作量大，方案二无需修改现有的页面，只需加强electron的窗口管理即可

client端：方案一client运行在浏览器中，方案二client运行在跨平台的electron应用的webview内

数据同步方式：方案一由master客户端向数据服务器请求数据，并将需要的数据或其他同步数据一起发送给sage2服务器，由sage2服务器广播给所有的客户端。方案二是每个client都独立请求数据，并将自己的状态同步给服务器并广播给每个client，而sage2服务器只用于跨屏展示

部署：方案一master客户端承担大量的计算和数据同步，需要配置比其他客户端高一点。方案二每个客户端同等配置即可

数据同步：方案一只有master向服务器同步数据，而方案二每个客户端均向服务器同步数据，会导致服务器过多的进行数据同步，负载增大而且每个客户端在向服务器发送同步数据同时又要根据服务器的传过来的同步数据进行渲染，负载也增大

设计方案三（综合前两种方案）

在方案二的基础上加入方案一的master的概念，优化数据同步逻辑

在electron client中，打开app是以browserWindow的方式打开，adapter代码可以在打开窗口时inject到该窗口中执行，该adapter用来实现指定master的逻辑，在所有electron客户端中指定一个为master，只有该客户端中的app才会向数据服务器上传同步数据，所有客户端根据该同步数据进行渲染

问题二：投屏界面卡顿问题

优化方案：改写投屏插件，在实时截屏的时候降低图片的质量，并且设置最大投屏个数，防止投屏树木太多导致卡顿

七、CMIN跨屏方案介绍

CMIN根据sage2的思路进行设计，功能精简，可以打开任意一个url，做跨屏展示时，与具体的项目完全隔离，这是与sage2最大的不同，sage2所有打开的app需要按照sage2的api去实现，当然现在sage2引入electron后也实现了打开任意的url功能。

八、CMIN系统结构图

a) App Control Client：这里把任何需要大屏展示的页面（对应一个url地址）看作一个app，该客户端控制app的打开关闭、缩放、位置移动等功能。

b) Display Client：根据cmin server的配置，比如配置3x2，系统会生成6个display client，每个display client展示整个大屏的部分内容，前面app control client打开的app会在display client上展示出来。

c) Electron Agent Client：部署的时候运行在每块大屏对应的pc上，可以由下面的Electron Control Client打开任意的网页，是通用的，但在我们的大屏系统中一般是打开上面的display client对应的url。

d) Electron Control Client：对上面所有运行的Electron Agent Client进行统一的批量管理，可以发送命令控制某个或多个Electron Agent Client打开某个url。

e) Cmin Server：使用node搭建的http和socket服务器，数据库采用redis，对上面的4种类型的客户端连接进行管理，一个客户端发送的命令会通过该服务器同步给所有类型的所有客户端。

九、后记

以上cmin项目还有需要优化和完善的地方，只满足了当前的需求，在后续的实际项目中不断发现并解决问题