最近公司项目需要在web上实时播放摄像头视频。但是早前由于html发展太慢。浏览器不支持。各大视频厂商基本都是开发扩展插件来实现。但是目前各大浏览器都有安全机制,基本不允许额外安装插件等,
百度了很多。很多都是基于ie,,使用active插件实现,而我们公司项目优化是基于谷歌,,,,而且不能使用插件(用户体验)。
所以整理一套。无需安装插件,在任意浏览器实时播放摄像头视频
正文:
部署nginx、ffmpeg转为rtmp、利用video.js播放,无需浏览器安装插件
摄像头采用大华的,这里提供一个大华摄像头ip搜索软件(用于检测同一网段下在线摄像头设备信息)
地址:https://download.csdn.net/download/u011877155/10765657
环境:windows 服务器
vcl视频播放器https://download.csdn.net/download/u011877155/10765708
1、查看摄像头信息:首先打开上面ip搜索软件,获取摄像头ip,查看主码流,视频编码等。如果知道摄像头地略过
2、确认提供流是否能够播放:打开vlc播放器【媒体--》打开网络串流,输入流地址】。这里大华提供的rtsp流地址,
【rtsp://账号:密码@IP地址:544/cam/realmonitor?channel=1&subtype=0\】【端口号默认544,通道号channel默认1,主码流为 0(即subtype=0),辅码流为1(即subtype=1)】
3、将nginx、ffmpeg 解压后放置c盘根目录。配置环境变量path:C:\ffmpeg\bin
相关文件地址:https://download.csdn.net/download/u011877155/10765746
4、启动nginx【运行文件中的exe文件,运行一闪之后任务管理器查看nginx.exe进程存在即可】
4、验证是否配置成功:cmd 输入ffmpeg 提示一大段话即可
4、cmd中输入
ffmpeg -i "rtsp://admin:[email protected]:554//cam/realmonitor?channel=1&subtype=0" -vcodec h264 -f flv -an "rtmp://localhost/live"
回车后控制台持续打印转流信息
5、打开vcl播放器,播放rtmp://localhost/live,看看是否成功
这样转流步骤就完成了,下面集成进java即可
1、设置项目启动自动启动ngix服务,创建线程,项目启动时启动。建议不要集成,直接在服务器启动一次即可
public class nginx extends Thread {
public void run(){
String cmd = "cmd /c c: && cd nginx && start nginx";
//String stop ="cmd /c E: && cd nginx && nginx.exe -s quit";
Runtime run = Runtime.getRuntime();
try {
java.lang.Process process = run.exec(cmd);
InputStream in = process.getInputStream();
System.out.println(cmd);
while (in.read()!=-1){
System.out.println(in.read());
}
in.close();
process.waitFor();
System.out.println("nginx启动成功");
} catch (IOException | InterruptedException e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
new nginx().start();
}
}
2、启动转流代码
附上编写好的工具类https://download.csdn.net/download/u011877155/10765835
在javaweb中直接调用
public static Map maps= new HashMap<>();
public static FFmpegManager manager = new FFmpegManagerImpl();
//启动视频转码
@RequestMapping(value = "/zhuanma")
public void zhuanma(String ip,String code,HttpServletResponse response, HttpServletRequest request){
try {
Map map = new HashMap<>();
map.put("appName",code);//code为客户端编码
map.put("input", "\"rtsp://admin:dsgbridge@"+ip+"/cam/realmonitor?channel=1&subtype=0\"");
map.put("output", "\"rtmp://localhost/live/\"");
map.put("codec", "h264");
map.put("fmt", "flv");
map.put("fps", "25");
map.put("rs", "640x360");
map.put("twoPart", "0");
//执行任务,id就是appName,如果执行失败返回为null
String id=manager.start(map);
// 将转流放入静态map中用于关转流
maps.put(code+ip,id);
// manager.stop(id);
System.out.println(code+ip+"流已开启");
} catch (Exception e) {
e.getStackTrace() ;
}
}
//关闭转流
@RequestMapping(value = "/guanbi")
public void guanbi(String codeip,HttpServletResponse response, HttpServletRequest request){
try {
manager.stop(maps.get(codeip));
System.out.println(codeip+"流已关闭");
} catch (Exception e) {
e.getStackTrace() ;
}
}
后端完成,下面是前端展示
引入js
这是在线的,局域网的话自己百度下载一个
src写入rtmp://localhost/live流即可,code客户端编码可以随意输入,我这了是要区分不同浏览器客户端打开不同ip摄像头的记录,用于关闭对应流,节省资源,记得启用浏览器flash。。。好像flash也要被淘汰,但是目前只能这样
注:暂未将nginx、ffmpeg等文件集成在我提供的jar中,可以将这这2个文件集成到jar,这样只需要一个jar,全部搞定。不过没啥难度,懒得弄了。
下面放上jar的源码。提供大家修改优化。https://download.csdn.net/download/u011877155/10765896