nginx通过实现rtmp服务及使用flv.js播放

Blueeyedboy521

已于 2023-12-05 16:59:01 修改

阅读量951

点赞数 1

分类专栏：音视频文章标签： nginx javascript 数据库

于 2023-08-29 08:00:00 首次发布

本文链接：https://blog.csdn.net/Blueeyedboy521/article/details/132084638

版权

音视频专栏收录该内容

13 篇文章 5 订阅

订阅专栏

参考

基于Nginx服务FFmpeg-RTMP/HTTP/FLV推拉流使用方法
 使用flv.js实现视频直播

配置文件

worker_processes  10;
events {
    worker_connections  10240;
}
rtmp_auto_push on;
rtmp_auto_push_reconnect 1s;
rtmp_socket_dir /tmp;
rtmp{
	out_queue 4096;
	out_cork 8;
	max_streams 128;
	timeout 15s;
	drop_idle_publisher 15s;
	log_interval 5s;
	log_size 1m;
	server{
	 listen 1935;
	 server_name 192.168.0.43;
	 application live{
		 live on;
		 gop_cache on;
	  }
	 application hls{
	  live on;
	  hls on;
	  hls_path ../html/hls; 
	}
	 application dash{
	   live on;
	   dash on;
	   dash_path ../html/dash;
	 }
	
	}
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8002;
	server_name  localhost;
        location / {
            root   html;
            index  index.html index.htm;
        }
	location /live{
		flv_live on;
		chunked_transfer_encoding  on;
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Credentials' 'true';
	}
	location /flv {
            add_header 'Access-Control-Allow-Origin' '*';
            flv_live on;
            chunked_transfer_encoding on;
        }
	location /hls{
		types {
		application/vnd.apple.mpegurl m3u8;
		video/mp2t ts;
		 }
		 root /usr/local/nginx/html/hls;
		 add_header 'Cache-Control' 'no-cache';
	}
	 location /dash {
            root /usr/local/nginx/html/dash;
            add_header 'Cache-Control' 'no-cache';
        }
	
	 location /stat {
            #configuration of push & pull status
              rtmp_stat all;
              rtmp_stat_stylesheet stat.xsl;
         }
	location /stat.xsl {
	  root /usr/local/nginx/nginx-http-flv-module;
	}

	 location /control {
            rtmp_control all; #configuration of control module of rtmp
        }	
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}

注意：延迟问题
设置gop_cache off;可以去掉缓存，加快速度，延迟从5秒减少到2秒，但是打开播放会卡，播放也不会很流畅

推流测试

推流

# 1、推送本地视频流
ffmpeg -re -i input.mp4 -vcodec copy -f flv -y rtmp://192.168.1.50:1935/camera/test

# 2、循环推送本地视频流
ffmpeg -re -stream_loop -1 -i input.mp4 -vcodec copy -f flv -y rtmp://192.168.1.50:1935/camera/test

# 3、转发外源RTMP流
ffmpeg -re -i rtmp://192.168.1.150:1935/stream/test -vcodec copy -f flv -y c

# 4、录制电脑屏幕
.\ffmpeg -f gdigrab -i desktop -vcodec libx264 -preset:v ultrafast -tune:v zerolatency -f flv "rtmp://192.168.0.44:1935/live/desktop

通过拉流rtsp然后推流到rtmp

.\ffmpeg -i "rtsp://admin:admin@192.168.0.100:8554/live" -vcodec copy -acodec copy -g 60 -r 25 -crf 30 -f flv "rtmp://192.168.0.44:1935/live/home"
# 播放地址
rtmp://192.168.0.44:1935/live/home
http://192.168.0.44:8002/flv?port=1935&app=live&stream=home

flv.js播放

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>flv.js dome</title>
</head>
<body>
    <div class="mainContainer">
        <video id="video" controls autoplay width="1024" height="576"></video>
    </div>
    <br>
    <div >
        <button onclick="flv_start()">开始</button>
        <button onclick="flv_pause()">暂停</button>
        <button onclick="flv_destroy()">停止</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.min.js"></script>
    <script>
        var player = document.getElementById('video');
        if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                "isLive": true,
                url: 'http://192.168.0.44:8002/flv?port=1935&app=live&stream=home',//改为自己服务的地址
            });
            flvPlayer.attachMediaElement(video);
            flvPlayer.load(); //加载
            flv_start();
        }
        function flv_start() {
            player.play();
        }
        function flv_pause() {
            player.pause();
        }
        function flv_destroy() {
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
        }
    </script>
</body>
</html>

常见问题

rtmp推流flv拉流慢

解决RMTP推流, Http-Flv拉流延时高的问题

server {
        listen 1935;
        application live {
            live on;
            gop_cache on; #罪魁祸首就是这货
        }
}

果断改成off. 取消掉缓存. 带来的影响就是第一次连接时加载时间变长,没有秒开的感觉了,废话没有缓存了.

Blueeyedboy521

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
nginx通过实现rtmp服务及使用flv.js播放

设置gop_cache off;可以去掉缓存，加快速度，延迟从5秒减少到2秒，但是打开播放会卡，播放也不会很流畅。//改为自己服务的地址。
复制链接

扫一扫

专栏目录