海康RTSP转flv并实现h5页面播放

1、参考 https://blog.csdn.net/u013769085/article/details/108800323

https://blog.csdn.net/weixin_42396332/article/details/105430015

https://www.jianshu.com/p/d9c66d7d1653

2、ffmpeg转码

ffmpeg.exe -rtsp_transport tcp -buffer_size 4096000 -i "rtsp://admin:123456@192.168.1.2:554/Streaming/Channels/201" -vcodec copy -acodec copy -f flv rtmp://192.168.1.100:1935/myapp/0003

3、使用flv.js插入时，结果报错：Unsupported codec in video frame: 2, 视频帧中不支持的编解码器

改为以下命令（项目中用的摄像头没有音频，所以此处用 -an，不输出音频）

ffmpeg.exe -rtsp_transport tcp -buffer_size 4096000 -i "rtsp://admin:123456@192.168.1.2:554/Streaming/Channels/201" -vcodec copy -an -f flv rtmp://192.168.1.100:1935/myapp/0003

4、播放

<!DOCTYPE html>
<html>
<head><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><title>flv.js demo</title><style>.mainContainer {display: block;width: 1024px;margin-left: auto;margin-right: auto;}.urlInput {display: block;width: 100%;margin-left: auto;margin-right: auto;margin-top: 8px;margin-bottom: 8px;}.centeredVideo {display: block;width: 100%;height: 576px;margin-left: auto;margin-right: auto;margin-bottom: auto;}.controls {display: block;width: 100%;text-align: left;margin-left: auto;margin-right: auto;}</style>
</head>
<body><div class="mainContainer"><video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576" muted>Your browser is too old which doesn't support HTML5 video.</video></div><br><div class="controls"><!--<button onclick="flv_load()">加载</button>--><button onclick="flv_start()">开始</button><button onclick="flv_pause()">暂停</button><button onclick="flv_destroy()">停止</button><input style="width:100px" type="text" name="seekpoint" /><button onclick="flv_seekto()">跳转</button></div><script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script><script>var player = document.getElementById('videoElement');if (flvjs.isSupported()) {var flvPlayer = flvjs.createPlayer({type: 'flv',url: 'http://192.168.1.100:8005/live?port=1935&app=myapp&stream=0003',"isLive": true,//<====加个这个 hasAudio: false,hasVideo: true,//withCredentials: false,//cors: true}, {enableWorker: true,  // 开启多线程enableStashBuffer: false,lazyLoad: false,lazyLoadMaxDuration: 0,lazyLoadRecoverDuration: 0,deferLoadAfterSourceOpen: false,fixAudioTimestampGap: true,autoCleanupSourceBuffer: true,});flvPlayer.attachMediaElement(videoElement);flvPlayer.load(); //加载flv_start();}function flv_start() {player.play();}function flv_pause() {player.pause();}function flv_destroy() {player.pause();player.unload();player.detachMediaElement();player.destroy();player = null;}function flv_seekto() {player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);}</script>
</body>
</html>

5、效果

6、需要下载nginx-1.19.3-http-flv.zip，下载地址：https://download.csdn.net/download/codebooks/12793877

7、配置Nginx

rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp;rtmp {out_queue           4096;out_cork            8;max_streams         128;timeout             15s;drop_idle_publisher 15s;log_interval 5s; #log模块在access.log中记录日志的间隔时间，对调试非常有用log_size     1m; #log模块用来记录日志的缓冲区大小server {listen 1935;# server_name www.test.*;  #当模块中，只有一个server时，可以不配置server_name，nginx对于请求，当找不到匹配的server_name时，会默认发给第一个server进行处理。application myapp {live on;gop_cache on; #打开GOP缓存，减少首屏等待时间}application hls {live on;hls on;hls_path D:/TOOLS/nginx/Nginx_FLV/nginx-1.19.3/html/hls;}#application hls { #增加hls 协议支持#    live on; #开启实时# hls on; #开启hls# hls_path D:/TOOLS/nginx/Nginx_FLV/ginx-1.19.3/html/hls; #切片存放位置#    hls_fragment 1s; #每个TS文件包含1秒的视频内容#  hls_playlist_length 3s; #HLS播放列表长度。 默认为30秒#}application dash {live on;dash on;dash_path D:/TOOLS/nginx/Nginx_FLV/nginx-1.19.3/html/dash;}}
}

海康RTSP转flv并实现h5页面播放相关推荐

使用JavaCV实现海康rtsp转rtmp实现无插件web端直播（无需转码，低资源消耗）
使用JavaCV实现海康rtsp转rtmp实现无插件web端直播(无需转码,低资源消耗) 目录结构添加依赖,编写配置文件创建Bean 创建缓存Cache 修改启动类拉流.推流.转封装定时任务T ...
使用微信API实现H5页面播放音频文件
之前在处理H5页面播放音频文件的时候,总是需要搞一个https才能正常播放,一次无意浏览到了一个自动播放音频的页面,发现了使用微信Api可以不使用https也能播放音频文件.作为记录,简单页面实现如下 ...
网页播放rtsp视频解决方案（unity webplayer页面播放遮挡问题解决方案）
1.vlc activeX播放安装vlc-2.2.8.0.exe,勾选ActiveX插件,使用插件播放rtsp视频: 在unity webplayer页面播放有遮挡问题,解决方案如下: <di ...
海康RTSP流转RTMP并推送至Web端展示
最近帮着老师做项目的时候碰到一个难题,将海康摄像头的影像实时传输到前端页面进行展示.Google查了两天,终于有些眉目,记录一下经验. 大致需要经过以下几个步骤: 获取海康摄像头的视频流(基于RTSP ...
大华、海康rtsp视频流格式
一.海康威视热眼警戒摄像机DS-2TD1217-3/PA 型号 1号与2号摄像头(Camera 01.Camera 02) 方法一.只能读取1号摄像头 rtsp://admin:密码@192.168. ...
用vlc插件在页面上播放海康rtsp推流监控
原文链接:https://blog.csdn.net/weixin_43948724/article/details/104422825 vlc插件目前只能在360.搜狗等可以开启兼容模式下的浏览器使 ...
海康Ehome协议接入EasyCVR视频融合平台播放视频失败的排查与解决
EasyCVR视频融合平台的视频能力非常灵活,尤其是在接入协议上,不仅能支持主流的标准协议,如国标GB/T28181.RTSP/Onvif.RTMP等,还可以支持厂家的私有协议,包括海康Ehome.海 ...
解决海康视频插件错位以及点击页面出现闪烁的情况
此问题在我不屑的探索中终于摸清楚了!! 首先博主的问题是由于多页面造成的,比如layadmin框架,海康视频插件错位的原因是因为主页面中嵌入的子页面都是以iframe的方式,我大胆的猜测海康视频是单页 ...
H5页面播放M4a音频文件
业务场景: 手机app端录音,然后上传至后台服务器,前端从后台服务器获取录音,在PC端WEB页面播放. 实际问题: 首先app录音文件默认是m4a格式,而在PC端WEB H5页面,<audio& ...

海康RTSP转flv并实现h5页面播放

海康RTSP转flv并实现h5页面播放相关推荐

最新文章

热门文章