diff --git a/docs/project/vnet.md b/docs/project/vnet.md index ead9bfc..3deb016 100644 --- a/docs/project/vnet.md +++ b/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.多个摄像头分屏展示(单分屏、四分屏、九分屏) +