项目需求要看摄像头实时画面谷歌浏览器不支持RTSP流直接展示

因为开发一般用的都是谷歌浏览器但是谷歌浏览器不支持rtsp流直接转化视频，就靠着网上的博文一直尝试最终总结了一套流程自学

方案一通过Java+nginx+rtsp转rtmp流

直接进入主题，第一次尝试通过Javacv + nginx-moudle-temp (下边放地址) 直接转rtmp流
原文地址原文地址

因为nginx+rtmpMoudles需要编译我把地址放到云上下载解压双击nginx.exe就能使用配置无需修改

所需依赖

 <!-- javacv1.5.1 --><dependency><groupId>org.bytedeco</groupId><artifactId>javacv</artifactId><version>1.5.1</version></dependency><dependency><groupId>org.bytedeco</groupId><artifactId>ffmpeg-platform</artifactId><version>4.1.3-1.5.1</version></dependency>

Java代码如下：

 /**** @param  rtmpPath 推流地址 rtmp://127.0.0.1:1935/live/(这个地方写不写都行自己琢磨吧)*         rtspPath rtsp流地址*         audioRecord 是否录制  0= 不录制 1=录制*         saveVideo  是否保存视频* @return*/public static void test(String rtmpPath,String rtspPath,int audioRecord,boolean saveVideo ) throws Exception  {//FrameGrabber grabber = FrameGrabber.createDefault(0); // 本机摄像头 默认// 使用rtsp的时候需要使用 FFmpegFrameGrabber，不能再用 FrameGrabberint width = 640,height = 480;FFmpegFrameGrabber grabber = FFmpegFrameGrabber.createDefault(rtspPath);grabber.setOption("rtsp_transport", "tcp"); // 使用tcp的方式，不然会丢包很严重// 一直报错的原因！！！就是因为是 2560 * 1440的太大了。。grabber.setImageWidth(width);grabber.setImageHeight(height);System.out.println("grabber start");grabber.start();//FrameRecorder recorder = FrameRecorder.createDefault(rtmpPath, 640,480,0);// 流媒体输出地址，分辨率（长，高），是否录制音频（0:不录制/1:录制）FFmpegFrameRecorder recorder = new FFmpegFrameRecorder(rtmpPath, width, height, audioRecord);recorder.setInterleaved(true);recorder.setVideoOption("crf","28");recorder.setVideoCodec(avcodec.AV_CODEC_ID_H264); // 28recorder.setFormat("flv"); // rtmp的类型recorder.setFrameRate(25);recorder.setPixelFormat(0); // yuv420pSystem.out.println("recorder start");recorder.start();//OpenCVFrameConverter.ToIplImage conveter = new OpenCVFrameConverter.ToIplImage();System.out.println("all start!!");int count = 0;while(!exit){count++;Frame frame = grabber.grabImage();if(frame == null){continue;}if(count % 100 == 0){System.out.println("count="+count);}recorder.record(frame);}grabber.stop();grabber.release();recorder.stop();recorder.release();}

因为这个方案转出来的流是rtmp 这个流需要配合flash使用在2020年年底
谷歌就停止了对flash的支持所以这个方案被pass
代码亲测可用因为不是通过中间件转流是通过 Java封装的FFmpeg转的所以延迟测试在19秒左右

方案二通过Java+ Nginx-http-flv-module + FFmpeg + Flv.js 实现rtsp转flv在vue项目中（采用）

因为在第一个方案中rtmp流在谷歌浏览器中无法播放所以改变方案

部署所需的软件 FFmpeg在官网上下载配置下环境变量就行了如下图就是配置成功
部署 Nginx-http-flv-module这是源码地址自己编译一下就好了启动之后配置下配置文件
编译好的nginx 这里边最低C币好像会自动累加先到先得吧解压启动就能用
以我的为例：
这个在http server下边这个是flv的配置获取到rtmp之后转为flv

 location /flv {flv_live on;chunked_transfer_encoding on;add_header 'Access-Control-Allow-Credentials' 'true'; #add additional HTTP headeradd_header 'Access-Control-Allow-Origin' '*'; #add additional HTTP headeradd_header Access-Control-Allow-Headers X-Requested-With;add_header Access-Control-Allow-Methods GET,POST,OPTIONS;add_header 'Cache-Control' 'no-cache';}location /hls {      add_header Access-Control-Allow-Origin *;types{    application/vnd.apple.mpegurl m3u8;    video/mp2t ts;    }    alias /test;    expires -1;    }location /stat {rtmp_stat all;rtmp_stat_stylesheet stat.xsl;}location /stat.xsl {root html/nginx-http-flv-module/;}location /control {rtmp_control all;}location /rtmp-publisher {root html/nginx-http-flv-module/test;}

这个在外边因为是通过rtsp转rtmp


rtmp {  server {  listen 1935;  chunk_size 4000;  application hls { live on;hls on;hls_path /test;hls_fragment 1s;}  }
}

3.配置完成之后跟第一个方案一样测试安装好没有双击nginx.exe 看下后台进程如果有nginx 呢就是正常启动如果没有看下log里边的报错信息我的没有出问题
4.通过Java拼接FFmpeg命令将rtsp通过FFmpeg转为rtmp 推流到nginx 。FFmpeg命令自行百度
代码：

 /*** 推送到nginx的流地址按照自己配置的信息进行拼接不是固定的* @param  nginxRtmpUrl 推流地址 rtmp://127.0.0.1:1935/hls/rtmpStream*         rtspUrl rtsp流地址 * @return*/public static Integer pushVideoAsRTSP(String rtspUrl, String nginxRtmpUrl) {int flag = -1;try {String command = "ffmpeg ";command += " -re -rtsp_transport tcp -i " + rtspUrl;command += " -f flv -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 800x600 -q 10 " + 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;}

5.运行这个方法之后会出现可以通过vlc进行测试rtmp流地址如果rtmp能显示画面往下进行测试自行拼接flv地址 地址按照上边nginx配置文件进行配置

http://127.0.0.1:18080/flv?app=hls&stream=rtmpStream

6.web端通过vue实现
安装flv.js

npm install --save flv.js

全局引用的话放到main.js
我没有全局引用直接上vue全部代码

 <video id="videoElement" controls autoplay muted width="800px" height="400px"></video>

import flvjs from "flv.js"export default {data() {return {flvPlayer: null}},mounted() {if (flvjs.isSupported()) {var videoElement = document.getElementById('videoElement');this.flvPlayer = flvjs.createPlayer({type: 'flv',isLive: true,hasAudio: false,url: 'http://127.0.0.1:18080/flv?app=hls&stream=rtmpStream'});this.flvPlayer.attachMediaElement(videoElement);this.flvPlayer.load();this.flvPlayer.play();}}}

flv测试用的demo

<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://127.0.0.1:18080/flv?app=hls&stream=rtmpStream'});flvPlayer.attachMediaElement(videoElement);flvPlayer.load();}</script></body>
</html>

延迟刷新之后七秒但是web端不稳定延迟会越来越大

推流时间一小时二十分钟流还是很稳定 vlc 延迟一直稳定在十秒左右

上边有些代码是从网上找到我也忘了出处在哪侵删
这些方法延迟比较高如果对延迟有比较严格的我觉得可以研究下vlc在软硬件上边下手可能会比较好点

华为海康大华摄像头编译RTSP转RTMP和HTTPFLV相关推荐

音视频开发:大华摄像头配置RTSP与RTMP地址访问视频画面
一.大华摄像头的RTSP地址格式 rtsp地址格式: rtsp://username:password@ip:port/cam/realmonitor?channel=1&subtype=0 ...
海康|大华网络摄像机RTSP URL格式组成及参数配置
经常有开发者咨询我们关于海康.大华网络摄像机RTSP url拼接规则和相关参数配置,虽然很简单,考虑到资料不全,写个博客记录下: 1. 海康摄像机: 在IE浏览器输入网络摄像机的IP地址,输入配置的用 ...
【Java+前端】前端调用大华摄像头，rtsp转rtmp
效果图搭建说明: 大华网络摄像头采用rtsp格式,rtsp格式无法直接显示到web页面上,所以中间要进行实时视频转码. 步骤: 搭建nginx流式服务器资源见文件分享,解压缩后直接就可进行使用(都 ...
如何解决海康大华摄像头接入国标GB28181协议视频平台EasyGBS播放视频流，出现多个播放器的问题？
我们在前段时间更新了支持国标GB28181协议的视频平台EasyGBS,有很多用户都已经更新使用了,并且反响都比较好,新增的视频调阅功能满足了大部分人对直播界面直观显示的需求,所以我们仍在不断进行新的 ...
海康大华摄像头接入国标流媒体平台显示设备离线问题解决
发展目标 GB28181协议是由公安部牵头实现的安防行业统一的设备接入.流媒体传输的协议. 国标流媒体解决方案是专门用于接入国标设备的视频解决方案,不但从设备接入层面上,接入了内网或者公网的国标设备, ...
安防RTSP协议摄像头实现WEB端无插件直播流媒体服务EasyNVR实现海康大华宇视摄像头网页播放的方法
背景分析:微信直播的兴起进入移动互联网时代以来,企业微信公众号已成为除官网以外非常重要的宣传渠道,当3.2亿直播用户与9亿微信用户的势能累加,在微信上开启直播已成为越来越多企业的必然选择. Easy ...
RTSP安防网络摄像头/海康大华硬盘录像机网页无插件直播方案EasyNVR出现操作和画面显示不一致问题如何优化？
诞生背景众所周知,EasyNVR可以将局域网/广域网上的海康/大华等网络摄像头由rtsp转换为rtmp.rtsp.hls.flv协议转换,并提供推流服务,可以将拉到的网络摄像头直接转发到流媒体服务器 ...
RTSP安防网络摄像头/海康大华硬盘录像机/NVR网页无插件低延时播放流媒体服务器EasyNVR页面显示网络请求失败问题
进入移动互联网时代以来,企业微信公众号已成为除官网以外非常重要的宣传渠道,当3.2亿直播用户与9亿微信用户的势能累加,在微信上开启直播已成为越来越多企业的必然选择. 青犀团队研发的EasyNVR核心在 ...
LiveGBS流媒体平台GB/T28181功能-摄像头报警告警预案触发图片截取视频录制海康大华华为宇视等摄像头报警触发截图录像
LiveGBS摄像头报警告警预案触发图片截取视频录制海康大华华为宇视等摄像头报警触发截图录像 1.报警信息 1.1.报警查询 1.2.配置开启报警订阅 1.2.1.国标设备编辑 1.2.2.勾选订阅项 ...

华为海康大华摄像头编译RTSP转RTMP和HTTPFLV

华为海康大华摄像头编译RTSP转RTMP和HTTPFLV

项目需求要看摄像头实时画面谷歌浏览器不支持RTSP流直接展示

方案一通过Java+nginx+rtsp转rtmp流

方案二通过Java+ Nginx-http-flv-module + FFmpeg + Flv.js 实现rtsp转flv在vue项目中（采用）

华为海康大华摄像头编译RTSP转RTMP和HTTPFLV相关推荐

最新文章

热门文章

华为海康大华摄像头编译RTSP转RTMP和HTTPFLV

华为海康大华摄像头编译RTSP转RTMP和HTTPFLV

项目需求要看摄像头实时画面谷歌浏览器不支持RTSP流直接展示

方案一 通过Java+nginx+rtsp转rtmp流

方案二 通过Java+ Nginx-http-flv-module + FFmpeg + Flv.js 实现rtsp转flv在vue项目中 （采用）

华为海康大华摄像头编译RTSP转RTMP和HTTPFLV相关推荐

最新文章

热门文章

方案一通过Java+nginx+rtsp转rtmp流

方案二通过Java+ Nginx-http-flv-module + FFmpeg + Flv.js 实现rtsp转flv在vue项目中（采用）