Update vnet.md

docs/project/vnet.md

@@ -4,3 +4,47 @@ outline: deep
 
 # 视联网项目复盘
 
+## 简介
+
+该项目是展示一些摄像头的视频流，以及一些摄像头的状态信息的平台。
+
+一般有的功能包括：
+
+1. 摄像头信息管理(摄像头信息多字段增删改查)
+
+2. 摄像头视频流展示(摄像头视频流展示、摄像头视频流播放、摄像头视频流暂停、摄像头视频流停止)
+
+3. 多个摄像头分屏展示（单分屏、四分屏、九分屏）
+
+4. 数字人AI识别用户要求并执行命令
+
+5. 设备告警信息展示(设备告警信息展示、设备告警信息详情)
+
+
+
+## 全栈开发过程中的重点功能点
+
+### 1.摄像头视频流展示(摄像头视频流展示、摄像头视频流播放、摄像头视频流暂停、摄像头视频流停止)
+
+一般有两种方案，看需求方对延迟需求大不大，如果想要低延迟的视频流展示，那只有选择`rtsp转ws方案`，如果不是很在乎延迟，可以选择`hls方案`。
+
+#### `rtsp转ws方案`
+
+rtsp转ws方案是将rtsp协议的视频流转换成ws协议的视频流，然后在前端使用`JSMPEG`这个库将mpeg-ts的视频流通过canvas画在页面上。
+
+可以参考：
+[**前端视频流播放实现**](https://git.leet-code.online/function/video.html)
+
+rtsp转ws方案的优点是延迟低，缺点是需要服务器端进行转码(吃服务器的cpu)，虽然转码的过程中会有一定的延迟，但是这个延迟很低，基本在500毫秒以内。
+
+
+#### `hls方案`
+
+hls方案是将hls协议的视频流使用一些js库在前端进行播放，比如`hls.js`、`videojs`、`xgplayer`等。
+
+hls方案的优点是不需要服务器端进行转码，只需要前端就可以直接播放，缺点是延迟高，一般延迟会来到10秒(10000毫秒)左右。
+
+hls播放有个新的库，叫`easyplayerjs`，类似与`xgplayerjs`，但是功能更简单，使用也更简单,如果`xgplayerjs`满足不了需求，可以考虑使用`easyplayerjs`。
+
+### 2.多个摄像头分屏展示（单分屏、四分屏、九分屏）
+