Web Socket在远程视频监控中的应用探析
2017-04-26龙军
摘要：该文针对远程视频监控系统的需要，依托HTML5 Web Socket技术，研究构建适用于Web、苹果、安卓等不同平台应用的技术框架，从分析Web Socket本身入手，测试服务器端和浏览器端的互联互通，最后利用JMF实现对摄像头的控制、摄像，并将数据流传递给服务器端的Web Socket。
关键词：HTML5；视频监控；Web Socket
中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2017）06-0051-02
在HTML5之前，Web项目多采用浏览器向服务器发送请求，服务器响应的同步传送技术，要适时更新数据时就一直刷新请求。随后出现的Ajax异步通信是由浏览器发起请求，服务器端接受，属于单向信息传送，针对监控、即时通信、即时报价等要求服务器和浏览器能随时相互传送信息的应用，就难以满足了。
Web Socket是一种在服务器和浏览器之间实现高效双向通信的机制，Web Socket提供了强大的通信能力和简洁的数据传输平台，实现在一个HTTP连接上自由、适时地双向收发数据，将广泛地应用到Web项目中。
1 常用的服务器推送技术
1.1 基于浏览器套接口的服务器推送技术
这一技术是在浏览器端安装诸如Flash XML Socket套接口、Java Applet套接口等插件，通过套接口进行数据传输，其中Java Applet已经被淘汰，Flash XML Socket套接口在游戏和聊天室中应用较广，要求安装Flash插件，并设置端口，而防火墙、代理服务器等可能对非HTTP通道端口进行限制，导致应用不能正确运行。
1.2 基于HTTP连接的服务器推送技术
通过Ajax技术，浏览器在JavaScript中调用XMLHttpRequest对象发出HTTP请求，服务器响应返回XML数据，浏览器接收数据并对页面进行更新，有轮询、长轮询和流方式三种方案，流程均为HTTP请求、建立连接和响应报头模式，数据会包含众多无用的请求和报头信息，造成信息传输的延迟。
1.3 HTML5 Web Socket技术
Html5 Web Socket是基于服务器端和浏览器端间全双工的异步信息技术，使用ws或wss协议，通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接，再在此连接上进行双向通信。
2 Web Socket的常用技术
2.1 Web Socket的优势
①HTTP协议是无状态的，不能持续的保持连接状态。而Web Socket通过HTTP协议初次握手后升级到Web Socket协议，保持连接并进行实时数据通信。
②连接建立成功后，服务器可主动向浏览器端推送数据，避免了传统Web传输中由客户端发送请求才能返回数据的现象，拓展了服务器的功能。
③Web Socket首次建立连接时发送的Header和普通Web类似，但连接建立后，相互间传送数据的Header简洁，仅约2B，减少了冗余数据传输。
2.2 Web Socket的工作流程
使用Web Socket时，浏览器首先通过HTTP方式和服务器建立连接，服务器确认连接对象的源和协议，并发送连接许可响应，在浏览器收到后，一个Web Socket全双工的通信链路就建立起来了。
在Tomcat服务器上实现Web Socket时，Tomcat8真正支持JSR-356，流程上与Tomcat7.x有较大差异，本文是基于Tomcat8进行研究。
2.3 Web Socket的接口及构造函数
1）Web Socket接口声明了一个只读的Web Socket服务器网络地址URL，用ws：//或wss：//开头，应用于通信数据不加密或加密。定义了CONNECTING、OPEN、CLOSED三個常量，值依次为0、1、2，以及onopen、onerror、onmessage、onclose四个事件。
2）构造函数WebSocket（url， protocols），参数url指定了要连接的服务器地址。参数protocols为可选，指定连接子协议，可以为字符串或字符串数组。连接过程的状态保存在属性readyState中：CONNECTING、OPEN、CLOSING和CLOSED，表示连接过程中的连接中、已连接、关闭中和已关闭等四种状态。
3）Tomcat8.x提供了JavaEE7标准，Java Web Socket API定义了与Web Socket相关的类或接口，这些API的操作均采用异步回调方式触发，UI不会阻塞，响应快。
Endpoint和EndpointConfig定义端点和端点相关配置的接口方法。PojoEndpointBase及其子类处理与Endpoint相关的类或注解。ClientEndpoint和ServerEndpoint定义客户端和服务器端端点的接口方法。Decoder和Encoder定义解码和编码的接口方法。Session是与Endpoint相关的Web Socket Session接口方法定义，WsSession类实现Session接口，Endpoint、EndpointConfig与Session的实现类间存在依赖关系。
2.4 Web Socket的事件
Web Socket API是纯事件驱动的，通过监听Web Socket对象上的事件来处理输入数据和连接状态的改变，包括以下4个事件：
1）onopen：浏览器和WebSocketServer连接成功后触发onopen消息，open事件触发建立一个连接，对应回调函数onopen（）。
2）onerror：连接失败、收发数据失败或数据处理出错时触发onerror消息，error事件触发响应意外故障处理，对应回调函数onerror（）。
3）onmessage：接收数据时触发onmessage消息，message事件触发进行数据处理，对应回调函数onmessage（）。
4）onclose：接收到关闭连接请求时触发onclose消息，close事件触发处理关闭连接相关事宜，对应回调函数是onclose（）。
2.5 WebSocket的方法
1）send（）方法：连接建立后，用send（）方法发送数据。
2）close （）方法：关闭连接或者终止连接尝试，有两个可选参数：状态代码code，数字型；连接关闭原因reason，类型为文本字符串。
3 服务器端的核心结构代码
浏览器端用一个指向服务器的URL与服务器连接，并实例化一个Web Socket对象，服务器端将所有连接的浏览器端/客户端注册，再进行通信。
[private Session session；//声明WebSocket Session
//声明用于保存已连接对象的集合
private static final Set<类> 对象名
=new CopyOnWriteArraySet<>（）；
//打开连接
@OnOpen
public void onOpen（Session session） {
this.session = session；
对象名.add（this）；
//进行相关数据处理后发送信息
broadCast（"要发送的信息"）；}
//关闭连接
@OnClose
public void onClose（） {
对象名.remove（this）；
//进行相关数据处理后发送信息
broadCast（"要发送的信息"）；} //接收信息
@OnMessage
public void onMessage（String message） {
//对接收到的信息进行处理后发送信息
broadCast（"要发送的信息"）；}
//错误信息响应
@OnError
public void onError（Throwable throwable） {
//进行相关操作}
//发送或广播信息
private static void broadCast（String message） {
//通常会对所有已连接的对象进行遍历
for （已连接的对象） {
try {
synchronized （对象） {
对象.session.getBasicRemote（）
.sendText（message）； }
}catch （Exception e） {//出错后相关操作}}} ]
4 浏览器端的核心结构代码
浏览器端在JavaScript中用WebSocket（'ws：//网址'）或WebSocket（'wss：//网址'）创建一个Web Socket对象，待服务器响应连接成功后调用function open（），将其绑定到onopen事件，完成界面的初始化操作。当浏览器收到服务器发送的关闭连接请求时调用function close（），将其绑定到onclose事件，进行关闭连接的处理工作。通过function send（message）方法向服務器发送消息。接收服务器发送来的消息时调用function onmessage（event），将其绑定到onmessage事件，参数event.data中包含服务器端传送的数据。
[
客服热线：400-656-5456 客服专线：010-56265043 电子邮箱：longyuankf@126.com
电信与信息服务业务经营许可证：京icp证060024号
Dragonsource.com Inc. All Rights Reserved
webSocket.send（message）；}）；}
]
5 读取摄像头
本文通过JMF实现在服务器端控制摄像头并将视频数据流进行播放和保存。主要包括：截取诸如摄像头等设备的视频数据，并送给播放器处理；明确数据源DataSource的位置和类型后，JMF会自动定位并提取相应数据给播放器；播放器Player将数据流作为输入，并将数据流输出到相关对象上；处理器Processor继承了Player接口，拓展了对输入数据流进行处理及通过数据源向其他Player对象或Processor对象输出数据的功能；管理器有Manager等四种，其中Manager可创建Player、Processor、DataSource和DataSink对象。
本应用中用CaptureDeviceInfo的getLocator（）方法获得MediaLocator对象，再用Manager的createDataSource（）方法获得媒体数据源，用createRealizedPlayer（）获得Player实例。
[private static Player createPlayer（）{
CaptureDeviceInfo info=CaptureDeviceManager.getDeviceList（）；
MediaLocator locator=info.getLocator（）；
DataSource source=Manager.createDataSource（locator）；
source.connect（）；
return Manager.createRealizedPlayer（source）；} ]
调用Player的start（）方法截取多媒体数据时，使用一新线程重复FrameGrabbingControl实例截取并写入WebSocket。
public void start（）{
synchronized（）{
player=createPlayer（）；//创建Player对象
player.start（）；//开始截取多媒体数据
//获取FrameGrabbingControl实例
control=（FrameGrabbingControl）player.getControl（"javax.media.control.FrameGrabbingControl"）；
worker=new Worker（）；//截取多媒体数据的工作线程
worker.start（）；}}
//用线程实现读取传送数据流
private class Worker extend Thread{
private final int[] data=new int[图像大小]；//用来缓存图像流
@Override
public void run（）{
while（true）{
FrameGrabbingControl c=control；
Buffer buffer=c.grabFrame（）；//获取图像流数据并生成BufferedImage实例
BufferToImage btoi=new BufferToImage（（VideoFormat）buffer.getFormat（））；
BufferedImage Image=（BufferedImage）btoi.createImage（buffer）；
OutputStraem out=webSocket.getOutputStream（）；//輸出BufferedImage到WebSocket
DataOutputStream dout=new DataOutputStream（new BufferedOutputStream（out））；
for（int i=0；i dout.writeInt（data[i]）； }}} HTML5的Web Socket为Web开发提供了良好的数据通信基础，真正实现了全双工信息交换，服务器可主动推送数据，节省数据传送量，减轻网络负载。在移动互联网领域，HTML5在一定程度上解决了不同平台上开发APP的困扰，定位、离线存储、多线程、Web Socket等技术的应用，大大拓宽了其在手机APP上的应用。 参考文献： [1] 郑子伟.WebSocket在实时通信的应用[J].厦门城市职业学院学报，2015（9）. [2] 周乐钦.基于Web Socket协议的推送数据技术在监控系统中的应用研究[J].计算机应用与软件，2013（5）. [3] 张志明.基于HTML5的视频通信云服务应用技术研究[J].电信科学，2012（10）. [4] 龙军.基于Java语言的流式套接字编程探析[J].电脑知识与技术，2013，9（10）.
