怎样从一个新手，实现windows搭建wvp+zlm流媒体平台？

男娘i 2023-09-24 18:12 45阅读 0赞

在流媒体日趋成熟的今天，大家每天都会刷大量视频，又或者拥有一部手机就能远程查看家里的监控；那作为新手的你，怎么从无到有打造自己的流媒体平台呢？

这里我们选用wvp+ZLMediaKit开源平台，WEB VIDEO PLATFORM（wvp）是一个基于GB28181-2016标准实现的网络视频平台，支持NAT穿透，支持海康、大华、宇视等品牌的IPC、NVR、DVR接入。支持国标级联，支持rtsp/rtmp等视频流转发到国标平台，支持rtsp/rtmp等推流转发到国标平台。

一、准备工作

1.安装所需工具

maven（管理java代码依赖）、ffmpeg、nodejs(版本根据自己项目的需要安装，我本人安装的是v16.15.0)、git工具、npm/yarn、IntelliJ IDEA（jdk我用的是1.8）、Visual Studio 2017（可根据个人情况下载不同版本，本人使用的是2017，windows最好也用这个版本）、Cmake、redis、mysql（工具本人用的是Navicat Premium 15）；vue编辑器可自行选择，我使用的是HBuilder X。

2.从github克隆zlm代码

# 国内用户推荐从同步镜像网站gitee下载 
    git clone --depth 1 https://gitee.com/xia-chu/ZLMediaKit
    cd ZLMediaKit
    # 千万不要忘记执行这句命令
    git submodule update --init

3.同理克隆wvp代码

git clone https://github.com/648540858/wvp-GB28181-pro.git

二、开始编译工作

1.编译前端代码

前端代码采用的是vue+element编写，所以你如果想要深入学习，可以相应的去熟悉一下vue的语法和element的组件用法。

# 进入前端目录
    cd wvp-GB28181-pro/web_src/
    # 安装依赖命令
    npm --registry=https://registry.npm.taobao.org install
    # 打包命令
    npm run build
    # 本地运行命令
    npm run dev
    # 当然，如果你喜欢用yarn，这里也可以换成yarn命令去操作，具体实现可以自行研究一下

2.编译wvp

在编译之前，我们需要对配置文件进行配置，项目目录如下所示：

![0bedada8cb7646f49807b8db5ec87f37.png][]

项目文件目录预览

该项目数据库在sql文件夹里，点击打开之后就会看到一个sql文件。

![dfc4ff5a54bf44e18f4b3ab8d4270c37.png][]

数据库文件

开发者可以自行导入数据库里。随着wvp版本更新，数据库可能会有差异，具体以实际文件为准。

![f3c2511bd95648219bedf96f5badf0dc.png][]

数据库表预览（具体以新版本数据库为准）

项目配置文件位于src\\main\\resources目录下，如果开发者采用打包即用，不用指定配置文件的情况下，可以修改application-local.yml，如果指定其他配置文件，可以在application.yml里修改。

![39daea5673d242b6ba764bbecaadb4af.png][]

配置文件路径预览

注意，以下配置的操作都是在application-local.yml配置文件里完成。

（1）配置数据库

spring:
        devtools:
            restart:
                additional-paths: src/main/java
        thymeleaf:
            cache: false
        # REDIS数据库配置
        redis:
            # [必须修改] Redis服务器IP, REDIS安装在本机的,使用127.0.0.1
            host: 127.0.0.1
            # [必须修改] 端口号
            port: 6379
            # [可选] 数据库 DB
            database: 6
            # [可选] 访问密码,若你的redis服务器没有设置密码，就不需要用密码去连接
            password: 
            # [可选] 超时时间
            timeout: 10000
        # [可选] jdbc数据库配置, 项目使用sqlite作为数据库，一般不需要配置
        datasource:
            # 使用mysql 打开23-28行注释， 删除29-36行
            #        name: eiot
            #        url: jdbc:sqlite::resource:wvp.sqlite
            #        username:
            #        password:
            #        type: com.alibaba.druid.pool.DruidDataSource
            #        driver-class-name:  org.sqlite.JDBC
            name: wvp
            url: jdbc:mysql://127.0.0.1:3306/wvp-1?useUnicode=true&characterEncoding=UTF8&rewriteBatchedStatements=true&serverTimezone=UTC
            username: root
            password: root
            type: com.alibaba.druid.pool.DruidDataSource
            driver-class-name: com.mysql.cj.jdbc.Driver

（2）配置server服务器启动端口

# [可选] WVP监听的HTTP端口, 网页和接口调用都是这个端口
    server:
        port: 18080

（3）28181服务配置

# 作为28181服务器的配置
    sip:
         # [必须修改] 本机的IP，这里是我本地ip
        ip: 10.10.10.110
        # [可选] 28181服务监听的端口
        port: 6060
        # 根据国标6.1.2中规定，domain宜采用ID统一编码的前十位编码。国标附录D中定义前8位为中心编码（由省级、市级、区级、基层编号组成，参照GB/T 2260-2007）
        # 后两位为行业编码，定义参照附录D.3
        # 3701020049标识山东济南历下区 信息行业接入
        # [可选]
        domain: 4401020049
        # [可选]
        id: 44010200492000000001
        # [可选] 默认设备认证密码，移除密码将不进行校验
        password: 1234567890

（4）zlm默认服务器配置（wvp启动的时候会去寻找默认的zlm服务器）

#zlm 默认服务器配置
    media:
        # [必须修改] zlm服务器唯一id，用于触发hook时区别是哪台服务器,general.mediaServerId
        id:
        # [必须修改] zlm服务器的内网IP
        ip: 10.10.10.110
        # [可选] 返回流地址时的ip，置空使用 media.ip
        stream-ip:
        # [可选] wvp在国标信令中使用的ip，此ip为摄像机可以访问到的ip， 置空使用 media.ip
        sdp-ip:
        # [可选] zlm服务器的hook所使用的IP, 默认使用sip.ip
        hook-ip:
        # [必须修改] zlm服务器的http.port
        http-port: 80
        # [可选] zlm服务器的http.sslport, 置空使用zlm配置文件配置
        http-ssl-port:
        # [可选] zlm服务器的rtmp.port, 置空使用zlm配置文件配置
        rtmp-port:
        # [可选] zlm服务器的rtmp.sslport, 置空使用zlm配置文件配置
        rtmp-ssl-port:
        # [可选] zlm服务器的 rtp_proxy.port, 置空使用zlm配置文件配置
        rtp-proxy-port:
        # [可选] zlm服务器的 rtsp.port, 置空使用zlm配置文件配置
        rtsp-port:
        # [可选] zlm服务器的 rtsp.sslport, 置空使用zlm配置文件配置
        rtsp-ssl-port:
        # [可选] 是否自动配置ZLM, 如果希望手动配置ZLM, 可以设为false, 不建议新接触的用户修改
        auto-config: true
        # [可选] zlm服务器的hook.admin_params=secret
        secret: hgfgfhky-m87t-p09u-ayth-u76tyred25cc
        # 启用多端口模式, 多端口模式使用端口区分每路流，兼容性更好。 单端口使用流的ssrc区分， 点播超时建议使用多端口测试
        rtp:
            # [可选] 是否启用多端口模式, 开启后会在portRange范围内选择端口用于媒体流传输
            enable: true
            # [可选] 在此范围内选择端口用于媒体流传输, 必须提前在zlm上配置该属性，不然自动配置此属性可能不成功
            port-range: 30000,30500 # 端口范围
        # 录像辅助服务， 部署此服务可以实现zlm录像的管理与下载， 0 表示不使用
        record-assist-port: 0

（5）其他配置（具体可根据业务自行调整）

# [根据业务需求配置]
    user-settings:
        # 推流直播是否录制
        record-push-live: true
        auto-apply-play: false
        # [可选] 部分设备需要扩展SDP，需要打开此设置
        senior-sdp: false
        # 保存移动位置历史轨迹：true:保留历史数据，false:仅保留最后的位置(默认)
        save-position-history: false
        # 点播/录像回放 等待超时时间,单位：毫秒
        play-timeout: 18000
        # 上级点播等待超时时间,单位：毫秒
        platform-play-timeout: 60000
        # 是否开启接口鉴权
        interface-authentication: true
        # 接口鉴权例外的接口, 即不进行接口鉴权的接口,尽量详细书写，尽量不用/**，至少两级目录
        interface-authentication-excludes:
            - /api/v1/**
        # 国标是否录制
        record-sip: true
        # 是否将日志存储进数据库
        logInDatebase: true
        # 使用推流状态作为推流通道状态
        use-pushing-as-status: true
        # 使用来源请求ip作为streamIp,当且仅当你只有zlm节点它与wvp在一起的情况下开启
        use-source-ip-as-stream-ip: true
        # 国标点播 按需拉流, true：有人观看拉流，无人观看释放， false：拉起后不自动释放
        stream-on-demand: true
        # 推流鉴权， 默认开启
        push-authority: true
        # 国标级联发流严格模式，严格模式会使用与sdp信息中一致的端口发流，端口共享media.rtp.port-range，这会损失一些性能，
        # 非严格模式使用随机端口发流，性能更好， 默认关闭
        gb-send-stream-strict: false
        # 设备上线时是否自动同步通道
        sync-channel-on-device-online: false
        # 是否使用设备来源Ip作为回复IP， 不设置则为 false
        sip-use-source-ip-as-remote-address: false
        # 是否开启sip日志
        sip-log: true
        # 自动数据库升级，保证表结构完整
        sync-db: false

（6）编译wvp

启动IntelliJ IDEA，打开wvp项目，开始编译。看到出现这样的界面，表明编译并且运行成功。

![7a5ad9abde5d468499fea4ff3c41eed6.png][]

编译wvp

3.编译zlm

（1）打开安装好的Cmake，选择zlm项目所在位置，并且选择你build项目时的位置，这里我们就放在同一目录下，方便管理。

![6f5f0d1042524da0a1da9ca1c658e08f.png][]

![223e2c36021548e4b85d5f194fe89110.png][]

下一步，点击Yes

（2）点击Configure

![7263dd2db4b841b3b35d3dcb0cd7a89f.png][]

（3）点击Genrate，可以看到两个步骤都提示成功了。

![7ab623ed51e8405a9b33f0aab1d673bf.png][]

（4）选择打开项目，就会自动打开Visual Studio 2017

![adaaa54fa98d4129b710cb8df620c03a.png][]

![53e1d16026f746b98b69cfe569b94092.png][]

打开项目

（5）这里我们直接可以按下图操作，你也可以选择Release

![50f1e6c490f944c29c0ec46791f90bc3.png][]

选择之后点击本地Windows调试器

（6）这里编译需要一定时间，耐心等待。

![19ddad84b4a74b4db3436d0e827e927c.png][]

编译成功

（7）出现编译完成的提示后，去项目目录下找到Debug目录或者Release目录。目录位置位于release目录下

![ecf83dff7c49445d9f7d443e8f1f2431.png][]

zlm应用程序入口目录

![c1f7294e755d400e91a59f7f1adb9efe.png][]

最终应用程序

（8）这里我们不能直接点击MediaServer.exe，需要对其进行配置，我们在上一个目录，会看到一个config.ini文件，打开并将它复制到MediaServer.exe所在目录。当然，你也可以直接打开MediaServer.exe，然后它也会在当前目录自动生成一个config.ini文件，你打开config.ini进去配置即可。

![475c0cb5223d467aa8d641feb23535ca.png][]

配置文件示例

（9）zlm配置文件详细配置如下，开发者可根据自己的实际情况调整

#!!!!此配置文件为范例配置文件，意在告诉读者，各个配置项的具体含义和作用，
    #!!!!该配置文件在执行cmake时，会拷贝至release/${操作系统类型}/${编译类型}(例如release/linux/Debug) 文件夹。
    #!!!!该文件夹(release/${操作系统类型}/${编译类型})同时也是可执行程序生成目标路径，在执行MediaServer进程时，它会默认加载同目录下的config.ini文件作为配置文件，
    #!!!!你如果修改此范例配置文件(conf/config.ini)，并不会被MediaServer进程加载，因为MediaServer进程默认加载的是release/${操作系统类型}/${编译类型}/config.ini。
    #!!!!当然，你每次执行cmake，该文件确实会被拷贝至release/${操作系统类型}/${编译类型}/config.ini，
    #!!!!但是一般建议你直接修改release/${操作系统类型}/${编译类型}/config.ini文件，修改此文件一般不起作用,除非你运行MediaServer时使用-c参数指定到此文件。
    
    [api]
    #是否调试http api,启用调试后，会打印每次http请求的内容和回复
    apiDebug=1
    #一些比较敏感的http api在访问时需要提供secret，否则无权限调用
    #如果是通过127.0.0.1访问,那么可以不提供secret
    secret=hgfgfhky-m87t-p09u-ayth-u76tyred25cc
    #截图保存路径根目录，截图通过http api(/index/api/getSnap)生成和获取
    snapRoot=./www/snap/
    #默认截图图片，在启动FFmpeg截图后但是截图还未生成时，可以返回默认的预设图片
    defaultSnap=./www/logo.png
    
    [ffmpeg]
    #FFmpeg可执行程序路径,支持相对路径/绝对路径
    bin=/usr/bin/ffmpeg
    #FFmpeg拉流再推流的命令模板，通过该模板可以设置再编码的一些参数
    cmd=%s -re -i %s -c:a aac -strict -2 -ar 44100 -ab 48k -c:v libx264 -f flv %s
    #FFmpeg生成截图的命令，可以通过修改该配置改变截图分辨率或质量
    snap=%s -i %s -y -f mjpeg -t 0.001 %s
    #FFmpeg日志的路径，如果置空则不生成FFmpeg日志
    #可以为相对(相对于本可执行程序目录)或绝对路径
    log=./ffmpeg/ffmpeg.log
    # 自动重启的时间(秒), 默认为0, 也就是不自动重启. 主要是为了避免长时间ffmpeg拉流导致的不同步现象
    restart_sec=0
    
    #转协议相关开关；如果addStreamProxy api和on_publish hook回复未指定转协议参数，则采用这些配置项
    [protocol]
    #转协议时，是否开启帧级时间戳覆盖
    modify_stamp=0
    #转协议是否开启音频
    enable_audio=1
    #添加acc静音音频，在关闭音频时，此开关无效
    add_mute_audio=1
    #推流断开后可以在超时时间内重新连接上继续推流，这样播放器会接着播放。
    #置0关闭此特性(推流断开会导致立即断开播放器)
    #此参数不应大于播放器超时时间;单位毫秒
    continue_push_ms=15000
    
    #是否开启转换为hls
    enable_hls=1
    #是否开启MP4录制
    enable_mp4=0
    #是否开启转换为rtsp/webrtc
    enable_rtsp=1
    #是否开启转换为rtmp/flv
    enable_rtmp=1
    #是否开启转换为http-ts/ws-ts
    enable_ts=1
    #是否开启转换为http-fmp4/ws-fmp4
    enable_fmp4=1
    
    #是否将mp4录制当做观看者
    mp4_as_player=0
    #mp4切片大小，单位秒
    mp4_max_second=3600
    #mp4录制保存路径
    mp4_save_path=./www
    
    #hls录制保存路径
    hls_save_path=./www
    
    ###### 以下是按需转协议的开关，在测试ZLMediaKit的接收推流性能时，请把下面开关置1
    ###### 如果某种协议你用不到，你可以把以下开关置1以便节省资源(但是还是可以播放，只是第一个播放者体验稍微差点)，
    ###### 如果某种协议你想获取最好的用户体验，请置0(第一个播放者可以秒开，且不花屏)
    #hls协议是否按需生成，如果hls.segNum配置为0(意味着hls录制)，那么hls将一直生成(不管此开关)
    hls_demand=0
    #rtsp[s]协议是否按需生成
    rtsp_demand=0
    #rtmp[s]、http[s]-flv、ws[s]-flv协议是否按需生成
    rtmp_demand=0
    #http[s]-ts协议是否按需生成
    ts_demand=0
    #http[s]-fmp4、ws[s]-fmp4协议是否按需生成
    fmp4_demand=0
    
    [general]
    #是否启用虚拟主机
    enableVhost=0
    #播放器或推流器在断开后会触发hook.on_flow_report事件(使用多少流量事件)，
    #flowThreshold参数控制触发hook.on_flow_report事件阈值，使用流量超过该阈值后才触发，单位KB
    flowThreshold=1024
    #播放最多等待时间，单位毫秒
    #播放在播放某个流时，如果该流不存在，
    #ZLMediaKit会最多让播放器等待maxStreamWaitMS毫秒
    #如果在这个时间内，该流注册成功，那么会立即返回播放器播放成功
    #否则返回播放器未找到该流，该机制的目的是可以先播放再推流
    maxStreamWaitMS=15000
    #某个流无人观看时，触发hook.on_stream_none_reader事件的最大等待时间，单位毫秒
    #在配合hook.on_stream_none_reader事件时，可以做到无人观看自动停止拉流或停止接收推流
    streamNoneReaderDelayMS=20000
    #拉流代理时如果断流再重连成功是否删除前一次的媒体流数据，如果删除将重新开始，
    #如果不删除将会接着上一次的数据继续写(录制hls/mp4时会继续在前一个文件后面写)
    resetWhenRePlay=1
    #合并写缓存大小(单位毫秒)，合并写指服务器缓存一定的数据后才会一次性写入socket，这样能提高性能，但是会提高延时
    #开启后会同时关闭TCP_NODELAY并开启MSG_MORE
    mergeWriteMS=0
    #服务器唯一id，用于触发hook时区别是哪台服务器，
    #这里需要修改成自己定义的，your_server_id只是提示你是你自己服务器的id
    #很多新手看都不看就原封不动的使用
    mediaServerId=your_server_id
    
    #最多等待未初始化的Track时间，单位毫秒，超时之后会忽略未初始化的Track
    wait_track_ready_ms=10000
    #如果流只有单Track，最多等待若干毫秒，超时后未收到其他Track的数据，则认为是单Track
    #如果协议元数据有声明特定track数，那么无此等待时间
    wait_add_track_ms=3000
    #如果track未就绪，我们先缓存帧数据，但是有最大个数限制，防止内存溢出
    unready_frame_cache=100
    
    [hls]
    #hls写文件的buf大小，调整参数可以提高文件io性能
    fileBufSize=65536
    #hls最大切片时间
    segDur=2
    #m3u8索引中,hls保留切片个数(实际保留切片个数大2~3个)
    #如果设置为0，则不删除切片，而是保存为点播
    segNum=3
    #HLS切片从m3u8文件中移除后，继续保留在磁盘上的个数
    segRetain=5
    #是否广播 ts 切片完成通知
    broadcastRecordTs=0
    #直播hls文件删除延时，单位秒，issue: #913
    deleteDelaySec=10
    #是否保留hls文件，此功能部分等效于segNum=0的情况
    #不同的是这个保留不会在m3u8文件中体现
    #0为不保留，不起作用
    #1为保留，则不删除hls文件，如果开启此功能，注意磁盘大小，或者定期手动清理hls文件
    segKeep=0
    
    [hook]
    #在推流时，如果url参数匹对admin_params，那么可以不经过hook鉴权直接推流成功，播放时亦然
    #该配置项的目的是为了开发者自己调试测试，该参数暴露后会有泄露隐私的安全隐患
    admin_params=secret=hgfgfhky-m87t-p09u-ayth-u76tyred25cc
    #是否启用hook事件，启用后，推拉流都将进行鉴权
    enable=0
    #播放器或推流器使用流量事件，置空则关闭
    on_flow_report=https://127.0.0.1/index/hook/on_flow_report
    #访问http文件鉴权事件，置空则关闭鉴权
    on_http_access=https://127.0.0.1/index/hook/on_http_access
    #播放鉴权事件，置空则关闭鉴权
    on_play=https://127.0.0.1/index/hook/on_play
    #推流鉴权事件，置空则关闭鉴权
    on_publish=https://127.0.0.1/index/hook/on_publish
    #录制mp4切片完成事件
    on_record_mp4=https://127.0.0.1/index/hook/on_record_mp4
    # 录制 hls ts 切片完成事件
    on_record_ts=https://127.0.0.1/index/hook/on_record_ts
    #rtsp播放鉴权事件，此事件中比对rtsp的用户名密码
    on_rtsp_auth=https://127.0.0.1/index/hook/on_rtsp_auth
    #rtsp播放是否开启专属鉴权事件，置空则关闭rtsp鉴权。rtsp播放鉴权还支持url方式鉴权
    #建议开发者统一采用url参数方式鉴权，rtsp用户名密码鉴权一般在设备上用的比较多
    #开启rtsp专属鉴权后，将不再触发on_play鉴权事件
    on_rtsp_realm=https://127.0.0.1/index/hook/on_rtsp_realm
    #远程telnet调试鉴权事件
    on_shell_login=https://127.0.0.1/index/hook/on_shell_login
    #直播流注册或注销事件
    on_stream_changed=https://127.0.0.1/index/hook/on_stream_changed
    #无人观看流事件，通过该事件，可以选择是否关闭无人观看的流。配合general.streamNoneReaderDelayMS选项一起使用
    on_stream_none_reader=https://127.0.0.1/index/hook/on_stream_none_reader
    #播放时，未找到流事件，通过配合hook.on_stream_none_reader事件可以完成按需拉流
    on_stream_not_found=https://127.0.0.1/index/hook/on_stream_not_found
    #服务器启动报告，可以用于服务器的崩溃重启事件监听
    on_server_started=https://127.0.0.1/index/hook/on_server_started
    #server保活上报
    on_server_keepalive=https://127.0.0.1/index/hook/on_server_keepalive
    #发送rtp(startSendRtp)被动关闭时回调
    on_send_rtp_stopped=https://127.0.0.1/index/hook/on_send_rtp_stopped
    #rtp server 超时未收到数据
    on_rtp_server_timeout=https://127.0.0.1/index/hook/on_rtp_server_timeout
    
    #hook api最大等待回复时间，单位秒
    timeoutSec=10
    #keepalive hook触发间隔,单位秒，float类型
    alive_interval=10.0
    #hook通知失败重试次数,正整数。为0不重试，1时重试一次，以此类推
    retry=1
    #hook通知失败重试延时，单位秒，float型
    retry_delay=3.0
    
    [cluster]
    #设置源站拉流url模板, 格式跟printf类似，第一个%s指定app,第二个%s指定stream_id,
    #开启集群模式后，on_stream_not_found和on_stream_none_reader hook将无效.
    #溯源模式支持以下类型:
    #rtmp方式: rtmp://127.0.0.1:1935/%s/%s
    #rtsp方式: rtsp://127.0.0.1:554/%s/%s
    #hls方式: http://127.0.0.1:80/%s/%s/hls.m3u8
    #http-ts方式: http://127.0.0.1:80/%s/%s.live.ts
    #支持多个源站，不同源站通过分号(;)分隔
    origin_url=
    #溯源总超时时长，单位秒，float型；假如源站有3个，那么单次溯源超时时间为timeout_sec除以3
    #单次溯源超时时间不要超过general.maxStreamWaitMS配置
    timeout_sec=15
    #溯源失败尝试次数，-1时永久尝试
    retry_count=3
    
    [http]
    #http服务器字符编码，windows上默认gb2312
    charSet=utf-8
    #http链接超时时间
    keepAliveSecond=30
    #http请求体最大字节数，如果post的body太大，则不适合缓存body在内存
    maxReqSize=40960
    #404网页内容，用户可以自定义404网页
    #notFound=<html><head><title>404 Not Found</title></head><body bgcolor="white"><center><h1>您访问的资源不存在！</h1></center><hr><center>ZLMediaKit-4.0</center></body></html>
    #http服务器监听端口
    port=80
    #http文件服务器根目录
    #可以为相对(相对于本可执行程序目录)或绝对路径
    rootPath=./www
    #http文件服务器读文件缓存大小，单位BYTE，调整该参数可以优化文件io性能
    sendBufSize=65536
    #https服务器监听端口
    sslport=443
    #是否显示文件夹菜单，开启后可以浏览文件夹
    dirMenu=1
    #虚拟目录, 虚拟目录名和文件路径使用","隔开，多个配置路径间用";"隔开
    #例如赋值为 app_a,/path/to/a;app_b,/path/to/b 那么
    #访问 http://127.0.0.1/app_a/file_a 对应的文件路径为 /path/to/a/file_a
    #访问 http://127.0.0.1/app_b/file_b 对应的文件路径为 /path/to/b/file_b
    #访问其他http路径,对应的文件路径还是在rootPath内
    virtualPath=
    #禁止后缀的文件使用mmap缓存，使用“,”隔开
    #例如赋值为 .mp4,.flv
    #那么访问后缀为.mp4与.flv 的文件不缓存
    forbidCacheSuffix=
    #可以把http代理前真实客户端ip放在http头中：https://github.com/ZLMediaKit/ZLMediaKit/issues/1388
    #切勿暴露此key，否则可能导致伪造客户端ip
    forwarded_ip_header=
    
    [multicast]
    #rtp组播截止组播ip地址
    addrMax=239.255.255.255
    #rtp组播起始组播ip地址
    addrMin=239.0.0.0
    #组播udp ttl
    udpTTL=64
    
    [record]
    #mp4录制或mp4点播的应用名，通过限制应用名，可以防止随意点播
    #点播的文件必须放置在此文件夹下
    appName=record
    #mp4录制写文件缓存，单位BYTE,调整参数可以提高文件io性能
    fileBufSize=65536
    #mp4点播每次流化数据量，单位毫秒，
    #减少该值可以让点播数据发送量更平滑，增大该值则更节省cpu资源
    sampleMS=500
    #mp4录制完成后是否进行二次关键帧索引写入头部
    fastStart=0
    #MP4点播(rtsp/rtmp/http-flv/ws-flv)是否循环播放文件
    fileRepeat=0
    
    [rtmp]
    #rtmp必须在此时间内完成握手，否则服务器会断开链接，单位秒
    handshakeSecond=15
    #rtmp超时时间，如果该时间内未收到客户端的数据，
    #或者tcp发送缓存超过这个时间，则会断开连接，单位秒
    keepAliveSecond=15
    #在接收rtmp推流时，是否重新生成时间戳(很多推流器的时间戳着实很烂)
    modifyStamp=0
    #rtmp服务器监听端口
    port=1935
    #rtmps服务器监听地址
    sslport=0
    
    [rtp]
    #音频mtu大小，该参数限制rtp最大字节数，推荐不要超过1400
    #加大该值会明显增加直播延时
    audioMtuSize=600
    #视频mtu大小，该参数限制rtp最大字节数，推荐不要超过1400
    videoMtuSize=1400
    #rtp包最大长度限制，单位KB,主要用于识别TCP上下文破坏时，获取到错误的rtp
    rtpMaxSize=10
    # rtp 打包时，低延迟开关，默认关闭（为0），h264存在一帧多个slice（NAL）的情况，在这种情况下，如果开启可能会导致画面花屏
    lowLatency=0
    
    [rtp_proxy]
    #导出调试数据(包括rtp/ps/h264)至该目录,置空则关闭数据导出
    dumpDir=
    #udp和tcp代理服务器，支持rtp(必须是ts或ps类型)代理
    port=10000
    #rtp超时时间，单位秒
    timeoutSec=15
    #随机端口范围，最少确保36个端口
    #该范围同时限制rtsp服务器udp端口范围
    port_range=30000-35000
    #rtp h264 负载的pt
    h264_pt=98
    #rtp h265 负载的pt
    h265_pt=99
    #rtp ps 负载的pt
    ps_pt=96
    #rtp opus 负载的pt
    opus_pt=100
    
    [rtc]
    #rtc播放推流、播放超时时间
    timeoutSec=15
    #本机对rtc客户端的可见ip，作为服务器时一般为公网ip，可有多个，用','分开，当置空时，会自动获取网卡ip
    #同时支持环境变量，以$开头，如"$EXTERN_IP"; 请参考：https://github.com/ZLMediaKit/ZLMediaKit/pull/1786
    externIP=
    #rtc udp服务器监听端口号，所有rtc客户端将通过该端口传输stun/dtls/srtp/srtcp数据，
    #该端口是多线程的，同时支持客户端网络切换导致的连接迁移
    #需要注意的是，如果服务器在nat内，需要做端口映射时，必须确保外网映射端口跟该端口一致
    port=8000
    #rtc tcp服务器监听端口号，在udp 不通的情况下，会使用tcp传输数据
    #该端口是多线程的，同时支持客户端网络切换导致的连接迁移
    #需要注意的是，如果服务器在nat内，需要做端口映射时，必须确保外网映射端口跟该端口一致
    tcpPort = 8000
    #设置remb比特率，非0时关闭twcc并开启remb。该设置在rtc推流时有效，可以控制推流画质
    #目前已经实现twcc自动调整码率，关闭remb根据真实网络状况调整码率
    rembBitRate=0
    #rtc支持的音频codec类型,在前面的优先级更高
    #以下范例为所有支持的音频codec
    preferredCodecA=PCMU,PCMA,opus,mpeg4-generic
    #rtc支持的视频codec类型,在前面的优先级更高
    #以下范例为所有支持的视频codec
    preferredCodecV=H264,H265,AV1,VP9,VP8
    
    [srt]
    #srt播放推流、播放超时时间,单位秒
    timeoutSec=5
    #srt udp服务器监听端口号，所有srt客户端将通过该端口传输srt数据，
    #该端口是多线程的，同时支持客户端网络切换导致的连接迁移
    port=9000
    #srt 协议中延迟缓存的估算参数，在握手阶段估算rtt ,然后latencyMul*rtt 为最大缓存时长，此参数越大，表示等待重传的时长就越大
    latencyMul=4
    #包缓存的大小
    pktBufSize=8192
    
    
    [rtsp]
    #rtsp专有鉴权方式是采用base64还是md5方式
    authBasic=0
    #rtsp拉流、推流代理是否是直接代理模式
    #直接代理后支持任意编码格式，但是会导致GOP缓存无法定位到I帧，可能会导致开播花屏
    #并且如果是tcp方式拉流，如果rtp大于mtu会导致无法使用udp方式代理
    #假定您的拉流源地址不是264或265或AAC，那么你可以使用直接代理的方式来支持rtsp代理
    #如果你是rtsp推拉流，但是webrtc播放，也建议关闭直接代理模式，
    #因为直接代理时，rtp中可能没有sps pps,会导致webrtc无法播放; 另外webrtc也不支持Single NAL Unit Packets类型rtp
    #默认开启rtsp直接代理，rtmp由于没有这些问题，是强制开启直接代理的
    directProxy=1
    #rtsp必须在此时间内完成握手，否则服务器会断开链接，单位秒
    handshakeSecond=15
    #rtsp超时时间，如果该时间内未收到客户端的数据，
    #或者tcp发送缓存超过这个时间，则会断开连接，单位秒
    keepAliveSecond=15
    #rtsp服务器监听地址
    port=554
    #rtsps服务器监听地址
    sslport=0
    #rtsp 转发是否使用低延迟模式，当开启时，不会缓存rtp包，来提高并发，可以降低一帧的延迟
    lowLatency=0
    [shell]
    #调试telnet服务器接受最大bufffer大小
    maxReqSize=1024
    #调试telnet服务器监听端口
    port=0

（10）点击MediaServer.exe启动zlm，出现如下界面，说明启动成功。

![28531de32f8b41b7a7c8e8d291e1355c.png][]

4.运行前端程序

（1）编译程序

# 进入前端目录
    cd wvp-GB28181-pro/web_src/

![9bad889cb17648ca8bbff306eeb273fd.png][]

这里几乎不需要修改，也可以自行根据实际情况修改

（2）运行程序

# 本地运行命令
    npm run dev

![dc74cd77b583430f8972073dc278f3d2.png][]

出现这样的提示说明运行成功

（3）出现上图的提示说明成功，在浏览器输入[http://127.0.0.1:8082][http_127.0.0.1_8082]，即可访问前端页面

![818c96f8c14a4ff0bd44bd22125ddc54.png][]

用户登录

（4）主页看板展示

![ef59b02492e24e89b1845a4f3b9c0e43.png][]

三、设备接入

（1）这里我们以大华摄像头为例

![c857c4b0d4f24779b6fbba7da1bc9470.png][]

摄像头配置界面

（2）编辑好相应参数后，点击确定即可注册到平台。

![1443e716340b42e1ba6e5bcf9fa98309.png][]

设备注册上平台

（3）点播设备，测试是否正常拉流

![d6fa7babe4084bf0b8133626d6d7def2.png][]

通道信息

![e8ccf092ba9a48f794751c6412bb1317.png][]

实际拉流效果

到这里zlm+wvp流媒体平台搭建教程就结束了，对于新手的开发者，可以让他们少走不少弯路，好将更多的时间用在二次开发和产品打磨上。本文不足和没有涉及到的地方，欢迎留言指正！

最后附上我在此框架上二次开发的项目截图，目前已经运用在实际项目中，有相关经验开发者的可以留言交流。

![bea5866a25ce431b9d098184e72d6572.png][]

首页看板

![c2c8df1a7cf847ae89dc45eb33b65be2.png][]

视频监控

![434a89a87f944cbe96ec46acde014ca4.png][]

系统运行情况

ps:最后感谢zlm框架和wvp框架作者，提供这么好的开源框架~

[0bedada8cb7646f49807b8db5ec87f37.png]: https://img-blog.csdnimg.cn/img_convert/0bedada8cb7646f49807b8db5ec87f37.png
[dfc4ff5a54bf44e18f4b3ab8d4270c37.png]: https://img-blog.csdnimg.cn/img_convert/dfc4ff5a54bf44e18f4b3ab8d4270c37.png
[f3c2511bd95648219bedf96f5badf0dc.png]: https://img-blog.csdnimg.cn/img_convert/f3c2511bd95648219bedf96f5badf0dc.png
[39daea5673d242b6ba764bbecaadb4af.png]: https://img-blog.csdnimg.cn/img_convert/39daea5673d242b6ba764bbecaadb4af.png
[7a5ad9abde5d468499fea4ff3c41eed6.png]: https://img-blog.csdnimg.cn/img_convert/7a5ad9abde5d468499fea4ff3c41eed6.png
[6f5f0d1042524da0a1da9ca1c658e08f.png]: https://img-blog.csdnimg.cn/img_convert/6f5f0d1042524da0a1da9ca1c658e08f.png
[223e2c36021548e4b85d5f194fe89110.png]: https://img-blog.csdnimg.cn/img_convert/223e2c36021548e4b85d5f194fe89110.png
[7263dd2db4b841b3b35d3dcb0cd7a89f.png]: https://img-blog.csdnimg.cn/img_convert/7263dd2db4b841b3b35d3dcb0cd7a89f.png
[7ab623ed51e8405a9b33f0aab1d673bf.png]: https://img-blog.csdnimg.cn/img_convert/7ab623ed51e8405a9b33f0aab1d673bf.png
[adaaa54fa98d4129b710cb8df620c03a.png]: https://img-blog.csdnimg.cn/img_convert/adaaa54fa98d4129b710cb8df620c03a.png
[53e1d16026f746b98b69cfe569b94092.png]: https://img-blog.csdnimg.cn/img_convert/53e1d16026f746b98b69cfe569b94092.png
[50f1e6c490f944c29c0ec46791f90bc3.png]: https://img-blog.csdnimg.cn/img_convert/50f1e6c490f944c29c0ec46791f90bc3.png
[19ddad84b4a74b4db3436d0e827e927c.png]: https://img-blog.csdnimg.cn/img_convert/19ddad84b4a74b4db3436d0e827e927c.png
[ecf83dff7c49445d9f7d443e8f1f2431.png]: https://img-blog.csdnimg.cn/img_convert/ecf83dff7c49445d9f7d443e8f1f2431.png
[c1f7294e755d400e91a59f7f1adb9efe.png]: https://img-blog.csdnimg.cn/img_convert/c1f7294e755d400e91a59f7f1adb9efe.png
[475c0cb5223d467aa8d641feb23535ca.png]: https://img-blog.csdnimg.cn/img_convert/475c0cb5223d467aa8d641feb23535ca.png
[28531de32f8b41b7a7c8e8d291e1355c.png]: https://img-blog.csdnimg.cn/img_convert/28531de32f8b41b7a7c8e8d291e1355c.png
[9bad889cb17648ca8bbff306eeb273fd.png]: https://img-blog.csdnimg.cn/img_convert/9bad889cb17648ca8bbff306eeb273fd.png
[dc74cd77b583430f8972073dc278f3d2.png]: https://img-blog.csdnimg.cn/img_convert/dc74cd77b583430f8972073dc278f3d2.png
[http_127.0.0.1_8082]: http://127.0.0.1:8082
[818c96f8c14a4ff0bd44bd22125ddc54.png]: https://img-blog.csdnimg.cn/img_convert/818c96f8c14a4ff0bd44bd22125ddc54.png
[ef59b02492e24e89b1845a4f3b9c0e43.png]: https://img-blog.csdnimg.cn/img_convert/ef59b02492e24e89b1845a4f3b9c0e43.png
[c857c4b0d4f24779b6fbba7da1bc9470.png]: https://img-blog.csdnimg.cn/img_convert/c857c4b0d4f24779b6fbba7da1bc9470.png
[1443e716340b42e1ba6e5bcf9fa98309.png]: https://img-blog.csdnimg.cn/img_convert/1443e716340b42e1ba6e5bcf9fa98309.png
[d6fa7babe4084bf0b8133626d6d7def2.png]: https://img-blog.csdnimg.cn/img_convert/d6fa7babe4084bf0b8133626d6d7def2.png
[e8ccf092ba9a48f794751c6412bb1317.png]: https://img-blog.csdnimg.cn/img_convert/e8ccf092ba9a48f794751c6412bb1317.png
[bea5866a25ce431b9d098184e72d6572.png]: https://img-blog.csdnimg.cn/img_convert/bea5866a25ce431b9d098184e72d6572.png
[c2c8df1a7cf847ae89dc45eb33b65be2.png]: https://img-blog.csdnimg.cn/img_convert/c2c8df1a7cf847ae89dc45eb33b65be2.png
[434a89a87f944cbe96ec46acde014ca4.png]: https://img-blog.csdnimg.cn/img_convert/434a89a87f944cbe96ec46acde014ca4.png