Nginx、FFmpeg实现浏览器无插件播放大华IPC、NVR设备视频

Nginx、FFmpeg实现浏览器无插件播放大华IPC、NVR设备视频

使用Nginx、FFmpeg将rtsp流转换为hls流,web页面通过video.js实现视频播放

一、软件安装

(1)安装Nginx

Windows平台下,下载Nginx的安装包,官网地址,建议选择Stable version。

解压缩之后可以通过双击nginx.exe运行Nginx服务器。在浏览器打开新的标签页并输入localhost或本机IP地址,若出现welcome to Nginx样式的文本,则成功。

修改安装路径下/conf/nginx.conf文件,在http -> server下加入以下命令:

location /hls{
	root html;
	add_header Access-Control-Allow-Origin *;
}

同时查看conf目录下mime.types文件的types中是否包含以下内容:

types{
    application/vnd.apple.mpegurl m3u8;
    application/x-mpegURL m3u8;
    video/mp2t ts;
}

若不包含,则添加。

Linux平台(以centos7为例),可通过yum命令安装(对centos不是很精通的话最好用root用户登录)(nginx官网提供了安装方法,但我没有试过),
安装完成后,修改

/etc/nginx/conf.d

目录中的default.conf文件,在server -> location下添加以下内容解决跨域问题。

add_header Access-Control-Allow-Origin *;

同样查看conf目录下的mime.types文件的内容是否符合要求。

(2)安装FFmpeg

  1. Windows平台下,下载FFmpeg,下载完成后解压并将文件夹复制到想要安装的盘符。完成后配置环境变量,将安装目录中的bin目录配置到系统变量path中,如D:\MyWork\ffmpeg\bin。在新建的cmd窗口中输入ffmpeg -version后,如果出现版本号则安装成功。

  2. Linux平台安装FFmpeg时,可以通过nux-desktop源安装,
    也可以通过编译安装。同样,在终端中输入ffmpeg -version后,如果出现版本号则安装成功。

二、命令行转流

(1)Windows下的命令:

ffmpeg -i "rtsp://admin:[email protected]:554/cam/realmonitor?channel=1&subtype=0" -c copy -f hls -hls_time 2.0 -hls_list_size 1 -hls_wrap 15 D:\nginx-1.16.1\html\hls\test.m3u8

(2)Linux下的命令:

ffmpeg -rtsp_transport tcp -i "rtsp://admin:[email protected]:554/cam/realmonitor?channel=1&subtype=0" -c copy -f hls -hls_time 2.0 -hls_list_size 1 -hls_wrap 15 /usr/share/nginx/html/hls/test.m3u8

两条命令中结束部分的路径为m3u8文件所在路径。也是第一步中location设置的位置。

由于FFmpeg默认使用UDP协议,我在Linux中使用时出现超时的情况,所以建议强制使用TCP方式读取rtsp流:

-rtsp_transport tcp。

其他参数代表的含义:

-hls_time n: 设置每片的长度,默认值为2。单位为秒
-hls_list_size n:设置播放列表保存的最多条目,设置为0会保存有所片信息,默认值为5
-hls_wrap n:设置多少片之后开始覆盖,如果设置为0则不会覆盖,默认值为0.这个选项能够避免在磁盘上存储过多的片,而且能够限制写入磁盘的最多的片的数量
-hls_start_number n:设置播放列表中sequence nu+mber的值为number,默认值为0

(4)使用FFmpeg拉流时,网络摄像头与网络硬盘录像机RTSP地址的区别

使用网络摄像头

rtsp://username:password@ipAddress:port/cam/realmonitor?channel=摄像头的信道&subtype=码流

用户名、密码、IP地址、端口号都是摄像头的;
码流分为主码流(0)和辅码流(1)两种。

使用网络硬盘摄像机

rtsp://username:password@ipAddress:port/cam/realmonitor?channel=摄像头所在通道&subtype=码流

用户名、密码、IP地址、端口号均为硬盘录像机的;
channel为摄像头的通道:如果硬盘录像机最大支持8路网络视频接入,那么channel最大值为8,最多可接入8个摄像头,每一路为一个通道;
码流同样分为主码流(0)和辅码流(1)两种。

海康和大华设备的rtsp地址格式详解

三、视频实时播放与视频回放

(1)实时播放

使用实时播放时,RTSP应当书写为:

rtsp://username:password@ipAddress:port/cam/realmonitor?channel=摄像头的信道&subtype=码流

此时,通过网络摄像头或者硬盘录像机都可以获取实时视频

(2)视频回放

使用视频回放时,RTSP应当书写为:

rtsp://username:password@ipAddress:port/cam/playback?channel=摄像头所在通道&subtype=码流&starttime=yyyy_MM_dd_HH_mm_s&endtime=yyyy_MM_dd_HH_mm_s

rtsp://username:password@ipAddress:port/cam/playback?channel=摄像头所在通道&subtype=码流&starttime=yyyy_MM_dd_HH_mm_s

starttime表示开始时间,endtime表示结束时间
使用视频回放时,应该连接硬盘录像机或有存储功能的网络摄像头

实时播放与回放rtsp地址的区别在于端口号后边的路径:
实时播放的路径为/cam/realmonitor、而视频回放的路径为/cam/playback/

四、HTML页面播放视频

通过浏览器播放m3u8文件,将video标签中的src替换为

http://IP地址/hls/test.m3u8

type设置为

application/x-mpegURL。

通过muted和autoplay="autoplay"搭配的方式可以实现自动播放功能。

对于video.js的使用,请参考video.js使用

demo代码:


<html>
	<head>
		<meta charset="utf-8">
		<title>Video.js 7.4.1title>
		<link href="./video-js.min.css" rel="stylesheet">
		<script src="./video.min.js">script>
	head>
	<body>
		<div>
			<video id="my-video1" width="795" height="445" class="video-js" muted preload="auto" autoplay="autoplay" data-setup="{}">
				<source src="http://IP地址/hls/test.m3u8" type="application/x-mpegURL">
			video>
		div>
	body>
html>

效果:
Nginx、FFmpeg实现浏览器无插件播放大华IPC、NVR设备视频_第1张图片
后期会更新从NVR设备拉流,实时监控和回放功能 ------------ 已更新

参考

Nginx+FFmpeg实现rtsp流转hls流
浏览器播放m3u8文件等

你可能感兴趣的:(音视频)