web接入大华摄像头实时视频

目录

一、FFmpeg下载及配置​​​​

二、nginx下载及配置

三、摄像rtsp取流

四、ffmpeg推流

五、html前端工作

---

一、FFmpeg下载及配置
​​​​

地址：Download FFmpeg

  

下载并解压FFmpeg文件夹，配置环境变量：在“Path”变量原有变量值内容上加上d:\ffmpeg\bin，验证：ffmpeg -version 出现版本号则成功。

二、nginx下载及配置

这个我之前有，网上应该也能搜到。1、nginx\conf\nginx.conf中确保以下配置：

http {include              mime.types;default_type         application/octet-stream;sendfile             on;keepalive_timeout    65;access_log           off;server {listen       20000;server_name  localhost;location / {root   html;index  index.html index.htm;}location /hls { types{  application/vnd.apple.mpegurl m3u8;  video/mp2t ts;  }  root html;  add_header Cache-Control no-cache;add_header Access-Control-Allow-Origin *;}  

2、在nginx\conf\mime.types中
新增：

application/x-mpegURL                     m3u8; 
application/vnd.apple.mpegurl             m3u8;
video/mp2t                                ts;

三、摄像rtsp取流

大华取流格式：

rtsp://username:password@127.0.0.1:554/cam/realmonitor？channel=1&subtype=0

其中：

username：用户名。例如：admin

password：密码。例如：admin

ip：为设备ip。例如：127.0.0.1

port：端口号默认为554

channel：通道号，起始值为1。

subtype：码流类型，主码流为0，辅码流为1。

浏览器输入取流地址，可以查看实时视频说明取流地址正确。

四、ffmpeg推流

cmd命令行中执行

ffmpeg -rtsp_transport tcp -i "rtsp://admin:admin@127.0.0.1:554/cam/realmonitor?channel=1&subtype=1" -c copy -f hls -hls_time 2.0 -hls_list_size 2 -hls_flags 2 D:\nginx\nginx-1.18.0\html\hls\test.m3u8

-hls_time 、-hls_size等参数可百度，这里-hls_wrap 参数无法使用（这里的笑bug还未解决），只能用-hls_flags 替代-hls_warp。

用户名、密码、ip填入你的参数，这里为了流畅选用辅码流（subtype=1）

视频文件保存至nginx文件下的html文件里即可。

 

五、html前端工作

播放m3u8格式视频需要video.js支持

<link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/8.0.4/video.min.js"></script><video id="box" class="video-js vjs-default-skin" controls preload="auto" data-setup='{}'><source src="http://127.0.0.1:20000/hls/test.m3u8" type="application/x-mpegURL" /></video>

 

 文章参考：

https://leftfist.blog.csdn.net/article/details/86699371

ffmpeg+nginx+video实现rtsp流转hls流，通过H5查看监控视频_kunzai6的博客-CSDN博客