Nginx+FFmpeg实现海康威视摄像头的rtsp流转hls流并在本地WEB页面以及服务器WEB页面实现直播效果

由于自己的海康威视网络摄像机不支持websocket》》具体如何查看通过海康威视技术人员提示观察打开海康威视提供的摄像头预览页面是否有localLocalServiceComponents.exe的进程，有该进程则无法进行web开发。。。下午再写...

Zim_cie

11526人浏览 · 2021-09-02 12:06:30

Zim_cie · 2021-09-02 12:06:30 发布

由于自己的海康威视网络摄像机不支持websocket，无法使用官方网页提供的WEB3.2开发包，只能使用低版本3.0版本的web开发包，但是这个版本的开发包只支持44以下版本的Chrome浏览器（当前普遍版本90+），ie9-ie11（？？?很少人用ie了，更何况不适配开发需求），其余Firefox也应该是低版本的。转而想到通过提取视频流的方法进行二次开发。

》》具体如何查看通过海康威视技术人员提示观察打开海康威视提供的摄像头预览页面在预览时任务管理器是否有LocalServiceComponents.exe的进程，有该进程则无法进行web开发。（还有一种方法就是看页面的设置是否有本地设置，有的话就是上面的情况）

下午看了许多大牛提取视频流的各种方法，决定也采用Nginx+FFmpeg将rtmp流转成hls流的方法来进行二次开发，本以为教程照着做还是很简单的，但是路上采坑不断，磕磕绊绊做了很久，终于是有了一点效果，决定也写一个文章记录一下。

一.FFmpeg安装

1.windows下安装

官网FFmpeg，点击下载之后需要找到 Get package&executable files下载（选择windows EXE files 找一个进去之后选择稳定版下载），不过该网页不太稳定，给你们一个百度链接，自行下载百度网盘请输入提取码提取码onwz ——》》这是我自己本地用的64位ffmpeg4.4的稳定版以及后续Nginx和html页面。

要不然直接点到上面的按钮下载的的源代码，需要自己进行编译，那个还是比较麻烦的，不过想自己编译的可以选择下载。

watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAY2F0X29mX21pbmc=,size_20,color_FFFFFF,t_70,g_se,x_16

下载好后解压FFmpeg文件夹，配置环境变量：在“Path”变量原有变量值内容上加上当前解压该文件的路径加上\bin(我记得此处一个小坑就是路径中不能包含中文符号，要不然后续验证的时候回报错），配置完毕后cmd命令行输入验证：ffmpeg 出现以下一串信息则配置成功。

ffmpeg version N-103457-g9abf0e0419-20210831 Copyright (c) 2000-2021 the FFmpeg developers
  built with gcc 10-win32 (GCC) 20210408
  configuration: --prefix=/ffbuild/prefix --pkg-config-flags=--static --pkg-config=pkg-config --cross-prefix=x86_64-w64-mingw32- --arch=x86_64 --target-os=mingw32 --enable-gpl --enable-version3 --disable-debug --disable-w32threads --enable-pthreads --enable-iconv --enable-libxml2 --enable-zlib --enable-libfreetype --enable-libfribidi --enable-gmp --enable-lzma --enable-fontconfig --enable-libvorbis --enable-opencl --enable-libvmaf --enable-vulkan --disable-libxcb --disable-xlib --enable-amf --enable-libaom --enable-avisynth --enable-libdav1d --enable-libdavs2 --disable-libfdk-aac --enable-ffnvcodec --enable-cuda-llvm --enable-frei0r --enable-libglslang --enable-libgme --enable-libass --enable-libbluray --enable-libmp3lame --enable-libopus --enable-libtheora --enable-libvpx --enable-libwebp --enable-lv2 --enable-libmfx --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-librav1e --enable-librubberband --enable-schannel --enable-sdl2 --enable-libsoxr --enable-libsrt --enable-libsvtav1 --enable-libtwolame --enable-libuavs3d --disable-libdrm --disable-vaapi --enable-libvidstab --enable-libx264 --enable-libx265 --enable-libxavs2 --enable-libxvid --enable-libzimg --enable-libzvbi --extra-cflags=-DLIBTWOLAME_STATIC --extra-cxxflags= --extra-ldflags=-pthread --extra-ldexeflags= --extra-libs=-lgomp --extra-version=20210831
  libavutil      57.  4.101 / 57.  4.101
  libavcodec     59.  6.100 / 59.  6.100
  libavformat    59.  4.102 / 59.  4.102
  libavdevice    59.  0.101 / 59.  0.101
  libavfilter     8.  7.100 /  8.  7.100
  libswscale      6.  0.100 /  6.  0.100
  libswresample   4.  0.100 /  4.  0.100
  libpostproc    56.  0.100 / 56.  0.100
Hyper fast Audio and Video encoder
usage: ffmpeg [options] [[infile options] -i infile]... {[outfile options] outfile}...

Use -h to get full help or, even better, run 'man ffmpeg'

2.linux安装

暂时没有考虑在linux安装ffmpeg，毕竟我的需求是window终端将视频流推到linux的服务器端。

具体安装教程可以参考如下链接：Nginx+FFmpeg实现rtsp流转hls流，在WEB通过H5 video实现视频播放_打不死的小强lee的博客-CSDN博客_ffmpeg rtsp转hls

二.Nginx安装（此处坑较多）

1.windows下安装

毕竟我们最后获得的视频流是rtmp/hls ，此处千万不能去官网下载Nginx然后解压，因为里面没有rtmp模块，所以我就成功第一次下载的时候采坑到里面了，以至于后面推流之后一度以为是我的相机出现了毛病导致页面一直不能加载画面。

经过查询之后发现官网提供的安装包里面都不会包含rtmp模块，所以需要找到一个包含该模块的安装包。百度网盘链接再放一次：下载百度网盘请输入提取码提取码onwz ——》》这是我自己本地用的64位ffmpeg4.4的稳定版以及后续Nginx1.7（包含rtmp模块）和浏览使用html页面。

下载解压之后打开./conf windows下的配置文件叫做nginx-win.conf。打开需要添加两处改动。

#此处rtmp是与配置文件中的http的同级别的（即在最外层）
rtmp { 
    server { 
        listen 1935; 
        chunk_size 4096;  
        
	    application hls { #hls的地址
            live on;
            hls on;
            hls_path html/hls;
	        hls_fragment 1s;
	    }
 
	    application live { #rtmp的地址
             live on;
 
	    }
 
    }
}

#这个是在http里面server处跟 location / 同级别的添加，模仿添加上去即可
	location /hls {
	    types{
		    application/x-mpegURL m3u8;
		    video/mp2t ts;
	    }
	    root html;
	    add_header Cache-Control no-cache;
	    add_header Access-Control-Allow-Origin *;
    }

还有一处就是

server {
listen 80; //监听端口被占用可以自行修改
server_name localhost;

80的是http端口，这个80的端口会经常被其他服务占用，到时候启动nginx服务的时候会提示0.0.0.0:80 failed（Already 。。。。。used）说明你这个端口被占用了，网上很多解决方法是让你先看本地网络端口的监听状态以及对应的PID，然后直接kill。

那这样之前运行的服务不就被意外终止了吗。。所以此处建议读者可以将nginx的80端口自定义修改（不冲突就行，rtmp的1935端口很少出现跟其他服务的端口冲突，想改就改）。

2.linux下安装nginx

我是通过mobaxterm访问的linux服务器，由于使用wget下载nginx文件会非常慢，建议读者可以现在本地下一个nginx.tar.gz的压缩包，下载地址就是官网地址：nginx: download

此外还需要把rtmp模块clone下来https://github.com/arut/nginx-rtmp-module，download之后也拖拽到对应的文件夹中，后续编译时需要加入rtmp模块（记得路径指定正确）。

下载好后手动拖拽到想要解压的路径文件夹下。

下来先需要安装nginx依赖的软件库

$ yum install gcc

$ yum install -y pcre pcre-devel

$ yum install -y zlib zlib-devel

$ yum install -y openssl openssl-devel

然后可以解压并进入对应目录

$ tar -zxvf nginx-1.12.2.tar.gz

$ cd nginx-1.12.2

下一步不能使用默认配置，因为需要增加rtmp模块，所以需要自定义配置，代码如下（其中--add-module就是要指定rtmp模块的对应文件夹路径）。此时配置之后默认放在/usr/local/nginx下面，

另外还需要在/var/temp下面创建nginx的文件夹，存放一些临时文件。

./configure \
--prefix=/usr/local/nginx \
--add-module=../nginx-rtmp-module  \
--conf-path=/usr/local/nginx/conf/nginx.conf \
--pid-path=/usr/local/nginx/conf/nginx.pid \
--lock-path=/var/lock/nginx.lock \
--error-log-path=/var/log/nginx/error.log \
--http-log-path=/var/log/nginx/access.log \
--with-http_gzip_static_module \
--http-client-body-temp-path=/var/temp/nginx/client \
--http-proxy-temp-path=/var/temp/nginx/proxy \
--http-fastcgi-temp-path=/var/temp/nginx/fastcgi \
--http-uwsgi-temp-path=/var/temp/nginx/uwsgi \
--http-scgi-temp-path=/var/temp/nginx/scgi

配置之后看无误后进行编译安装

$ make && make install

然后可以查看安装路径并进入该路径

$ whereis nginx

/usr/local/nginx 这个就是刚刚自定义配置指定的路径

cd到该路径之后（后续还有一段大坑）

由于在windos下已经说过监听端口80容易经常被其他服务占用，所以需要修改配置文件。此时/usr/local/nginx 下面有三个文件夹 sbin/ (启动服务nginx所在处） /html（默认http访问路径）/conf （配置文件所在位置）

修改配置文件

#此处rtmp是与配置文件中的http的同级别的（即在最外层）
rtmp { 
    server { 
        listen 1935; 
        chunk_size 4096;  
        
	    application hls { #hls的地址
            live on;
            hls on;
            hls_path html/hls;
	        hls_fragment 1s;
	    }
 
	    application live { #rtmp的地址
             live on;
 
	    }
 
    }
}

#这个是在http里面server处跟 location / 同级别的添加，模仿添加上去即可
	location /hls {
	    types{
		    application/x-mpegURL m3u8;
		    video/mp2t ts;
	    }
	    root html;
	    add_header Cache-Control no-cache;
	    add_header Access-Control-Allow-Origin *;
    }

然后需要先重新加载配置文件