有个项目用到摄像头预览，之前摄像头的实现都是针对海康的sdk实现，需要浏览器安装插件，且仅适用于ie浏览器，查网上资料找到能够使用ffmpeg+nginx反向代理实现。
ffmpeg和nginx都没有自己编译，在网上找的资源下载的。之前没接触过该项内容，走了不少弯路，谨记之
取流地址：
ffmpeg -rtsp_transport tcp -i "rtsp://用户名:密码@ip:端口号/h264/ch1/main/av_stream" -vcodec libx264 -an -acodec copy -f flv "rtmp://nginx服务器地址:端口号/video/room"
h264：摄像头视频编码格式，有H264和H265
-an：在推流时加上 -an 参数,关掉音频流，刚开始因为没加-an，一切都觉得没问题，就是预览不了，浏览器控制台一直报错(anonymous) @ flv-demuxer.js:19213logger.js:32 [e] > DemuxException: type = CodecUnsupported, info = Flv: Unsupported audio codec idx: 7，参考https://www.gitmemory.com/issue/bilibili/flv.js/470/518572689
/video：nginx中设置的rtmp中application的名字
/room: 自定义，和调用时候保持一致即可
先用VLC测试取流地址是否可用
nginx代理
nginx需要编译nginx-http-flv-module，也是直接下载网上编译好的。。
主要配置：
http { include mime.types; default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; server { server_name localhost; listen 19888; location /flv { flv_live on; chunked_transfer_encoding on; add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; }
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; } location / { root html/nginx-http-flv-module/test/www; index index.html index.htm; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }
rtmp { server { listen 11935; chunk_size 4000; application video { live on; } } }
其中mime.types中要把支持的视频格式给加进去
video/3gpp 3gpp 3gp; video/mp2t ts; video/mp4 mp4; video/mpeg mpeg mpg; video/quicktime mov; video/webm webm; video/x-flv flv; video/x-m4v m4v; video/x-mng mng; video/x-ms-asf asx asf; video/x-ms-wmv wmv; video/x-msvideo avi;
之前没加，能推到nginx，就是视频看不了。。
前端展示
可通过http方式和rtmp方式，目前测的remp在360浏览器的video标签中能够使用，在谷歌中不行
remp调用地址：rtmp://nginx服务器地址:端口号/video/room
http调用地址：http://localhost:19888/flv?port=11935&app=video&stream=room
localhost：nginx服务器ip地址
19888：http协议的端口号
flv：nginx的http协议的 location /flv
11935：nginx的rtmp的端口号
video：nginx的rtmp的application的名字
room：自定义，和上面room保持一致
用VLC测试代理地址是否可用
前端html，http调用
<!DOCTYPE html> <html lang="en"> <head> <title>HTML5 直播</title> <!--<script src="./dist/flv.min.js"></script> --> <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/0.0.2/flv.min.js"></script> </head> <body> <video id="videoElement" muted></video> </body> <script> if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://localhost:19888/flv?port=11935&app=video&stream=room' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } </script> </html>前端html，rtmp调用
<!DOCTYPE html> <html lang="en"> <head> <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/5.19/video.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script> </head> <body> <video id="video" controls preload="auto" width="1280" height="720" data-setup="{}"> <source src="rtmp://localhost:11935/video/room" type="rtmp/hlv"> </video> </body> </html>后续需要继续研究云台控制和多个摄像头如何集成项目中
demo下载地址：https://download.csdn.net/download/ran11121/12805117
