边缘计算+WEB端应用融合：AI行为识别智能监控系统搭建指南 -- 推流及公网环境（三）PART1

专栏目录
边缘计算+WEB端应用融合：AI行为识别智能监控系统搭建指南 – 整体介绍（一）
边缘计算+WEB端应用融合：AI行为识别智能监控系统搭建指南 – 边缘设备图像识别及部署（二）

边缘计算+WEB端应用融合：AI行为识别智能监控系统搭建指南 -- 推流及公网环境（三）PART1

• 前言
• 准备工作和基础知识
• • VLC安装
  • 常见的视频流协议有哪些
  • 网络
• 方案一：hls推流和网络
• • 首先修改YunYan_V1.0配置
  • 配置网络
  • • 服务器端配置
    • 终端设备操作
• 方案二：webrtc推流和网络

前言

从这一篇开始主要讲的就是怎么在公网环境下面获取视频流信息。其中步骤大致分成两个部分，1、产生网页可以识别的流信息。2、实现公网环境下的播放。

在本片中我会把我尝试的两种方式分别写下来，供大家参考。

准备工作和基础知识

我个人在搭建过程中都是边做边学，所以知识方面不求甚解，但都是搭建必须知道的基础知识。

VLC安装

VLC官网地址：https://www.videolan.org
VLC是一个几乎覆盖了所有平台的播放器，几乎可以播放所有的视频流信息。在我们的搭建过程中用到最多的视频流协议就是rtsp，所以需要提前安装。

常见的视频流协议有哪些

我个人在搭建过程中主要使用到的视频协议有rtsp、hls、webrtc、flv（哔哩哔哩喜欢用），其他还有rtmp这是配合flash的早期产物现在几乎没有了。以下简单解释一下这些协议的展现效果。

1. rtsp：这个几乎不用多说，主流摄像头和录像机硬件都带有rtsp输出流，这也是我们获取视频流信息的主要途径，不同的硬件设备可能会流信息地址有所不同，上一篇中就有提到海康的流地址可以查看。这里在购买过程中发现，小米的摄像头不带有rtsp的开放接口，甚至所有的端口都是封闭的。

2. hls：这是我最早调试通过的一种推流方案，原理类似于视频点播，就像某奇艺、某酷、某讯视频。经过观察会形成一个叫做m3u8的文件，这是一个视频的描述文件里面会有多个ts文件的名字，页面获取到m3u8后会根据文件描述内容获取ts文件。优势是画面清晰度高，网络部署方面简单；劣势是存在明显延迟大概在10S左右，因为视频信息会先保存到本体，然后再推送出去，如果网络情况较差可能会导致播放严重卡顿。

3. webrtc：这是最终使用的方案，在网页端表现基本可以做到1-2S的延迟，这里面还包括了AI运算识别的时间。劣势是在网络不佳的情况下画面会卡顿模糊。

4. flv：flv其实和hls有点类似，但是实在一个单一文件里面读写，其实都是前端做起来简单，但是读写压力大。这里不选择hls和flv的主要原因是边缘计算设备是用的tf卡，读写次数过多担心存在问题，稳定性没法保障。

网络

如果想用公网环境播放，公网IP和带宽肯定是少不了的。这里推荐两种方式：1、oracle云的白嫖方案，因为我们的算力基本都在边缘终端上，所以服务器配置基本无所谓；2、阿里云的99/年云服务器，有固定的3M带宽，播放720P的视频基本凑合也能用了。而且阿里云方面备案和域名都比较方便。

其次要明确知道内网和外网，这个在和云系统的配置有关。终端设备和摄像头或者录像机要在同一个局域网下面，终端设备可以访问互联网，如果网口不够可以买一个小交换机。这里我总共有三台设备，一台16G主要用于开发，一台16G、一台8G主要用来测试，网口灯光暴闪就是在局域网内获取视频流。

方案一：hls推流和网络

首先修改YunYan_V1.0配置

我的项目里面推流主要用到的就是zlmediakit，这些配置是用来驱动开启hls功能的。

# 是否开启hls播放功能,default 0,需要和EnableHttp同时开启
EnableHls = 0
# 是否开启hls播放功能,default 0
EnableHttp = 0
# http推流端口,default 80
PushHttpPort = 80

以下是配置对应的代码，需要注意有两处配置需要开启。

// 在端口80上启动HTTP服务器
if (ctx->enable_http == 1)
    mk_http_server_start(ctx->push_http_port, 0);
// 中间代码省略
// 创建MediaSource,参数5开启hls
    ctx->media = mk_media_create("__defaultVhost__", ctx->push_path_first.c_str(), ctx->push_path_second.c_str(), 0, ctx->enable_hls, 0);

在build后运行就可以发现在build目录下会生成这么一个目录，m3u8就是其中的描述文件。zlmediakit会保持m3u8中有3个描述文件路径，同时本地保留多个文件，超出后会自动删除。也就是相当于不停的在tf卡上读写。

其实这样我们就可以测试了，在vlc中使用http://IP:port/yunyan-live/test/hls.m3u8就可以播放视频了。在vue中因为hls也可以直接使用video.js进行播放。

<template>
    <div data-vjs-player>
        <video ref="videoNode" class="video-js vjs-big-play-centered vjs-default-skin demo-video">
            <p class="vjs-no-js">抱歉，您的浏览器不支持</p>
        </video>
    </div>
    
</template>
<style type="text/css">
    .demo-video {
        width: 100%;
        height: 500px;
    }
</style>
<script>
import videojs from "video.js";
//播放器中文，不能使用.js文件
import videozhCN from "video.js/dist/lang/zh-CN.json";
//样式文件注意要加上
import "video.js/dist/video-js.css";
//如果要播放RTMP要使用flash 需要先npm i videojs-flash
//  import "videojs-flash";
export default {
    data() {
        return {
            player: null,
            controls: true
        };
    },
    //初始化播放器
    mounted() {
        let options = {
            autoplay: true, // 自动播放
            language: "zh-CN",
            controls: this.controls, // 控制条
            preload: "auto", // 自动加载
            errorDisplay: true, // 错误展示
            // fluid: true, // 跟随外层容器变化大小，跟随的是外层宽度
            // width: "500px",
            // height: "500px",
            // controlBar: false,  // 设为false不渲染控制条DOM元素，只设置controls为false虽然不展示，但是存在
            // textTrackDisplay: false,  // 不渲染字幕相关DOM
            userActions: {
                hotkeys: true // 是否支持热键
            },
            notSupportedMessage: "此视频暂无法播放，请稍后再试",
            sources: [
                {
                    //src: 'http://129.154.220.75:13180/yunyan-live/test/hls.m3u8', // 视频或者直播地址
                    src: 'http://192.168.124.27/yunyan-live/test/hls.m3u8',
                    type: 'application/x-mpegURL',
                }
            ]
        };

        this.player = videojs(
            this.$refs.videoNode,
            options,
            function onPlayerReady() {
                videojs.log(`Your player is ready!`);
            }
        );
        videojs.addLanguage("zh-CN", videozhCN);
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose();
        }
    }
}
</script>

配置网络

既然知道了hls时基于http的，其实网络问题也很好解决。这里是用到的是frp，一种网络反向代理的工具，特点就是超级简单好用。
frp的下载地址：https://gofrp.org/zh-cn/

服务器端配置

我的服务器是arm版本的，白嫖的oracle，所以下载arm版frp。

//解压frp
tar -zxvf frp_0.52.3_linux_arm64.tar.gz
//进入frp目录
cd frp
//修改配置文件
vi frps.toml
//启动frp
nohup ./frps -c frps.toml > frps.log 2>&1 &

配置文件frps.toml说明。

#服务器端配置
[common]
# frp监听的端口，默认是7000，强烈建议修改
bind_port = 7000
# 授权码，请改成更复杂的，这个token之后在客户端会用到
token = XXXXXXXXXXXXXXX
max_pool_count = 1000
# Pool count in each proxy will keep no more than maxPoolCount.
transport.maxPoolCount = 20
# frp管理后台端口，强烈建议修改
dashboard_port = 7500
# frp管理后台用户名和密码，强烈建议修改
dashboard_user = admin
dashboard_pwd = password
enable_prometheus = true

启动后访问IP:7500，输入账号密码就可以访问以下页面了，这里会显示所有的代理接口。

终端设备操作

由于frp是很轻量化的，完全不用担心对终端设备带来压力。同样下载frp的文件，注意芯片的版本frp_0.52.3_linux_arm64.tar.gz
，frp的更新很快，尽量保持服务器和终端的版本一致。

//解压frp
tar -zxvf frp_0.52.3_linux_arm64.tar.gz
//进入frp目录
cd frp
//修改配置文件
vi frps.toml
//启动frp,这里启动和服务器就差一个字母
nohup ./frpc -c frpc.toml > frpc.log 2>&1 &

frpc.toml配置文件说明

serverAddr = "XXX.XXX.XXX.XXX" #服务器的公网IP
serverPort = 7000 #配置端口
auth.method = "token"         # 认证方式
auth.token = "XXXXXXXXXX" #服务器配置文件中的token
# 22端口开放到公网，此操作很危险谨慎
[[proxies]]
name = "shh"
type = "tcp"
localIP = "127.0.0.1"
localPort = 22
remotePort = 6222
# 554一般是rtsp端口，看yunyan_v1.0的配置文件
[[proxies]]
name = "554"
type = "tcp"
localIP = "127.0.0.1"
localPort = 554
remotePort = 6554
# 这就是我们要用到的80端口了，其实只要配置这一个就行
[[proxies]]
name = "80"
type = "tcp"
localIP = "127.0.0.1"
localPort = 80
remotePort = 6880

启动完成后就可以在frp控制台看到了。

之后其实只要使用上文中的vue写法把地址改成公网的就可以播放了。

监控以下带宽和流量，测试下来1080P的视频1分钟差不多要100M左右，差不多10分钟就是1G。在内网测试没感觉，但是到了公网就要注意了，都是费用。

方案二：webrtc推流和网络

这种方法是在和群里小伙伴沟通是否提到的，于是尝试了一下，的确效果很不错。基于webrtc进行网页的通信，当然这里面要稍显复杂，其中还有一个大坑。具体内容放到：边缘计算+WEB端应用融合：AI行为识别智能监控系统搭建指南 – 推流及公网环境（三）PART2更新。

如果你喜欢这篇博客请点赞留言，后续会更新在部署完成后怎么打破网络限制在公网进行通信PART2。