window 下 ffmpeg+nginx+hls+vue+video.js处理rtmp视频流,保姆式教程

### 接入监控视频：

1. 主要概述：因为摄像头的视频流是通过 rtmp 推流的，直接通过vue3中的播放器(videojs) 播放会因为缺少flash插件无法播放，目前的主流浏览器也基本去flash 化，于是考虑将rtmp 转成hls 流后再进行播放；
  
2. ffmpeg:rtmp 转hls ,可以利用ffmpeg(查资料较多使用的一种)，配置环境变量：在“Path”变量原有变量值内容上加上d:\ffmpeg\bin(根据安装位置)，验证：cmd =>ffmpeg -version 出现版本号则成功

 软件下载地址（百度网盘）
      链接：https://pan.baidu.com/s/1wFxi115-ZP56iSNiwYqoXg 
      提取码：iw5a

3.  Nginx 使用ffmpeg只是得到了hls 流的视频（出现一个.m3u8文件及多个.ts 文件），因为一般不来考虑在本地存储所有的视频文件，一般考虑使用服务器讲得到的视频传递出去，合理设置参数，即使清理本地的文件。

3.1、下载Nginx,版本需求：nginx-1.7.11.3-Gryphon,该版本内置了rtmp 模块，普通的nginx 没有 

 //下载方式
      链接：https://pan.baidu.com/s/1qd0YzKu_dPd0xs4pq0nPsw 
      提取码：6c11

3.2、 配置文件           

解压缩后，打开conf下，添加文件nginx-win-rtmp.conf,添加以下内容：

  #user  nobody;
    worker_processes  1;
    
    #error_log  logs/error.log;
    #error_log  logs/error.log  notice;
    #error_log  logs/error.log  info;
    
    #pid        logs/nginx.pid;
    
    
    events {
        worker_connections  1024;
    }
    
    rtmp{
        server {
            listen 1935;
            chunk_size 4000;
    
            #RTMP
            application live {
                 live on;
    
                 # record first 1K of stream
                 record all;
                 record_path d:/Nginx/tmp/av;
                 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;
    
                 #allow play all;
            }
    
            #HLS
            # For HLS to work please create a directory in tmpfs (/tmp/app here)
            # for the fragments. The directory contents is served via HTTP (see
            # http{} section in config)
            #
            # Incoming stream must be in H264/AAC. For iPhones use baseline H264
            # profile (see ffmpeg example).
            # This example cr