ffmpeg+nginx反向代理实现海康摄像头在谷歌浏览器上预览

最新推荐文章于 2023-12-14 17:46:10 发布

丸子小章鱼

最新推荐文章于 2023-12-14 17:46:10 发布

阅读量2.5k

点赞数 1

文章标签： nginx rtmp ffmpeg

本文链接：https://blog.csdn.net/ran11121/article/details/108382134

版权

有个项目用到摄像头预览，之前摄像头的实现都是针对海康的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