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

2019年12月11日 阅读数:276
这篇文章主要向大家介绍采集rtsp流摄像头到浏览器实时播放方案,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

转载自:严健康的我的博客 http://www.yanjiankang.cn/javascript

本文连接地址: http://www.yanjiankang.cn/rtsp_camera_to_web_browser/html


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

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

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

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

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

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

FFmpeg和Xuggle的简介

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

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

方案一的具体实现

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

其中: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: