前言：
最近在学直播相关知识点，也看了好多博客，一开始总是拉流没成功，所以做一下笔记，笔记包括参考网上其他博客和自己总结的地方😆

目录

1.简介和工具准备🤪

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。 nginx-rmtp-module是Nginx服务器的流媒体插件。nginx通过rtmp模块提供rtmp服务, ffmpeg推送一个rtmp流到nginx, 然后客户端通过访问nginx来收看实时视频流，这里默认大家对rtmp，hls等协议有了解了，就不做介绍了。
工具：
(1) nginx：
nginx下载地址
版本：nginx 1.7.11.3 Gryphon.zip（网上大家都是用这个）
(2) nginx-rtmp-module :
下载地址：https://github.com/arut/nginx-rtmp-module
(3) ffmpg :
下载地址：https://ffmpeg.org/download.html
(4) vlc播放器
一个很强大的播放器，支持拉流播放视频，我们用来测试拉流
下载地址：https://www.videolan.org/vlc/index.zh_CN.html
(5) rtmp和mp4视频文件:
湖南卫视：rtmp://58.200.131.2:1935/livetv/hunantv（这个支持http连接，不支持tcp连接）

注： 以上文件和配置和测试代码需要得可以直接从我网盘下载🙄
链接：https://pan.baidu.com/s/1XrL1IEMPMSXC0vjNjKpfIQ
提取码：0723
或者csdn下载：
csdn下载

2.工具安装和配置😮

如果要自己动手从头安装配置一篇也可以得哈哈（￣︶￣）↗　
(1) ffmpeg
进入官网，点击 DownLoad后进到这个界面，然后鼠标移动到 windows那个图标，下面有两个文件，随便下载一个，我这里下载的是第一个。
在这里插入图片描述
下载完就直接 解压，我直接丢桌面了，进入bin文件夹，复制文件路径
在这里插入图片描述
然后配置环境变量
找到我的电脑→右击→属性→选择【高级系统设置】–>弹出框中选择【环境变量-】→找到【path】双击→弹出框中选择 【新建】→将复制的bin文件夹的路径粘贴进来点击保存。
在这里插入图片描述
然后打开cmd（windows+R输入cmd），输入“ffmpeg –version”，检查是否配置成功，如果出现如下说明配置成功
在这里插入图片描述
（2）nginx 安装
将下载好的nginx-1.7.11.3-Gryphon 解压，并将nginx-rtmp-module插件解压复制到nginx-1.7.11.3-Gryphon目录中，要注意nginx-rtmp-module名字不要有空格。
在这里插入图片描述

3. nginx配置😥

网上你会看到很多博客说在nginx的conf目录下配置nginx-win-rtmp.conf文件，但是你会发现，根本没有这个文件，这个我们自己创建一个就好，复制一份 nginx-win.conf 文件，并命名为nginx-win-rtmp.conf

在这里插入图片描述
下面开始配置，找个编辑器打开 nginx-win-rtmp.conf ，配置如下
要配置两个地方，一个是新增一个 rtmp 节点配置两种协议， 还有就是 在http server节点下配置 视频跨域处理， 不然在 页面 播放会报跨域问题,具体看注释哈。

#新增一个rtmp节点
rtmp {
    server {
        listen 1935;
        chunk_size 4000;
        #rtmp协议推流
        application live {
             live on;
              record all;
            record_path E:/tmp/rtmp; # 保存路径
             # record_max_size 1K;
             # append current timestamp to each flv
             record_unique on;
            #  # publish only from localhost
            #  allow publish 127.0.0.1;
            #  deny publish all;
 
        }
         # HLS协议流		
       application hls {  
             live on;  
             hls on;  
             hls_path E:/tmp/hls;      # 文件保存路径，需要先创建，不然执行推流会报错
             hls_fragment 5s;             #用来设置每一个块的大小。默认是5秒。只能为整数
             hls_playlist_length 30s;    #设置播放列表的长度，单位是秒，听说设置成3秒延迟低点
             hls_nested on;              #默认是off。打开后的作用是每条流自己有一个文件夹
             hls_cleanup off;            #不清理ts	, on｜off 默认是开着的，是否删除列表中已经没有的媒体块
             #hls_continuous:             #on|off 设置连续模式，是从停止播放的点开始还是直接跳过
			 
       }
	   
    }
}

http server节点配置：

 #修改
         location / {
             root html;
             index  index.html index.htm; 
            add_header Access-Control-Allow-Origin *; # 配置跨域
            add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
         }
         # 这几个原来文件就有的，顺便复制过来了，方便看
		location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }
        location /stat.xsl {
            root nginx-rtmp-module/;
        }
        location /control {
            rtmp_control all;
        }

		location /rtmp-publisher {
             root nginx-rtmp-module/test;
        }
		#加入hls支持
        location /hls {
            types {
                application/vnd.apple.mpegurl m3u8; 
                #或 application/x-mpegURL
                video/mp2t ts;
            }
            alias E:/tmp/hls;  #视频流文件目录(自己创建)
            expires -1;
            add_header Cache-Control no-cache; #跨域支持
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        }

我的完整文件内容( 两个地方标记了 start和end)：
nginx-win-rtmp.conf

#user  nobody;
# multiple workers works !
worker_processes  2;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;

events {
    worker_connections  8192;
    # max value 32768, nginx recycling connections+registry optimization = 
    #   this.value * 20 = max concurrent connections currently tested with one worker
    #   C1000K should be possible depending there is enough ram/cpu power
    # multi_accept on;
}
# 新增 start
rtmp {
    server {
        listen 1935;
        chunk_size 4000;
        #rtmp协议推流
        application live {
             live on;
              record all;
            record_path E:/tmp/rtmp; # 保存路径
            #  record_max_size 1K;
             # append current timestamp to each flv
             record_unique on;
            #  # publish only from localhost
            #  allow publish 127.0.0.1;
            #  deny publish all;
 
        }
         # HLS直播流		
       application hls {  
             live on;  
             hls on;  
             hls_path E:/tmp/hls;
             hls_fragment 1s;             #用来设置每一个块的大小。默认是5秒。只能为整数
             hls_playlist_length 3s;    #设置播放列表的长度，单位是秒
             hls_nested on;              #默认是off。打开后的作用是每条流自己有一个文件夹
             hls_cleanup off;            #不清理ts	, on｜off 默认是开着的，是否删除列表中已经没有的媒体块
             #hls_continuous:             #on|off 设置连续模式，是从停止播放的点开始还是直接跳过
			 
       }
	   
        # hls on;
        # hls_path E:/tmp/hls;
        # hls_fragment 5s;#没有生效
        # hls_playlist_length 30s;
        # hls_nested on; #默认是off。打开后的作用是每条流自己有一个文件夹
        # hls_cleanup off;#不清理ts
	   
    }
}
# 新增end
http {
    #include      /nginx/conf/naxsi_core.rules;
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr:$remote_port - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

#     # loadbalancing PHP
#     upstream myLoadBalancer {
#         server 127.0.0.1:9001 weight=1 fail_timeout=5;
#         server 127.0.0.1:9002 weight=1 fail_timeout=5;
#         server 127.0.0.1:9003 weight=1 fail_timeout=5;
#         server 127.0.0.1:9004 weight=1 fail_timeout=5;
#         server 127.0.0.1:9005 weight=1 fail_timeout=5;
#         server 127.0.0.1:9006 weight=1 fail_timeout=5;
#         server 127.0.0.1:9007 weight=1 fail_timeout=5;
#         server 127.0.0.1:9008 weight=1 fail_timeout=5;
#         server 127.0.0.1:9009 weight=1 fail_timeout=5;
#         server 127.0.0.1:9010 weight=1 fail_timeout=5;
#         least_conn;
#     }

    sendfile        off;
    #tcp_nopush     on;

    server_names_hash_bucket_size 128;

## Start: Timeouts ##
    client_body_timeout   10;
    client_header_timeout 10;
    keepalive_timeout     30;
    send_timeout          10;
    keepalive_requests    10;
## End: Timeouts ##

    #gzip  on;

    server {
        listen       8088; # 端口我改成了 8088, 因为我的80端口被占用了
        server_name  localhost;
         #修改start
         location / {
             root html;
             index  index.html index.htm; 
            add_header Access-Control-Allow-Origin *; # 配置跨域
            add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
         }
		location /stat {
            rtmp_stat all;
            rtmp_stat_stylesheet stat.xsl;
        }
        location /stat.xsl {
            root nginx-rtmp-module/;
        }
        location /control {
            rtmp_control all;
        }

		location /rtmp-publisher {
             root nginx-rtmp-module/test;
        }
		#加入hls支持(这是新增的哈）
        location /hls {
            types {
                application/vnd.apple.mpegurl m3u8; 
                #或 application/x-mpegURL
                video/mp2t ts;
            }
            alias E:/tmp/hls;  #视频流文件目录(自己创建)
            expires -1;
            add_header Cache-Control no-cache; #跨域支持，不然网页播放不了
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
            add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
        }
        #修改end
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000; # single backend process
        #    fastcgi_pass   myLoadBalancer; # or multiple, see example above
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

    # HTTPS server
    #
    #server {
    #    listen       443 ssl spdy;
    #    server_name  localhost;

    #    ssl                  on;
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;
    #    ssl_session_timeout  5m;
    #    ssl_prefer_server_ciphers On;
    #    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    #    ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:ECDH+3DES:RSA+AESGCM:RSA+AES:RSA+3DES:!aNULL:!eNULL:!MD5:!DSS:!EXP:!ADH:!LOW:!MEDIUM;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

4. nginx启动😣

进入nginx目录打开命令行或powershell执行：
启动：nginx -c conf\nginx-win-rtmp.conf
停止：nginx -s stop -c conf\nginx-win-rtmp.conf
重载:nginx -s reload -c conf\nginx-win-rtmp.conf
强制结束:taskkill /fi “imagename eq nginx.EXE” /f

这里要注意，启动要通过cmd启动，我一开始直接在文件夹下通过powershell进入就不行，一度怀疑自己做错了什么~~
cmd进入 nginx-1.7.11.3-Gryphon 文件下，输入nginx -c conf\nginx-win-rtmp.conf启动，然后会一直有个点闪动，就行了，不要关掉哦
在这里插入图片描述
然后在浏览器打开localhost:8088 （端口我配置文件改了，默认80，但是我80 被占用了,所以我换了一个哈)，看到这个首页就代表成功了
在这里插入图片描述

5.测试推流和拉流😁

视频文件推流命令：

//RTMP 协议流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -acodec aac -f flv rtmp://192.168.89.220:1935/live/home
//HLS 协议流
ffmpeg -re -i /Users/gao/Desktop/video/test.mp4 -vcodec libx264 -vprofile baseline -acodec aac -ar 44100 -strict -2 -ac 1 -f flv -q 10 rtmp://192.168.89.220:1935/hls/home

相关命令解释🤔：
/Users/gao/Desktop/video/test.mp4 ------ 是你的视频文件地址
rtmp://192.168.89.220:1935/live(hls)/home -------是推流拉流地址，中间是你的ip

/live/xx和/hls/xx中的live对应配置文件的live和hls名称，当然也可以取其他的名字， 而后面的 xx （这里是home），你自己命名的哦，对于rtmp流， 这个home就是生成的文件名，如home-xxx.flv，对于hls流，对应的是文件夹名，然后这个文件下存放ts和m3u8文件。
对于ffmpeg命令参数，大家要自己去学习了哈，因为我也不是很懂哈哈哈…😂我也要去学

  /live/xx和/hls/xx中的live对应配置文件的live和hls名称 
   #rtmp协议推流
        application live {
        ...
        }
          #HLS协议推流
        application hls {
        ...
        }

举栗子🌰🌰🌰😍

（1）用网络地址测试，就是那个湖南卫视的地址(这是hls协议流,不支持rtmp的tcp连接）

打开cmd，打开vlc播放器，先在cmd输入下面推流命令，把rtmp://127.0.0.1:1935/live/home1拷贝到vlc，然后在cmd 回车执行命令开始推流， vlc点击播放就可以拉流播放了。

ffmpeg -re -i rtmp://58.200.131.2:1935/livetv/hunantv -acodec aac -vcodec libx264 -vprofile baseline  -ar 44100 -ac 1 -f flv  rtmp://127.0.0.1:1935/hls/home1

先复制命令到cmd
在这里插入图片描述
vlc打开方式(这里 hunantv我后面改成了home1，都可以的名字，你们知道就行)：
在这里插入图片描述
回车执行命令后会看到数据变化，然后点击播放，看到播放成功了哈哈哈（有时候拉不下来，且推流成功了（看文件是否存在了），则在vlc多试几次拉流，有时候挺快的，有时候延迟很高）
在这里插入图片描述
生成文件:😳
在这里插入图片描述

（2）测试本地视频😲
hls流测试：
我的视频放在了nginx 1.7.11.3 Gryphon目录下，视频文件名是3.mp4 , 我是随便放的哈哈
打开cmd进入目录， 输入命令和在vlc播放器输入拉流地址 rtmp://192.168.89.220:1935/hls/home

ffmpeg -re -i 3.mp4 -vcodec libx264 -acodec aac -f flv rtmp://192.168.89.220:1935/hls/home```

效果：
在这里插入图片描述
生成的文件：
在这里插入图片描述

rtmp流测试：

ffmpeg -re -i 3.mp4 -vcodec libx264 -acodec aac -f flv rtmp://192.168.89.220:1935/live/home

在这里插入图片描述
效果(有时候视频拉不下来，可以多试一下，不知道为啥，可能网络原因)：
在这里插入图片描述
生成的文件：
在这里插入图片描述
（3）手机播放
你可以把http://192.168.89.220:8088/hls/home1/index.m3u8 复制到手机浏览器，可以直接播放的，其中ip地址，端口，和/hls/xx换成你的就行，端口不改默认80哦。

5.网页播放😏

  • 对于hls生成的m3u8，原生 video标签pc端不支持播放的，但是移动端就可以😂，。pc端可以通过hls.js播放或者用video.js去播放
  • 对于rtmp流，需要浏览器flash支持播放，好像现在浏览器都不支持了，我测试都不行。。但是基于HTTP-FLV协议的可以通过flv.js播放

所以，为了兼容播放，一般需要flv.js结合video.js进行兼容处理比较好，flv.js处理flv格式的，video.js处理m3u8格式🤣

但是哦，我们比较懒，还是想用别人做好的插件播放，那不就爽了嘛 ， 所以这里我也 看过一些，推荐的有 西瓜播放器 或 LivePlayer H5播放器,当然也有其他的播放器，但是我也没有都测试过，有好的欢迎推荐啊啊啊啊啊😭

建议用西瓜，文档讲的好，有flv.js和Hls.js支持等
西瓜文档：西瓜文档地址
liveQing文档：LivePlayer H5播放器
下面是测试代码，直接复制拉流链接进来
说明：
对于西瓜播放器，我这里用了同事封装的组件，但是组件pc端播放用的是rtpm或http-flv协议流，移动用的是hls的m3u8，，大家后面结合后端开发可以用，代码网盘下载看，就不贴了。

<template>
  <div>
    <!-- liveplayer插件测试-->
    <LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>

    <hr />
    <!-- 原生标签测试 -->
    <video controls width="500" height="400" autoplay preload="auto">
      <!-- rtmp写法,但是好像浏览器都不支持flash播放了-->
      <!-- <source src='' type='rtmp://192.168.89.220:1935/live/home'/>  -->
      <source src="http://192.168.89.220:8088/hls/home1/index.m3u8" type="application/x-mpegURL" />
      <!-- hls写法 移动端支持播放，pc不支持原生的-->
      <p class="“warning”">你的臭浏览器不支持播放</p>
    </video>

    <hr />

    <!-- videojs 测试 -->
    <!--pc不支持直接用video标签播放hls, 这里使用video.js，videojs集成了VHS协议，可以播放(浏览器基本都支持)，当然也可以使用其他插件，比如LivePlayer、西瓜播放器都支持播放，但是对于rtmp流的好像不太行，我测试不可以...-->
    <video
      ref="videoPlayer"
      class="video-js vjs-default-skin vjs-big-play-centered"
      style="outline: none"
    ></video>


    <hr/>
    <!-- 西瓜插件 封装了个组件，不过这里没有http-flv流，，有兴趣看一下，网盘有代码 -->
    <xgplayer :playerUrl="playerUrl"></xgplayer>

  </div>
</template>

<script>
import videojs from "video.js";
import "video.js/dist/video-js.css";
import LivePlayer from "@liveqing/liveplayer";
import xgplayer from "./xgindex" // 西瓜封装组件
export default {
  components: {
    LivePlayer,
    xgplayer
  },
  data() {
    return {
      videoUrl: "",
      playerUrl: { // 西瓜播放地址
         m3u8Live: "http://192.168.89.220:8088/hls/home1/index.m3u8",
        rtmpLive: "",
        flvLive: "rtmp://192.168.89.220:8088/live/home", // 这个
        videoUrl: ""
      }
    };
  },
  mounted() {
    this.videoUrl = 'http://192.168.89.220:8088/hls/home1/index.m3u8'

    this.$nextTick(() => {
      this.initVideoPlayer();
    });
  },
  methods: {
    //videojs  初始化播放器方法
    initVideoPlayer() {
      // 第一个选中的要播放的video标签, 记得是video标签,
      const currentInstance = videojs(this.$refs.videoPlayer, {
        autoplay: true, // 是否自动播放
        controls: true // 是否显示控件
      });
      // currentInstance.src({
      //     src: 'http://localhost:18000/flv/hls/1.flv',
      //     type: 'rtmp/flv', // 这个type值必写, 告诉videojs这是一个rtmp流视频
      // })
      currentInstance.src({
        src: "http://192.168.89.220:8088/hls/home1/index.m3u8",
        type: "application/x-mpegURL" // 这个type值必写, 告诉videojs这是一个rtmp流视频
      });
    }
  }
};
</script>

<style>
</style>

效果：

在这里插入图片描述

相关工具🙃：

OBS推流 OBS使用介绍
Open Broadcaster Software（简称OBS）是一款直播流媒体内容制作软件。同时程序和其源代码都是免费的。
支持 OS X、Windows、Linux操作系统。适用于多种直播场景。满足大部分直播行为的操作需求（发布桌面、发布摄像头、麦克风、扬声器等等）。
这个LiveQing有支持和结合使用，我试过，LiveQing提供了免费的流媒体服务器，大家可以去使用看看(＃°Д°)😏在线使用说明

参考链接：🤩

Windows下实现ffmpeg+nginx+rtmp+hls实现直播推流拉流（低延时）

https://blog.csdn.net/u011925282/article/details/102580420?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.control

流媒体服务（一）流媒体服务器搭建 win10+ngnix+rtmp+ffmpg播放rtmp和HLS/m3u8
https://blog.csdn.net/weixin_38420511/article/details/104584648?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.control

HTML5如何实现视频直播功能 https://zhuanlan.zhihu.com/p/146323842
使用flv.js快速搭建html5网页直播 https://zhuanlan.zhihu.com/p/94440420

暂时结束，总结的不清楚的欢迎交流指出哈😅

# html5 # javascript
Logo
即构开发者社区

致力于链接即构和开发者，提供实时互动和元宇宙领域的前沿洞察、技术分享和丰富的开发者活动，共建实时互动世界。

更多推荐

WebSocket实现实时通信

WebSocket 是一种数据通信协议，也是用于客户端和服务端数据通信，类似于我们常见的 http既然有 http，为啥还要 WebSockethttp 通信是单向的请求 + 响应没有请求也就没有响应初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说

avatar 即构开发者社区
cover

【iOS端】基于Uniapp跨平台接入即构RTC+相芯美颜

avatar 即构开发者社区
cover

Android：Uniapp平台中接入即构RTC+相芯美颜

avatar 即构开发者社区