nginx+ffmpeg实现rtsp视频流转rtmp视频流,并通过video.js在页面上播放

一.下载ffmpeg
百度网盘(链接:https://pan.baidu.com/s/1h4s_gTJCaCfbe-Tw61rirg 提取码:ff11 )
官网下载https://www.ffmpeg.org/并配置,配置完成后,打开命令行,输入ffmpeg,出现这个界面即为成功
在这里插入图片描述
在这里插入图片描述
二.下载具有rtmp的nginx
百度网盘(链接:https://pan.baidu.com/s/1CJasgjtge6VaH9aMA-YVFw 提取码:nn11)
官网下载http://nginx.org/en/download.html,下载成功后解压文件夹,双击nginx.exe,任务管理器出现两个nginx.exe即为成功
在这里插入图片描述
打开nginx文件夹中的config的nginx.conf文件,配置后重启nginx

rtmp {
    server {
        listen 1935;
        application live {
            live on;
        }
        application hls {
            live on;
            hls on;  
            hls_path temp/hls;  
            hls_fragment 8s;  
        }
    }

}http {
    server {
        listen  8088;
        location / {
            root html;
        }
		
        location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }
        location /stat.xsl {
            root html;
        }
        location /hls {  
            #server hls fragments  
            types{  
                application/vnd.apple.mpegurl m3u8;  
                video/mp2t ts;  
            }  
            alias temp/hls;  
            expires -1;
             add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers X-Requested-With;
            add_header Access-Control-Allow-Methods GET,POST,OPTIONS;   
        }  
    }
}

三.准备工作做好,之后就是获取rtsp视频流利用ffmpeg转码,打开命令行,输入

ffmpeg -i  "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov" -vcodec copy -acodec copy -f flv “rtmp://localhost/hls/stream"

出现这个界面即为成功,之后再网页上 打开http://ip地址:8088/hls/stream.m3u8
在这里插入图片描述
四.下载video-js.min.css,video.min.js,videojs-contrib-hls.js
百度网盘(链接:https://pan.baidu.com/s/1KPEg-DbxB0boAlhEFXhXLw 提取码:vv11)

 <video id="player1" width="300" height="200"  class="video-js" controls preload="auto" data-setup=''> 
            <source src="http://IP地址:8088/hls/stream.m3u8"
            type="application/x-mpegURL">
            </video> 
        </div>
<script>
videojs.options.flash.swf = "js/video.min.js/video-js.swf"
    var player1 = videojs('player1', {"autoplay":true});
    player1.play();
</script>
  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值