获取摄像头推流显示在web页面（ffmpeg + nginx + nginx-http-flv-moudle）

最新推荐文章于 2022-09-23 11:48:35 发布

高季左

最新推荐文章于 2022-09-23 11:48:35 发布

阅读量962

点赞数

文章标签： nginx http-flv rtsp

本文链接：https://blog.csdn.net/Henry_rwy/article/details/115721428

版权

由于各大浏览器以停止兼容flash，导致原来的nginx-rtmp-moudle方案不太适合，所以采用nginx-http-flv-moudle + flv.js来实现web的直播流展示

1、安装nginx-http-flv-moudle

环境中我已经安装好了nginx，这里我需要添加一个nginx-http-flv-moudle模块

下载nginx-http-flv-moudle，上传至linux服务器后用unzip 解压到ngignx目录下（whereis nginx 命令可以查询当前nginx的安装目录）

进入nginx的sbin目录执行：

./nginx -V 查看目前的配置

复制--prefix=............................这段配置

在配置后面追加 --add-module=/usr/local/nginx-http-flv-module-master（刚刚解压后的flv模块目录）

导入config

./configure --prefix....................

执行make

复制nginx/obj下的nginx文件到sbin下

2、修改nginx.conf，启动nginx

# HTTP服务
http {
include mime.types;
default_type application/octet-stream;

#access_log logs/access.log main;

server {
listen 8080; # 监听端口

       location /stat.xsl {
root html;
}
       location /stat {
rtmp_stat all;
rtmp_stat_stylesheet stat.xsl;
}
       location / {
root html;
}
       ###############流媒体
location /live {
flv_live on ; # 打开HTTP播放FLV直播流功能
chunked_transfer_encoding on ; # 支持'Transfer-Encoding: chunked'方式回复
add_header 'Access-Control-Allow-Origin' '*'; # 添加额外的HTTP头
add_header 'Access-Control-Allow-Credentials' 'true'; # 添加额外的HTTP头
           expires -1;
}
}
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir logs;
# 添加RTMP服务
rtmp {
out_queue 4096;
out_cork 8;
max_streams 128;
timeout 15s;
drop_idle_publisher 15s;

log_interval 5s; #log模块在access.log中记录日志的间隔时间，对调试非常有用
log_size 1m; #log模块用来记录日志的缓冲区大小

server {
listen 1985; # 监听端口、
application live{
live on ;
           gop_cache on ; #打开GOP缓存，减少首屏等待时间

           ### 保存视频/start
           record video; #记录直播视频
           #record_path html/rec/; #视频保存路径
           #record_path F:/ps/nginx-rtmp/html ; #视频保存路径
           #record_suffix -%d-%b-%y-%T.flv; #视频保存名：日期+.flv# windows下测试时间作为文件名是吧
           #record_suffix -%d-%b-%y-%T.flv; #视频保存名：日期+.flv
           ### 保存视频/end
}
}
}

3、安装ffmpeg

ffmpeg -re -rtsp_transport tcp -i rtsp://用户:密码@ip:端口/h264/ch37/sub/av_stream -f flv -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -s 1280x720 -q 10 -f flv rtmp://ip:1935/live/test

4、用vlc测试流是否正常

http://ip:port/live?port=**&app=**&stream=**

5、页面展示

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style>
           .mainContainer {
       display: block;
       width: 1024px;
       margin-left: auto;
       margin-right: auto;
       }

       .urlInput {
       display: block;
       width: 100%;
       margin-left: auto;
       margin-right: auto;
       margin-top: 8px;
       margin-bottom: 8px;
       }

       .centeredVideo {
       display: block;
       width: 100%;
       height: 576px;
       margin-left: auto;
       margin-right: auto;
       margin-bottom: auto;
       }

       .controls {
       display: block;
       width: 100%;
       text-align: left;
       margin-left: auto;
       margin-right: auto;
       margin-top: 8px;
       margin-bottom: 10px;
       }

       .logcatBox {
       border-color: #CCCCCC;
       font-size: 11px;
       font-family: Menlo, Consolas, monospace;
       display: block;
       width: 100%;
       text-align: left;
       margin-left: auto;
       margin-right: auto;
       }
       </style>
   </head>
   <script src="https://cdn.bootcss.com/flv.js/1.5.0/flv.js"></script>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
   <body>
       <div><input type="text" id='urlId' value="" /> <button type="button" id="butPlay">播放</button></div>
       <div class="mainContainer">
           <video name="videoElement" class="centeredVideo" id="videoElement" controls width="1024" height="576" autoplay='true'>
               Your browser is too old which doesn't support HTML5 video.
           </video>

       </div>
   </body>

   <script>
       console.log('start')
       // alert(flvjs.isSupported())
       if (flvjs.isSupported()) {
           play();

       }
       $("#butPlay").click(function(event){
           play();
       })
       function play(){
           var us = $("#urlId").val();
           console.info(new Date(), us)
           if (!us) {
               us = 'mystream'
           }
           var videoElement = document.getElementById('videoElement');
           var flvPlayer = flvjs.createPlayer({
               type: 'flv',
               enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
               isLive: true, //直播模式
               hasAudio: false, //关闭音频
               hasVideo: true,
               stashInitialSize: 128,
               enableStashBuffer: true, //播放flv时，设置是否启用播放缓存，只在直播起作用。
               url: ' http://127.0.0.1:8080/live?port=1985&app=myapp&stream=mystream'
           });

           flvPlayer.attachMediaElement(videoElement);
           flvPlayer.load();
           flvPlayer.play();
       }
   </script>
</html>

高季左

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
获取摄像头推流显示在web页面（ffmpeg + nginx + nginx-http-flv-moudle）

由于各大浏览器以停止兼容flash，导致原来的nginx-rtmp-moudle方案不太适合，所以采用nginx-http-flv-moudle + flv.js来实现web的直播流展示1、安装nginx-http-flv-moudle环境中我已经安装好了nginx，这里我需要添加一个nginx-http-flv-moudle模块下载nginx-http-flv-moudle，上传至linux服务器后用unzip 解压到ngignx目录下（whereis nginx 命令可以查询当前nginx
复制链接

扫一扫