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

以你之姓@ 2023-07-18 09:54 5阅读 0赞

在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看到如下内容代表安装可以了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzZDM3MjUwNjU4OQ_size_16_color_FFFFFF_t_70][]

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

看到如下代表执行成功：

![2020032620400847.png][]进入配置的hls\_path中会看到xx.ts的视频切片和index.m3u8的文件

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

在VLC软件中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzZDM3MjUwNjU4OQ_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzZDM3MjUwNjU4OQ_size_16_color_FFFFFF_t_70 2][]

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

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

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

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport"   content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    	<title>用户测试用例</title>
    	<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css" />
    	<script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"></script>
    </head>
    <body>
    <div  class="prism-player" id="xxx"></div>
    <script>
    	var player = new Aliplayer({
    		id: 'xxx',
    		width: '100%',
    		// autoplay: false,
    		isLive:true, //开启直播，live替换进度条
    		skinLayout:false, //用来控制所有的控件按钮，取消所有控件，更像监控画面
    		//支持播放地址播放,此播放优先级最高
    		source : 'http://127.0.0.1:8888/hls/cam/index.m3u8',//m3u8文件的地址即可
    	},function(player){
    		player.mute();//先静音才能自动播放
    		player.play();//由于上面的自动播放在chrome中失效，用这俩段代码代替
    		console.log('播放器创建好了。')
    	});
    </script>
    </body>
    </html>

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzZDM3MjUwNjU4OQ_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzZDM3MjUwNjU4OQ_size_16_color_FFFFFF_t_70]: /images/20230528/ddd680042ef84346bd0ae36a7863ce5b.png
[2020032620400847.png]: /images/20230528/55936e26ab644dd0ba733ab6b567f717.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzZDM3MjUwNjU4OQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/b62108536cab4fc697323a07f7dea129.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzZDM3MjUwNjU4OQ_size_16_color_FFFFFF_t_70 2]: /images/20230528/c978ee1395c44a21a2ebc5b9f2cca35c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzZDM3MjUwNjU4OQ_size_16_color_FFFFFF_t_70 3]: /images/20230528/beaca3da5795439f9675bac8de105002.png