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

最新推荐文章于 2024-08-21 09:01:26 发布

代码荷尔蒙

最新推荐文章于 2024-08-21 09:01:26 发布

阅读量1.2k

点赞数 2

分类专栏：随笔文章标签： javascript

本文链接：https://blog.csdn.net/asd372506589/article/details/105126382

版权

随笔专栏收录该内容

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

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，具体内容如官网所示：

<!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访问页面：界面截图如下