摄像头（海康、大华）视频流推送html展示

html展示摄像头视频有两个实现了两个方案

方案一：

摄像头rtsp流转rtmp流，这个方式就是flv的一些浏览器不再支持flash插件

第一步：安装nginx(不会的自行百度进行安装)，配置如截图所示

 

代码：rtmp{

server{

listen 1935;

application live{

live on;

record off;

}

application hls{

live on;

hls on;

hls_path nginx-rtmp-module/hls;

hls_cleanup off;

}

}

}

 

配置好nginx后，在nginx目录shift+右键在此处打开cmd 执行 start nginx.exe 启动 nginx

如果需要修改nginx配置，需要执行nginx -s reload 命令

 

启动后会在进程里面看到

 

 

 

第二步：安装ffmpeg插件，下载地址https://www.ffmpeg.org/download.html 这个是windows版本

下载好后解压，配置环境变量（将解压后的bin目录配置到环境变量中 path添加bin目录）

cmd 执行输入ffmpeg，如果显示

表示安装成功

前面两步就是准备环境

第三步：rtsp流转换

cmd 启动nginx，执行

ffmpeg -i "rtsp://admin:zy87117857@168.168.190.242:554/h264/ch1/main/av_stream" -vcodec copy -acodec copy -f flv rtmp://localhost:1935/live/

参数含义

ffmpeg -i 指令

"rtsp://admin:zy87117857@168.168.190.242:554/h264/ch1/main/av_stream" 摄像头流路径

rtmp://localhost:1935/live/ 推送到nginx配置的服务里

转换为rtmp后还不能直接在html引用，还需要把rtmp推送到html中

再打开一个cmd窗口，执行

start ffmpeg -re -i "rtmp://localhost:1935/live" -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -acodec copy -f flv rtmp://localhost:1935/hls/mystream -loglevel quiet

 

其中rtmp://localhost:1935/hls/mystream，最后一个mystream可以随意指定

此时html就能访问这个流了，地址是rtmp://localhost:1935/hls/mystream，

第四步：html准备

html需要引入video.js 插件

，因为是flv所以还需要加载videojs-flash.js

，样式文件

引入这些后 html 中使用video标签就能访问视频流了

<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080" height="708" data-setup='{}'>

<source id="source" src="rtmp://localhost:1935/hls/mystream" type="rtmp/flv" />

</video>

方案二：

摄像头rtsp流转m3u8格式的瓦片文件，此方式是html5的实现

第一步和第二步和上面一样，安装ffmpeg和nginx，在nginx中添加配置信息：

 

 

代码：location /hls {

types{

#application/vnd.apple.mpegurl m3u8;

application/x-mpegURL;

video/mp2t ts;

}

root html;

}

需要注意的是利用nginx后有个跨域问题，所以需要在根访问节点配置如下截图内容

 

 

代码：

add_header Access-Control-Allow-Origin *;

add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';

add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

 

启动nginx，执行 start nginx.exe，再执行

ffmpeg -i rtsp://admin:zy87117857@168.168.190.242:554/h264/ch1/main/av_stream -fflags flush_packets -max_delay 1 -an -flags -global_header -hls_time 1 -hls_list_size 3 -hls_wrap 3 -vcodec copy -y "F:\cch\DTX\nginx 1.7.11.3 Gryphon\html\channel101.m3u8"

 

因为nginx服务我是把根目录作为接收瓦片信息

且是http请求，所有需要在跟目录处添加跨域信息，访问时 直接 localhost:80/文件名,如：http://localhost:80/channel101.m3u8，里面的ts文件是瓦片

 

 

 

服务搭建好了，下面准备html

在html中需要引入video.js和videojs-contrib-hls.js

，后者是解析m3u8用的。

<video autoplay webkit-playsinline controls> <source src="http://localhost:80/channel101.m3u8" type="application/vnd.apple.mpegurl" /> </video>

 

效果：

 

左边是集成到cesium中的，右边是html中

 

使用第一个方案无法把视频集成到cesium中，第二个可以。

 

第一次写博客，欢迎各路大神指正