java整合海康威视前端实时视频播放(flv.js+nginx)

立即下载用AI写一个

发布时间：2020-06-23

9人 | 浏览：6636次 | 收藏 |

技术：java FFmpeg flv.js

概述

flash将在2020年底被主流浏览器彻底禁用,监控视频播放采用flv.js 该项目包含java整合海康威视、FFmpeg完成抓拍、实时视频播放、视频录制保存

详细

###写在最前：
##### 之前写了一个java整合海康威视实现实时视频播放,抓图,录制视频的帖子
##### [java整合海康威视、FFmpeg完成抓拍、实时视频播放、视频录制保存](http://www.demodashi.com/demo/17109.html "java整合海康威视、FFmpeg完成抓拍、实时视频播放、视频录制保存"), 但是打开chrome浏览器,有一行提示
![](/contentImages/image/20200619/PRZ9bwQaS7HWUrE6JUI.png)
##### 经查发现使用的video.js中因为版本原因(6以前的版本有嵌入flash),可能造成禁用flash后无法播放,所以寻找实时播放PlanB

###一、确定方案：
##### 网上关于将实时视频流输出到前端的方式和技术还是挺多的，最后选择使用FFmpeg + nginx + nginx-http-flv-module + flv.js实现

###二、具体实现：
####1、首先需要对nginx进行编译,重新编译nginx是为了集成nginx-http-flv-module这个模块，在发布rtmp的时候可以转化成支持HTTP方式的FLV。
参考链接:https://blog.csdn.net/qq_22633333/article/details/96288603#comments
下载包中会付上新增的内容(编译过的nginx等)

####2、测试
#####①、配置nginx
##### 在rtmp下加入http

# HTTP服务
    http {
        include       mime.types;
        default_type  application/octet-stream;
    
        #access_log  logs/access.log  main;
    
        server {
            listen       8080; # 监听端口
     
    		location /stat.xsl {
                root html;
            }
    		location /stat {
                rtmp_stat all;
                rtmp_stat_stylesheet stat.xsl;
            }
    		location / {
                root html;
            }
    		
    		location /rtmpLive {
    			flv_live on;
    			chunked_transfer_encoding  on; #open 'Transfer-Encoding: chunked' response
    			add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP header
    			add_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP header
    			add_header Access-Control-Allow-Headers X-Requested-With;
    			add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
    			add_header 'Cache-Control' 'no-cache';
    		}
        }
    }

#####②、打开nginx
![](/contentImages/image/20200619/L374T2865vNAzIRouuz.png)

#####③、测试代码

import java.io.BufferedReader;
    import java.io.InputStreamReader;
    
    public class RtspPlayDemo{
    
        public static void main(String[] args){
            RtspPlayDemo convertVideoPakcet = new RtspPlayDemo();
    
            String name = "admin";
            String password = "xxx";
            String ip = "192.168.1.65";
            String channelNumberStr = "ch1";
    
    
            // rtsp地址
            String rtspUrl = "rtsp://"+name+":"+password+"@" + ip + "/mpeg4/"+channelNumberStr+"/sub/av_stream";
            // Nginx rtmp地址
            // 1935 对应Nginx配置文件中rtmp所监听的端口
            // live 对应Nginx配置文件中rtmp下application的值
            // rtmpStream 对应播放页面中16行参数stream的值
            String nginxRtmpUrl = "rtmp://localhost:1935/live/rtmpStream";
    
            convertVideoPakcet.pushVideoAsRTSP(rtspUrl, nginxRtmpUrl);
        }
    
        public Integer pushVideoAsRTSP(String rtspUrl, String nginxRtmpUrl){
            int flag = -1;
            try {
                // ffmpeg 已经在系统环境变量中配置好了
                String command = "ffmpeg ";
                command += " -i \"" + rtspUrl + "\"";
                command += " -vcodec copy -acodec copy -f flv -s 800x600 " + nginxRtmpUrl;
                System.out.println("ffmpeg推流命令：" + command);
    
                Process process = Runtime.getRuntime().exec(command);
                BufferedReader br= new BufferedReader(new InputStreamReader(process.getErrorStream()));
                String line = "";
                while ((line = br.readLine()) != null) {
                    System.out.println("视频推流信息[" + line + "]");
                }
                flag = process.waitFor();
            }catch (Exception e){
                e.printStackTrace();
            }
            return flag;
        }
    }
#####④、编写并打开网页
##### 建一个HTML文件放桌面

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>播放页面</title>
    </head>
    <body>
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
    <video style="height: 400px;width: 600px;" id="videoElement" muted autoplay controls></video>
    <script>
        var flvPlayer = null;
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById('videoElement');
            flvPlayer = flvjs.createPlayer({
                type: 'flv',
                // 8080 对应Nginx监听的端口
                // rtmpLive 对应Nginx的路径
                url: 'http://localhost:8085/rtmpLive?app=live&stream=rtmpStream'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
        }
    </script>
    </body>
    </html>
#####⑤ 直接放浏览器里打开, 启动项目, 顺利的话, 直接就可以看到监控的实时画面
![](/contentImages/image/20200619/T4uuxe2H0JPKX4RrLpC.png)

####3、正式代码-后台逻辑
#####  之前帖子中的逻辑仍然可以复用,manager.start()方法不仅可以执行组装命令,还可以执行流式命令
    String nginxRtmpUrl = "rtmp://localhost:1935/live/rtmpStream";
    return manager.start(appName, CommandBuidlerFactory.createBuidler()
    			.add("ffmpeg")
    			.add("-i",rtsp)
    			.add("-vcodec","copy")
    			.add("-acodec","copy")
    			.add("-f","flv")
    			.add("-s","800x600")
    			.add(nginxRtmpUrl));
##### 这样就可以在后台执行FFmpeg的命令

####2、前端逻辑
##### 前端改造相对简单,引入js
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>

##### ajax回调中写如下内容

$("#video").show();
    var str = '<video style="height: 400px;width: 600px;" id="videoElement" muted autoplay controls></video>';
    $("body").find("#video").append(str);
    console.log(data.rtmpUrl);
    var flvPlayer = null;
    if (flvjs.isSupported()) {
		var videoElement = document.getElementById('videoElement');
		flvPlayer = flvjs.createPlayer({
			type: 'flv',
			// 8080 对应Nginx监听的端口
			// rtmpLive 对应Nginx的路径
			// url: 'http://localhost:8085/rtmpLive?app=live&stream=rtmpStream'
			url: data.rtmpUrl
		});
		flvPlayer.attachMediaElement(videoElement);
		flvPlayer.load();
    }

##### 关闭实时播放
##### video标签没有停止选项,所以选择直接将div下的video标签清空
    var player = document.getElementById("videoElement");
    player.pause();//暂停
    $("#video").empty('');
    alert("结束实时监控!");

###写在最后
##### 将flv.js的播放方式融入项目之后, 原有的功能不变, 实时监控多了一种方式, 均在后台设置了开关,可以选择使用
    #录像控制 1-海康 2-FFmpeg
    videoType: 1
    #前端播放控制 1-video.js 2-flv.js
    playType: 2
##### 下载包中在原有的功能基础上,会付上新增的内容(编译过的nginx等)(另,FFmpeg因为文件过大无法上传,可在官网下载安装后记得添加环境变量), 希望对大家有所帮助

####参考文章：
https://www.cnblogs.com/kawhileonardfans/p/13044468.html

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

java整合海康威视前端实时视频播放(flv.js+nginx)

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子