效果图
搭建说明：
大华网络摄像头采用rtsp格式，rtsp格式无法直接显示到web页面上，所以中间要进行实时视频转码。
步骤：
搭建nginx流式服务器
资源见文件分享，解压缩后直接就可进行使用（都已经将环境集成过了）；
文档目录如下
在nginx-1.8.1\conf目录下nginx.conf配置转换后的端口信息
点击此程序启动，若在任务管理器中出现以下情况则启动成功
启动ffmpeg服务器
资源见分享文件；
运行脚本：
ffmpeg -i “rtsp://admin:wsd12345@192.168.1.108:554/cam/realmonitor?channel=1&subtype=1” -vcodec copy -acodec copy -f flv rtmp://localhost:1935/live/home
在此处 admin为摄像头账号 wsd12345为密码 192.168.1.108：554为摄像头ip端口
rtmp://localhost:1935/live/home 为转换后的流地址
1935端口要与nginx中端口配置一致
html代码
4.<!DOCTYPE html><html><head><meta charset="UTF-8"><title>使用video.js实现rtmp流的直播播放</title><!--引入播放器样式--><link href="/5.19/video-js.min.css" rel="stylesheet"><!--引入播放器js--><script src="/5.19/video.min.js"></script><!--<script src="/video.min.js"></script>--><script src="jquery-1.12.4.js"></script></head><body id="aaa"><!--vjs-big-play-centered 播放按钮居中--><!--poster默认的显示界面，就是还没点播放，给你显示的界面--><!--controls 规定浏览器应该为视频提供播放控件--><!--preload="auto" 是否提前加载--><!--autoplay 自动播放--><!--loop=true 自动循环--><!--data-setup='{"example_option":true}' 可以把一些属性写到这个里面来，如data-setup={"autoplay":true}--><video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto"autoplay="autoplay"poster="///v/oceans.png" width="800" height="800" data-setup='{}'><!--src: 规定媒体文件的 URL type:规定媒体资源的类型--><source src='rtmp://127.0.0.1:1935/live/home' type='rtmp/flv'/></video><button id="capture">Capture</button><script type="text/javascript">// 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器videojs.options.flash.swf = '/videojs-swf/5.4.1/video-js.swf';var player = videojs('my-player',{teachOrder:['html5']}); //my-player为页面video元素的idplayer.play(); //播放// 1. 播放 player.play()// 2. 停止 player.pause()// 3. 暂停 player.pause()$("#capture").click(function() {$.get("http://localhost:9999/photo/do",function (request) {console.log(request.datas)var path = request.datas;path = "http://localhost:9999/file/download?fileName=" + path;// console.log(path)window.location.href = path;})});</script></body></html>
后端拍照（截图）代码
/*** @author Cong EnGuang* @date /5/13**/@RestController@RequestMapping("photo")public class PhotoContoller {@GetMapping("/do")public RequestModel downloadFile() throws IOException {//Process child = Runtime.getRuntime().exec("E:\\\\bats\\photo.bat");SimpleDateFormat dateFormat = new SimpleDateFormat("yyyyMMddHHmmss") ; //使用了默认的格式创建了一个日期格式化对象。String fileName = dateFormat.format(new Date())+".jpeg"; //可以把日期转换转指定格式的字符串//执行cmd脚本callCmd("cmd.exe /c E:\\ffmpeg-0512-1cc7e26-win64-static\\bin\\ffmpeg -probesize 32768 -i \"rtmp://localhost:1935/live/home\" -y -t 0.001 -ss 1 -f image2 -r 1 E:/testfile/"+fileName);return new RequestModel("success",fileName);}/*** 执行cmd脚本* @param locationCmd 脚本*/public void callCmd(String locationCmd) {try {System.out.println("in");Process child = Runtime.getRuntime().exec(locationCmd);InputStream in = child.getInputStream();int c;while ((c = in.read()) != -1) {System.out.println((char) c);}in.close();try {child.waitFor();} catch (InterruptedException e) {e.printStackTrace();}System.out.println("done");} catch (IOException e) {e.printStackTrace();}}}
