内网web页面集成海康威视网络摄像头 |
您所在的位置:网站首页 › 海康威视网络 › 内网web页面集成海康威视网络摄像头 |
需求:公司内网的交换机(非海康威视平台),直接用网线将摄像头接入进来,然后将监控的画面实时的显示在内网web页面上。 海康威视开放平台音视频集成标准协议对接 https://open.hikvision.com/docs/docId?productId=612781c8ec4acb28e0e1c0c3&curNodeId=2e231666a7854dc4a2dc29b9ed06782a#a26e0c06 看上去RTSP的功能最多,所以我就先用这个 根据文档中的开发指南,我就先下载rtsp协议取流的开源套件libvlc https://www.videolan.org/vlc/libvlc.html 打开这个页面就慌了,完全看不懂了,因为也没有接触过这类东西,然后我先Google翻译下看看啥意思,没有太懂,我就先下载了一个播放器看看能不能显示我的监控画面,然后在看看怎么继续开发吧 VLC安装成功 如果播放我的监控画面呢,继续上网搜索,慢慢的一步步的来吧 媒体->打开网络串流 输入监控ip地址 输入网络URL 3.输入网络摄像头的账号密码 4.成功啦 然而呢,并没有什么软用啊,我要在网页中显示监控 又在网上搜索了半天发现高版本Google浏览器不支持RTSP,所以在分析一下选择哪个协议 Http-flv不支持IE HLS 延迟高 RTMP需要使用Flash 所以我选择Http-flv看看,不支持IE就不用IE,影响不大 继续继续,查看文档中的http-flv开发指南 下载地址:https://github.com/bilibili/flv.js 我发现居然是B站开源的666666 我一看还要安装npm,好吧,下载node:https://nodejs.org/zh-cn/ node的安装就不多说了 安装成功! 第二天继续战斗 下载后,安装 打开官方的demo,打不开报了很多错误 一个个的解决 首先这个flv格式的视频文件是不存在,我找个flv视频文件,w3school有个mp4 的小视频 https://www.w3school.com.cn/i/movie.mp4 将其转化为flv的格式的文件,网上有找了个flv https://convertio.co/zh/video-converter/ 换成新的视频文件路径和名称 然后再刷新一下页面看看会不会报错了,果然,没有这么的容易,继续报错 [TransmuxingController] > DemuxException: type = CodecUnsupported, info = Flv: Unsupported codec in video frame 这个问题,我是真的搜索了很久,才找了解决的方法,在这个开源项目的issues下找到的,直接给你们贴个地址 https://github.com/Bilibili/flv.js/issues/65 仅支持H264+AAC,也就说你在视频转flv格式的时候呢,要将编解码器选一下,选择H264的 转格式的时候点击这个设置 选择H264 再次刷新页面就加载成功了 成功加载。。。 我是要实时显示监控画面,看了下海康的文档,好像也没有什么解决方法,上面都要对接什么安全平台,然后就在想VLC不是可以播放RTSP呢吗,我能不能有什么办法,将rtsp转成flv的不就可以播放了吗,上网搜索,看了很多,大多数的解决方案是nginx+ffmpeg,真的是越搞越复杂了 1、Windows 安装nginxhttps://nginx.org/en/download.html 直接下载,因为我电脑上装过apache,所以我要改个端口 修改nginx.conf配置文件 改端口 看到这个页面就可以了 2、windows安装ffmpeg下载地址:https://github.com/BtbN/FFmpeg-Builds/releases(网络有点慢) 选择合适的版本 Windows我就选的这个 下载好,直接就可以使用了,可以加个环境变量,方便一点 查看版本 ffmpeg -version 在命令模式下播放一下摄像头rtsp数据看下 命令:ffplay rtsp://账号:密码@IP地址:554/h264/ch1/main/av_stream 打开了 打开了,但是并不是在网页中显示的,需要在网页中显示需要将数据推到nginx上去,继续搜索,结果是还要安装nginx-http-flv-module,关键是我是Windows系统,要编译这个模块,真的好麻烦,出了一个坑,又掉进了另一个更大的坑。 先看下官方的构建nginx的文档,把该下载的工具先下载下来 官方文档:https://nginx.org/en/docs/howto_build_on_win32.html visualstudio:https://visualstudio.microsoft.com/zh-hans/downloads/ msys2(windows 软件分发与构建平台):https://www.msys2.org/ openssl:http://distfiles.macports.org/openssl/ zlib:http://zlib.net/ pcre:https://github.com/PhilipHazel/pcre2/releases nginx-http-flv-module:https://github.com/winshining/nginx-http-flv-module nginx:http://hg.nginx.org/nginx 找到合适的版本下载 根据官方文档一步步的来 auto/configure \ --with-cc=cl \ --with-debug \ --prefix= \ --conf-path=conf/nginx.conf \ --pid-path=logs/nginx.pid \ --http-log-path=logs/access.log \ --error-log-path=logs/error.log \ --sbin-path=nginx.exe \ --http-client-body-temp-path=temp/client_body_temp \ --http-proxy-temp-path=temp/proxy_temp \ --http-fastcgi-temp-path=temp/fastcgi_temp \ --http-scgi-temp-path=temp/scgi_temp \ --http-uwsgi-temp-path=temp/uwsgi_temp \ --with-cc-opt=-DFD_SETSIZE=1024 \ --with-pcre=objs/lib/pcre-8.44 \ --with-zlib=objs/lib/zlib-1.2.11 \ --with-openssl=objs/lib/openssl-1.1.1l \ --with-openssl-opt=no-asm \ --with-http_ssl_module 注意这里的要和你下载的一致 使用VS命令行执行下面的命令 nmake -f objs/Makefile 报错: This perl implementation doesn't produce Windows like paths (with backward slash directory separators). Please use an implementation that matches your building platform. 不要使用msys2自带的perl,重新下载并配置正确的环境变量 perl下载地址:https://strawberryperl.com/ 成功了 把这个复制出来就可以用了 nginx的环境变量重新配置一下,因为之前安装过nginx,改端口等等,回到原点了。 下面配置nginx rtmp { server { listen 1935; application live { live on; } application hls { live on; hls on; hls_path temp/hls; hls_fragment 8s; } } }使用命令:ffmpeg -i "rtsp://账号:密码@192.168.1.64:554/ch1/sub/av_stream" -vcodec h264 -f flv -an "rtmp://localhost:1935/live/1000" 成功 VLC打开:http://localhost:8080/live?port=1935&app=live&stream=1000 没有问题, 然后就可以使用flv.js 访问了 但是延迟说实话真的是有点高,5s以上,需要优化一下,大家有什么优化的思路,可以留言讨论一下,谢谢! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |