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

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

发布了31 篇原创文章 · 获赞 4 · 访问量 2万+
展开阅读全文

vlc播放rtsp的问题,服务器ffserver

10-08

我使ffserver任务服务器,vlc当作客户端,播放rtsp流时,没有画面,vlc提示没有数据,但是抓包结果显示是有数据的。 **抓包记录:** OPTIONS rtsp://10.0.5.182:5454/h264.avi RTSP/1.0 CSeq: 2 User-Agent: LibVLC/2.2.4 (LIVE555 Streaming Media v2016.02.22) RTSP/1.0 200 OK CSeq: 2 Public: OPTIONS, DESCRIBE, SETUP, TEARDOWN, PLAY, PAUSE DESCRIBE rtsp://10.0.5.182:5454/h264.avi RTSP/1.0 CSeq: 3 User-Agent: LibVLC/2.2.4 (LIVE555 Streaming Media v2016.02.22) Accept: application/sdp RTSP/1.0 200 OK CSeq: 3 Date: Sat, 08 Oct 2016 07:39:50 GMT Content-Base: rtsp://10.0.5.182:5454/h264.avi/ Content-Type: application/sdp Content-Length: 585 v=0 o=- 0 0 IN IP4 127.0.0.1 s=No Title c=IN IP4 0.0.0.0 t=0 0 a=tool:libavformat 57.41.100 m=audio 0 RTP/AVP 96 b=AS:19 a=rtpmap:96 MPEG4-GENERIC/8000/2 a=fmtp:96 profile-level-id=1;mode=AAC-hbr;sizelength=13;indexlength=3;indexdeltalength=3; config=1590 a=control:streamid=0 m=video 0 RTP/AVP 97 b=AS:62 a=rtpmap:97 H264/90000 a=fmtp:97 packetization-mode=1; sprop-parameter-sets=J01ADKkYYELxCA==,KM4JiA==; profile-level-id=4D400C a=control:streamid=1 m=application 0 RTP/AVP 3 b=AS:23 a=control:streamid=2 m=application 0 RTP/AVP 3 b=AS:3 a=control:streamid=3 SETUP rtsp://10.0.5.182:5454/h264.avi/streamid=0 RTSP/1.0 CSeq: 4 User-Agent: LibVLC/2.2.4 (LIVE555 Streaming Media v2016.02.22) Transport: RTP/AVP;unicast;client_port=50140-50141 RTSP/1.0 200 OK CSeq: 4 Date: Sat, 08 Oct 2016 07:39:50 GMT Session: 3bf7c45bc1897a77 Transport: RTP/AVP/UDP;unicast;client_port=50140-50141;server_port=44545-44546 SETUP rtsp://10.0.5.182:5454/h264.avi/streamid=1 RTSP/1.0 CSeq: 5 User-Agent: LibVLC/2.2.4 (LIVE555 Streaming Media v2016.02.22) Transport: RTP/AVP;unicast;client_port=50142-50143 Session: 3bf7c45bc1897a77 RTSP/1.0 200 OK CSeq: 5 Date: Sat, 08 Oct 2016 07:39:50 GMT Session: 3bf7c45bc1897a77 Transport: RTP/AVP/UDP;unicast;client_port=50142-50143;server_port=54851-54852 PLAY rtsp://10.0.5.182:5454/h264.avi/ RTSP/1.0 CSeq: 6 User-Agent: LibVLC/2.2.4 (LIVE555 Streaming Media v2016.02.22) Session: 3bf7c45bc1897a77 Range: npt=0.000- RTSP/1.0 200 OK CSeq: 6 Date: Sat, 08 Oct 2016 07:39:50 GMT Session: 3bf7c45bc1897a77 **vlc日志** live555 warning: no data received in 10s. Switching to TCP live555 error: no data received in 10s, aborting PS:抓包观察,是有rtp封包的。 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 书香水墨 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览