采集rtsp流摄像头到浏览器实时播放方案

本文旨在实现使用摄像头采集视频,并且可以在网页实时显示,主要参考的两篇博文为: 
1.  视频实时显示的三种方案  
2.  使用WebSockets进行HTML5视频直播  
我们使用博文1介绍的第三种方案,将摄像头采集到的视频流使用ffmpeg进行编码,并且将其推送给远程服务器,在远程服务器使用stream-server.js处理视频流并且在网页上显示出来。由于原博文介绍详尽,本处不再赘述。 
注意 : 
1. 客户端电脑中需要预先安装ffmpeg,安装方案谷歌即可。 

2. 博文1中第三种方案安装nodejs过程中sudo apt-get install node-legacy 应该改为sudo apt-get install nodejs-legacy。

最近在做一个流媒体的项目,项目中需要采集摄像头的视频流到网页界面实时播放,一般ip摄像头的流格式都是rtsp的,虽然可以通过vlc实时播放,但是不如浏览器观看给用户的体验简单。

根据查找的资料和实际的实践,目前发现的切实可行的方案有以下几种(因为项目是采用java开发,因此下面的代码也主要使用java实现):

  1. 使用xuggle库直接解码rtsp流,将解码的一帧帧图片发送给浏览器,使用html5的video播放mjpeg格式,即图片的不断刷新;

  2. 使用xuggle库直接解码rtsp流,解码结果直接发送给rtmp服务器,然后浏览器使用flash直接播放rtmp的视频流;

  3. ffmpeg直接解码rtsp流,将解码结果使用http发送到nodejs服务器,nodejs服务器使用websocket发送给客户端,客户端使用canvas实时绘制图像;

下面详细介绍这几种方案。

FFmpeg和Xuggle的简介

FFmpeg是一个自由软件,可以运行音频和视频多种格式的录影、转换、流功能,包含了libavcodec——这是一个用于多个项目中音频和视频的解码器库,以及libavformat——一个音频与视频格式转换库。
FFmpeg的安装请参考:ubuntu上安装ffmpeg

xuggle官网是一个开源的资源库,能够让开发者更好的去对视频和音频文件进行解码、编码、以及录制等功能。xuggle是对ffmepg的封装,是一套基于ffmpeg的开发库。 使用非常方便。 在java中使用时,请在eclipse中导入其jar包。 xuggle-5.4-jar包下载

方案一的具体实现

xuggle读取rtsp摄像头的代码如下:
import包如下:

其中:streamLocation是需要读取的rtsp地址

上面这段代码实现了rtsp的持续读取,那么读取到的数据怎么获取,很简单,实现以下的帧回调函数onVideoPicture即可。

以上的images是使用guava库的Cache建立的代码如下:

使用html5 video标签+javax.ws.rs实现的网页显示代码如下:

以上代码参考自github上stormcv项目,项目地址为:https://github.com/sensorstorm/StormCV, 感谢原作者。

至此,打开网页 http://localhost:8558/streaming/tiles 即可查看到实时视频。

方案二的具体实现

xuggle库转rtsp为rtmp

rtsp的reader:

rtmp服务器的搭建方法请参考这里。

rtmp的writer: