mac实现监控转视屏流在html中展示（ffmpeg+rtsp+rtmp）

在mac上实现监控画面集成到html中展示，网上看大家的技术基本都差不多。选了一条使用做多的办法。

技术方案：ffmpeg将监控的rtsp转换成rtmp，用阿里云的播放器播放m3u8的格式视频。

1、安装nginx，由于之前安装过nginx没有安装rtmp的模块走了不少弯路，最好的办法就是重装一次。如果不安装rtmp的模块，在nginx启动的时候会报错：nginx: [emerg] unknown directive "rtmp"。

1）安装homebrow，这个安装如果有问题基本百度都有解决方案。

2）安装nginx与rtmp模块内容：

brew tap homebrew/nginx

上一步基本都没问题

brew install nginx-full --with-rtmp-module

这一步安装在下载nginx的tar.gz的时候有可能会下载失败，在有一定进度的时候卡住，之后连接失败。重复执行这步就可以了，我是执行了三次才安装成功。

3）安装完nginx之后，测试一下访问：localhost:8080 如果显示nginx的欢迎界面那就可以了。

2、安装ffmpeg，还是基于神器brew安装的。这步基本不会有问题，不过时间比较长。

brew install ffmpeg

安装好在控制台执行ffmpeg看到如下内容代表安装可以了

3、配置nginx的配置文件，加入rtmp的配置信息。

nginx在mac中的默认路径：

vim /usr/local/etc/nginx/nginx.conf

1.在配置文件中增加的最后增加，也就是和nginx里的http并列
rtmp {
    server {
        listen 1999;  #rtmp监听端口
        chunk_size 4000;
        application hls {
            live on;#开启直播，可以直接用VLC软件直接播放，下面会介绍
            hls on;#生成m3u8的视屏分片
            hls_path /Users/hs/develop/hls;#生成的视频切片和3mu8文件的地址
            hls_fragment 5s;#每个切片的大小时间秒。如果延迟较高，后续可以配成1s
            hls_playlist_length 10s;#在m3u8中的列表长度，时间秒。如果如果延迟较高，后续可以配成1s
            hls_cleanup on;#定期清空切片
            hls_nested on;#每条流有自己的文件夹
        }
    }
}
2.还需要配置m3u8的访问，在http中配置server
server {
        listen   8888;
        server_name  localhost;	
        location /hls {
              types {
                    application/vnd.apple.mpegurl m3u8;
                    video/mp2t ts;
                    }
              alias /Users/hs/develop/hls/;
              add_header Cache-Control no-cache;
              add_header 'Access-Control-Allow-Origin' '*';#注意开启远程访问
        }
}

注意点：

1）在mac中/usr下面的普通用户是没有权限创建文件的，所以会发现执行转流操作没有文件生成，这里改成/Users下面的文件夹即可

2）由于转流操作没办法创建文件夹，需要手动创建hls_path的目录
 

4、执行ffmpeg命令将远端摄像头的流转换成直播流

命令如下，还可以一配置更详细的参数，不过以下就满足需求了 -an是忽略掉了音频（监控不需要）

ffmpeg -rtsp_transport tcp -i rtsp://用户名:密码@IP:端口 -vcodec copy -an -f flv rtmp://localhost:1999/hls/cam

看到如下代表执行成功：

进入配置的hls_path中会看到xx.ts的视频切片和index.m3u8的文件

5、在mac中安装VLC软件，可以直接看到rtmp的视频流

在VLC软件中

即可看到监控画面。到这里获取视频的画面部分已经可以了。接下来就是正和到html中。

6、由于html无法直接播放rtmp的流，可以使用video标识实现播放m3u8格式。在这里觉得阿里云播放器更好一些，下面集成阿里云播放器

1）在前端项目中创建一个demo的html，具体内容如官网所示：

最终chrome访问页面：界面截图如下