.Net 5分钟搞定网页实时监控

、为什么会用到网页实时监控

LZ最近在无锡买房了，虽然在上海工作，但是上海房价实在太高无法承受，所以选择还可以接受的无锡作为安身之地。买过房的小伙伴可能知道买房的流程，买房中间有一步很重要的就是需要商品房备案，简单点说就是你买房时可以在政府商品房备案网站处查看你购买房的备案情况，如果是已经备案了开发商还在卖这套房子，那肯定就是一房多卖了。而且很重要一点就是，只有备过案，才能进行下一步银行贷款，在目前银行利息越来越高的情况下，肯定是越早备案越早贷款越有利，所以以最快速度知道自己购买房子的备案情况尤为重要。

当然也可以每天到网站查询自己的备案情况，显然这不是程序员的做法，更不是.Net程序员的做法。程序员的做法肯定是备案一旦下来，程序老老实实的通知到手机上。顺便吐槽一点，查询备案的网站真慢。

二、选择windows服务、窗体(winform)、web还是控制台程序？

当然最合适的肯定是windows服务，winform和web肯定也可以的，控制台程序不一定是最合适的，但肯定开发是最快速的。综合考虑了一下，因为是一个很小的监控项目而且只会用一两个月，或者一两天，所以没变要搞那么复杂，而且windows服务还要安装到服务器，最重要的是控制台是最快开发和最容易部署的，所以最终选择了控制台程序。

三、分析需求

1、需要每隔几分钟查询一次备案情况，所以需要System.Timers.Timer。当然如果是非常健壮的或者是完整的项目，建议用Quartz.NET，当然可以选择Topshelf、Hangfire、FluentScheduler等等。

2、因为需要查询网站的备案情况，获取备案网页的html，然后判断html中是否含有“待售”字样即可，如果没有就说明已经备案了。这时需要System.Net.WebClient。查询网站.net下就更多了，最基础的就是HttpWebRequst，HttpClient，或者用RestSharp，都是不错的选择。

3、因为需要实时通知情况，所以选择了阿里云的短信通知，因为其他项目用到，所以直接复制代码来用。当然也有很多通知，比如邮件，app，等等。当然我们没必要搞那么复杂。

四、代码模块

直接代码，逻辑和代码很简单。

1 class Program 2 { 3 static System.Timers.Timer timer=null; 4 5 static void Main(string[] args) 6 { 7 timer=new System.Timers.Timer(2 * 60 * 1000); 8 timer.Elapsed +=Timer_Elapsed; ; 9 timer.Start();10 Console.ReadKey();11 }12 13 private static void Timer_Elapsed(object sender, System.Timers.ElapsedEventArgs e)14 {15 WebClient client=new WebClient16 {17 Encoding=System.Text.Encoding.GetEncoding("utf-8")18 };19 20 var html=client.DownloadString("http://www.xxxx.com/xxxxx.html");21 Console.WriteLine(DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "......" + "未签。");22 if (html.IndexOf("待售")==-1)23 {24 if (timer !=null)25 timer.Stop();26 27 // 发送5条短信28 for (int i=0; i < 5; i++)29 {30 // 发送短信31 SmsMessage.Send("152****7178", "SMS_92310001", new { name="Emrys", status="恭喜恭喜恭喜，房子已签售！" });32 Thread.Sleep(5 * 1000);33 }34 35 }36 }37 }

五、部署

好吧，这项没啥以及意义，直接生成代码，在bin目录拷贝Debug文件夹直接扔到服务器，点击运行xxxxxxx.exe。部署完毕。^_^

六、总结

1、虽然当时只是突发奇想，并没有具体统计时间，拿起vs就是一顿突突。所有代码和部署应该不会超过5分钟。从这可以看出.Net在vs配合下在一些方面做的还是不错的。

2、现在.Net core开源跨平台以及运行速度，C#“优美的语言”，vs宇宙第一IDE，其他不多说，望.Net越来越好。^_^

作者：Emrys

出处：http://www.cnblogs.com/emrys5/p/net-real-time-monitoring-web.html

着互联网技术飞速发展，网页录屏技术已趋于成熟。例如可将录屏技术运用到在线考试中，实现远程监考、屏幕共享以及录屏等；而在我们开发人员研发过程中，对于部分偶发事件，异常监控系统仅仅只能告知程序出错，而不能清晰的告知错误的复现路径，而录屏技术或许能帮我们定位并复现问题。那么本文将从有感录屏和无感录屏两方面给读者分享一下录屏这项技术，希望可以帮助你对网页录屏有一个初步认识。

什么是有感录屏？

有感录屏一般指通过获得用户的授权或者通知用户接下来的操作将会被录制成视频，并且在录制过程中，用户有权关闭中断录屏。即无论在录屏前还是录屏的过程中，用户都始终能够决定录屏能否进行。

基于 WebRTC 的有感录屏

常见的有感录屏方案主要是通过 WebRTC (https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API) 录制。WebRTC 是一套基于音视轨的实时数据流传播的技术方案。由浏览器提供的原生 API navigator.mediaDevices.getDisplayMedia 方法实现提示用户选择和授权捕获展示的内容或窗口，进而将获取 stream (录制的屏幕音视流)。我们可以对 stream 进行转化处理，转成相对应的媒体数据，并将其数据存储。后续需要回溯该次录制内容时，则取出媒体数据进行播放。

具体的有感录屏流程如下：

实现初始化录屏和数据存储

使用 navigator.mediaDevices.getDisplayMedia 初始化录屏，触发弹窗获取用户授权，效果图如下所示：

实现 WebRTC 初始化录屏核心代码如下：

const tracks=[]; // 媒体数据
const options={
  mimeType : "video/webm; codecs=vp8", // 媒体格式
};
let mediaRecorder;
// 初始化请求用户授权监控
navigator.mediaDevices.getDisplayMedia(constraints).then((stream)=> {
  // 对音视流进行操作
  startFunc(stream);
});
// 开始录制方法
function start(stream) {
  // 创建 MediaRecorder 的实例对象，对指定的媒体流进行录制
  mediaRecorder=new MediaRecorder(stream, options);
  // 当生成媒体流数据时触发该事件，回调传参 event 指本次生成处理的媒体数据
  mediaRecorder.ondataavailable=event=> {
     if(event?.data?.size > 0){
      tracks.push(event.data); // 存储媒体数据
    }
  };
  mediaRecorder.start();
  console.log("************开始录制************")
};
// 结束录制方法
function stop() {
  mediaRecorder.stop();
  console.log("************录制结束************")
}
// 定义constraints数据类型
interface constraints {
  audio: boolean | MediaTrackConstraints, // 指定是否请求音轨或者约束轨道属性值的对象
  video: boolean | MediaTrackConstraints, // 指定是否请求视频轨道或者约束轨道属性值的对象
}

实现录屏回溯

获取该次录屏的媒体数据，可以将其转成 blob 对象，并且生成 blob对象的 url 字符串，再赋值 video.src 中，便可以回放到录制结果，回溯的视频效果如下：

录屏回溯方法的核心代码如下所示：

// 回放录制内容
function replay() {
  const video=document.getElementById("video");
  const blob=new Blob(tracks, {type : "video/webm"});
  video.src=window.URL.createObjectURL(blob);
  video.srcObject=null;
  video.controls=true;
  video.play();
}

实现实时直播功能

由于存储的媒体数据是实时的，因此可以利用该数据实现直播功能。通过给 video.srcObject 赋值媒体流可以实现直播功能。

实现实时直播核心代码如下：

// 直播
function live() {
  const video=document.getElementById("video");
  video.srcObject=window.stream;
  video.controls=true;
  video.play();
}

浏览器兼容性

什么是无感录屏？

无感录屏指在用户无感知的情况，对用户在页面上的操作进行录制。实现上与有感录制区别在于，无感录制通常是利用记录页面的 DOM 来进行录制。常见的有 canvas 截图绘制视频和 rrweb 录制等方案。

canvas 截图绘制视频

用户在浏览页面时，可以通过 canvas 绘制多个 DOM 快照截图，再将多个截图合并成一段录屏视频。但是考虑到假设视频帧数为 30 帧，帧数代表着每秒所需的截图数量，为了视频的流畅和清晰，每张截图为 400 KB ，那么当视频长度为 1 分钟，则需要上传 703.125 MB 的资源，这么大的带宽浪费无疑会造成性能，甚至影响用户体验，不推荐使用，也不在此详细介绍本方案实现。

rrweb 录制

rrweb (record and replay the web) 是一个对于 DOM 录制的支持性非常好，利用现代浏览器所提供的强大 API 录制并回放任意 web 界面中的用户操作，能够将页面 DOM 结构通过相应算法高效转换 JSON 数据的开源库。相比较于使用 canvas 绘制录屏，rrweb 在保证录制不掉帧的基础上，让网络传输数据更加快速和轻量化，极大地优化了网络性能。

rrweb 开源库主要由 rrweb-snapshot、rrweb 和 rrweb-play 三部分组成，并且提供了动作筛选，数据加密、数据压缩、数据切片、屏蔽元素等功能。

rrweb-snapshot

rrweb-snapshot 提供 snapshot 和 rebuild 两个 API，分别实现生成可序列化虚拟 DOM 快照的数据结构和将其数据结构重建为对应 DOM 节点的两个功能。

snapshot 将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识 id，使得一个 id 映射对应的一个 DOM 节点，方便后续以增量的方式来操作。

首先需要通过深拷贝 document 生成初始化 DOM 快照。

// 深拷贝 document 节点
const docEl=document.documentElement.cloneNode(true);
// 回放时再将深拷贝的节点挂在回去即可
document.replaceChild(docEl, document.documentElement);

由于获取到的 DOM 对象并不是可序列化的，因此仍需要将其转成特定的文本格式（如 JSON）进行传输，否则无法做到远程录制。在实现 DOM 快照可序列化的过程中，还需对数据进行特殊处理：

将相对路径改成绝对路径；
将页面引用的样式改成内联样式；
禁止脚本运行，被录制页面中的所有 JavaScript 都不应该被执行。把 <script> 转成 <noscrpit> ；
由于部分表单（如 <input type="text" /> ）不会把值暴露在 html 中，故需读取表单的 value 值。

虽然已经能够获取到全量的 DOM 对象，但是无法将增量快照中被交互的 DOM 节点和现已有的 DOM 节点关联上，所以还需要给 DOM 添加一层映射关系（id=> Node），后续 DOM 节点的更新都通过该 id 来记录并对应到完整的 DOM 节点中。

如下是初始时获取到的 DOM 节点：

<html>
  <body>
    <header>
    </header>
  </body>
</html>

通过遍历整个 DOM 树，以 Node 节点为单位，给每个遍历到的 Node 都添加了唯一标识 id ，生成全量序列化的 DOM 对象快照。以下是序列化后的数据结构示意：

{
  "type": "Document",
  "childNodes": [
    {
      "type": "Element",
      "tagName": "html",
      "attributes": {},
      "childNodes": [
        {
          "type": "Element",
          "tagName": "head",
          "attributes": {},
          "childNodes": [],
          "id": 3
        },
        {
          "type": "Element",
          "tagName": "body",
          "attributes": {},
          "childNodes": [
            {
              "type": "Text",
              "textContent": "\n    ",
              "id": 5
            },
            {
              "type": "Element",
              "tagName": "header",
              "attributes": {},
              "childNodes": [
                {
                  "type": "Text",
                  "textContent": "\n    ",
                  "id": 7
                }
              ],
              "id": 6
            }
          ],
          "id": 4
        }
      ],
      "id": 2
    }
  ],
  "id": 1
}

rebuild

将 snapshot 记录的初始化快照的数据结构，继而通过递归给每个节点添加属性来重建 DOM ，生成可序列化的 DOM 节点快照。

rrweb

rrweb 提供 record 和 replay 两个 API，分别实现记录所有增量数据和将记录的数据按照时间戳回放的两个功能。

record

通过触发视图的变化和 DOM 结构的改变（如 DOM 节点的删减和属性值的变化）来劫持增量变化数据存入 JSON 对象中，每个增量数据对应一个时间戳，这些数据称之为 Oplog（operations log）。

视图的变化可通过全局事件监听和事件代理方法收集增量数据，而这些事件大多是和用户的操作行为相关，能够触发这类事件的动作如 DOM 节点或内容的变动、鼠标移动或交互、页面或元素滚动、键盘交互和窗口大小变动。

DOM 结构的改变可以通过浏览器提供的 MutationObserver (https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver) 接口能监视，触发参数回调，获取到本次 DOM 的变动的节点信息，进而对数据进行筛选重组等处理。回调参数的数据结构如下：

let MutationRecord1: MutationRecordObject[];
interface MutationRecordObject {
  /**
   * 如果是属性变化，则返回 "attributes"；
   * 如果是 characterData 节点变化，则返回 "characterData"；
   * 如果是子节点树 childList 变化，则返回 "childList"。
  */
  type: String,
  // 返回被添加的节点。如果没有节点被添加，则该属性将是一个空的 NodeList。
  addedNodes: NodeList,
  // 返回被移除的节点。如果没有节点被移除，则该属性将是一个空的 NodeList。
  removedNodes: NodeList,
  // 返回被修改的属性的属性名，或者 null。
  attributeName: String | null,
  // 返回被修改属性的命名空间，或者 null。
  attributeNamespace: String | null,
  // 返回被添加或移除的节点之前的兄弟节点，或者 null。
  previousSibling: Node | null,
  // 返回被添加或移除的节点之后的兄弟节点，或者 null。
  nextSibling: Node | null,
  /** 返回值取决于 MutationRecord.type。
   * 对于属性 attributes 变化，返回变化之前的属性值。
   * 对于 characterData 变化，返回变化之前的数据。
   * 对于子节点树 childList 变化，返回 null。
  */
  oldValue: String | null,
}

record 收集的 Oplog 数据结构如下图所示：

let Oplog: OplogObject[];
interface OplogObject {
  /** 返回值取决于收集的事件类型
   * DomContentLoaded: 0, Load: 1,
   * FullSnapshot: 2, IncrementalSnapshot: 3,
   * Meta: 4, Custom: 5, Plugin: 6
  */
  type: Number,
  data: {
    // 返回添加的节点数据
    adds: [],
    // 返回修改的节点属性数据
    attributes: [],
    // 返回移除的节点属性数据
    removes: [],
    /** 返回值取决于增量数据的增量类型
     * Mutation: 0, MouseMove: 1,
     * MouseInteraction: 2, Scroll: 3,
     * ViewportResize: 4, Input: 5,
     * TouchMove: 6, MediaInteraction: 7,
     * StyleSheetRule: 8, CanvasMutation: 9,
     * Font: 10, Log: 11,
     * Drag: 12, StyleDeclaration: 13
    **/
    source: Number,
    // 返回当前修改的值，无则不返回
    text: String | undefined,
  },
  // 当前时间戳
  timestamp: Number,
}

replay

基于初始化的快照数据和增量数据，将其按照对应的时间戳一一回放。由于一开始创建快照时已经禁止了脚本运行，所以可以通过 iframe 作为容器来重建 DOM 全量快照，并且通过 sanbox 属性禁止了脚本执行、弹出窗和表单提交之类的操作。把 Oplog 放入操作队列中，按照每个的时间戳先后进行排序，再使用定时器 requestAnimationFrame 回放 Oplog 快照。

rrweb-player

为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。

摘要】这篇文章介绍华为云ECS服务器的购买、部署、登录、使用的整体流程，在服务器部署NGINX服务，搭建一个安防视频监控平台，本地开发了配套的RTMP流媒体推流客户端、RTMP播放器，完成整体效果演示。 RTMP流媒体推流客户端就是用来模拟摄像头硬件设备，RTMP流媒体推流客户端在笔记本电脑上运行，将笔记本电脑上的摄像头音视频流实时推流到华为云服务器转存。

1. 前言
华为云的弹性云服务器（Elastic Cloud Server）是一种可随时自助获取、可弹性伸缩的云服务器，帮助用户打造可靠、安全、灵活、高效的应用环境，确保服务持久稳定运行，提升运维效率。弹性云服务器从创立到发动只需几分钟，客户将具有云服务器的超级管理员权限，轻松布置各种运用。

这篇文章介绍华为云ECS服务器的购买、部署、登录、使用的整体流程，在服务器部署NGINX服务，搭建一个安防视频监控平台，本地开发了配套的RTMP流媒体推流客户端、RTMP播放器，完成整体效果演示。 RTMP流媒体推流客户端就是用来模拟摄像头硬件设备，RTMP流媒体推流客户端在笔记本电脑上运行，将笔记本电脑上的摄像头音视频流实时推流到华为云服务器转存。

2. 购买云服务器
如果之前没有使用过华为云的ECS服务器，可以先申请试用1个月，了解服务器的基本使用然后再购买，不得不说提供这个试用服务还是非常不错。

产品试用领取地址: https://activity.huaweicloud.com/free_test/index.html

每天9:30开抢，每天限量100份，这个页面不仅有云服务器可以领取试用，还有云数据库、沙盒等其他产品。

我这里领取了 2核4G S6云服务器，这个服务器是配套华为自研25GE智能高速网卡，适用于网站和Web应用等中轻载企业应用。

选择配置的时候发现S6规格的已经没有了，来晚了。

S6规格没有了，就选择了S3，2核，4GB的配置结算。

image-20220611131022494

页面向下翻，下面选择系统预装的系统，我这里选择ubuntu 20.04，安装NGINX，来搭建流媒体服务器。

页面继续下翻，设置云服务器名称，设置系统的root密码。

接着就可以继续去支付了。

购买后等待一段时间，系统资源就即可分配完成。

3. 登录云服务器
云服务器的管理控制台从这里进入: https://www.huaweicloud.com/product/ecs.html

在官网主页，点击产品，找到计算选项，就可以看到弹性云服务器ECS，点击进去就可以看到管理控制台的选项。

在弹性云服务器的选项页面可以看到刚才购买的云服务器，如果点击进去提示该区域没有可用的服务器，说明区域选择的不对，在下面截图红色框框的位置可以看到可用的区域切换按钮，切换之后就行了。

点击服务器右边的更多，可以对服务器重装系统、切换操作系统、关机、开机、重启、重置密码等操作。

接下来先点击登录，了解一下登录的流程，看看系统进去的效果。

云服务器支持SSH协议远程登录，可以在浏览器上直接使用CloudShell方式或者VNC方式登录，如果本身你自己也是使用Linux系统，可以在Linux系统里通过ssh命令直接登录，如果是在windows下可以使用SecureCRT登录。

其他登录方式。

最方便的登录方式，直接在控制台使用VNC在浏览器里登录，点击立即登录。

根据提示输入用户名，密码后，按下回车键即可登录。

用户名直接输入root，密码就是刚才配置云服务器时，填入的root密码。

注意: Linux下输入密码默认都是隐藏的，也就是在键盘上输入密码界面上是不会有反应的，自己按照正确的密码输入即可。

用户名、密码输入正确后，登录成功。

可以点击全屏模式，更好的操作。

4. 使用CloudShell登录云服务器
在页面上直接点击CloudShell登录按钮。CloudShell方式比VNC方式方便、流畅多了，也支持命令的复制粘贴。

输入密码点击连接。

登录成功进入终端。

5. 使用SecureCRT登录云服务器
上面演示了两种登录方式，都是直接在浏览器里登录，这种两种方式比较来看，VNC方式效率最低，CloudShell相对来说要方便很多。一般我自己正常开发时，都是使用第三方工具来登录的，如果本身自己开发环境的电脑就是Linux，MAC等，可以直接使用ssh命令登录，这种方式操作流畅方便。如果在windows下，可以使用第三方软件登录。

我现在使用的系统是win10，在windows系统下有很多远程终端软件支持SSH登录到Linux云服务器，我当前采用的使用SecureCRT 6.5来作为登录终端，登录云服务器。

注意: SecureCRT 6.5 登录高版本Linux系统会出现Key exchange failed问题，导致登录失败，比如: 登录ubuntu 20.04 系统。出现这种问题需要对系统ssh配置文件进行添加配置。

添加配置的流程:

命令行输入:
vim /etc/ssh/sshd_config

在文件最后添加:
KexAlgorithms curve25519-sha256@libssh.org,ecdh-sha2-nistp256,ecdh-sha2-nistp384,ecdh-sha2-nistp521,diffie-hellman-group-exchange-sha256,diffie-hellman-group14-sha1,diffie-hellman-group-exchange-sha1,diffie-hellman-group1-sha1

保存退出。

重启ssh服务
service ssh restart

如果不想这么麻烦的去修改配置文件，那么最简单的办法就是: 切换操作系统，换一个低版本的，比如：ubuntu18.04 即可。

在云服务器的控制台，找到自己的服务器，然后选择切换操作系统。

根据界面上的引导流程，切换即可。更换新的系统需要1~4分钟时间，稍微等待一下即可。

如果要使用远程SSH协议方式登录云服务器，需要具备以下几个前提条件。

[1]弹性云服务器状态为“运行中”。
[2]弹性云服务器已经绑定弹性公网IP，绑定方式请参见绑定弹性公网IP。
[3]所在安全组入方向已开放22端口，配置方式请参见配置安全组规则。
[4]使用的登录工具（如PuTTY,SecureCRT`）与待登录的弹性云服务器之间网络连通。例如，默认的22端口没有被防火墙屏蔽。

但是这些配置不用担心，在购买服务器后，根据引导一套走完，上面的这些配置都已经默认配置好了，不用自己再去单独配置。

系统切换成功后，打开SecureCRT 6.5软件，进行登录。SecureCRT 6.5整体而言还是挺好用的。

如果自己没有``SecureCRT，自己下载一个即可。当然，不一定非要使用SecureCRT`，其他还有很多SSH远程登录工具，喜欢哪个使用哪个。

下面介绍``SecureCRT `登录的流程。

选择新建会话。

选择SSH2协议。

主机名就填服务器的公网IP地址，端口号默认是22，用户名填root。

自己云服务器的公网IP地址，在控制台可以看到。

软件点击下一步之后，可以填充描述信息，备注这个链接是干什么的。

选择刚才新建的协议端口点击连接。

云服务器连接上之后，软件界面会弹出对话框填充用户名、密码。

登录成功的效果如下。

软件可以配置一些选项，让界面符合Linux终端配色，可以修改字体大小、字体编码等等。

配置后的效果。

6. 安装NFS服务器
为了方便向服务器上拷贝文件，可以采用NFS服务器、或者FTP服务器这些方式。我本地有一台ubuntu 18.04 系统笔记本，我这里采用NFS方式拷贝文件上去。

（1）安装NFS服务器

root@ecs-348470:~# sudo apt-get install nfs-kernel-server
（2）创建一个work目录方便当做共享目录使用

root@ecs-348470:~# mkdir work
（3）编写NFS配置文件

NFS 服务的配置文件为/etc/exports，如果系统没有默认值，这个文件就不一定会存在，可以使用 vim 手动建立，然后在文件里面写入配置内容。

/home/work *(rw,no_root_squash,sync,no_subtree_check,insecure)

配置文件里参数的含义:

（4）NFS服务器相关指令

/etc/init.d/nfs-kernel-server start #启动 NFS 服务
ufw disable #关闭防火墙
/etc/init.d/nfs-kernel-server restart #重启NFS服务
exportfs -arv #共享路径生效

（5）本地客户机挂载服务器的目录

wbyq@wbyq:~$ sudo mount -t nfs -o nolock 122.112.212.171:/home/work /home/wbyq/mnt/
（6）设置华为云服务器的安全策略

需要把华为云服务器的端口号开放出来，不然其他客户端是无法访问服务器的。

我这里比较粗暴直接，直接将所有端口号，所有IP地址都开放出来了。

**（7）本地客户机挂载服务器测试 **

挂载指令:

sudo mount -t nfs -o nolock 122.112.212.171:/home/work /home/wbyq/mnt/
image-20220611185744008

7. 安装NGINX(配置RTMP服务)
（1）下载编译时需要依赖的一些工具

root@ecs-348470:~# sudo apt-get install build-essential libpcre3 libpcre3-dev libssl-dev

（2）下载NGINX编译需要的软件包

root@ecs-348470:~# mkdir nginx
root@ecs-348470:~# cd nginx/
root@ecs-348470:~# wget http://nginx.org/download/nginx-1.10.3.tar.gz
root@ecs-348470:~# wget http://zlib.net/zlib-1.2.11.tar.gz
root@ecs-348470:~# wget https://ftp.pcre.org/pub/pcre/pcre-8.40.tar.gz
root@ecs-348470:~# wget https://www.openssl.org/source/openssl-1.0.2k.tar.gz
root@ecs-348470:~# wget https://github.com/arut/nginx-rtmp-module/archive/master.zip
image-20220611190538685

（3）下载后的文件全部解压

root@ecs-348470:~# tar xvf openssl-1.0.2k.tar.gz
root@ecs-348470:~# tar xvf nginx-rtmp-module-master.tar.gz
root@ecs-348470:~# tar xvf nginx-1.8.1.tar.gz
root@ecs-348470:~# tar xvf pcre-8.40.tar.gz
root@ecs-348470:~# tar xvf zlib-1.2.11.tar.gz
image-20220611190905353

（4）配置NGINX源码，生成Makefile文件

root@ecs-348470:~# cd nginx-1.8.1/
root@ecs-348470:~# ./configure --prefix=/usr/local/nginx --with-debug --with-pcre=../pcre-8.40 --with-zlib=../zlib-1.2.11 --with-openssl=../openssl-1.0.2k --add-module=../nginx-rtmp-module-master
执行完上一步之后，打开objs/Makefile文件，找到-Werror选项并删除。

（5）编译并安装NGINX

root@ecs-348470:~/nginx/nginx-1.8.1# make && make install
安装之后NGINX的配置文件存放路径:

/usr/local/nginx/nginx：主程序
（6）查看NGINX的版本号

root@ecs-348470:/usr/local/nginx/sbin# /usr/local/nginx/sbin/nginx -v
nginx version: nginx/1.8.1
（5）在配置文件里加入RTMP服务器的配置

root@ecs-348470:~# vim /usr/local/nginx/conf/nginx.conf
打开文件后，在文件最后加入以下配置：

这样配置之后，服务器收到RTMP流会在NGINX的当前目录下，创建一个video目录用来缓存视频。

客户端向服务器推流之后，服务器就会缓存视频到设置的目录。

（5）检查配置文件是否正确

（6）NGINX常用的3个命令
sudo service nginx start
sudo service nginx stop
sudo service nginx restart

（7）启动NGINX服务器
sudo service nginx start

8. 摄像头推流音视频到服务器
为了模拟摄像头实时监控推流，我这使用QT+FFMPEG编写了一个小软件，在windows下运行，推流本地笔记本电脑的数据到服务器。软件运行之后，将本地音频、视频编码之后通过RTMP协议推流到NGINX服务器。

软件运行效果:

推流工具运行过程中效果。

9. 编写本地RTMP流播放器
在上面第8小节，通过推流客户端模拟摄像头，已经将本地的摄像头数据实时推流到服务器了，那么还差一个播放器，为了方便能够在任何有网的地方实时查看摄像头的音频和图像，还需要编写一个RTMP流媒体播放器。

我这里的播放器内核是采用libvlc开发的，使用QT作为GUI框架，开发了一个流媒体播放器，可以实时拉取服务器上的流数据，并且还支持回放。因为服务器上的NGINX配置了自动保存的参数，可以将推上去的流按时间段保存下来。

输入服务器地址之后就可以拉取流进行播放。

点击获取回放列表，可以查看服务器上保存的历史视频回放播放。

10. 总结
相较于传统服务器，云服务器具有多方面的优势，利用弹性计算优势，帮助企业完成云上业务的部署与应用,，可以根据自身需要自定义服务器配置，灵活地选择设定所需的内存、CPU、带宽等配置，整体上减小了企业自己搭建服务器开发的成本，还省了服务器的一大堆维护费用。

【华为云至简致远】有奖征文火热进行中：https://bbs.huaweicloud.com/blogs/352809

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区），文章链接，文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：cloudbbs@huaweicloud.com进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。